Next.js @elastic/eui

next.config.js

const withSass = require('@zeit/next-sass');

// Use sass to import @elastic/eui scss 
// @import "~@elastic/eui/src/global_styling/index";
// @import "~@elastic/eui/src/components/index";
module.exports = withSass({
  webpack(config, {isServer}) {
    if (isServer) {

      /**
       * We have to force the bundling of @elastic/eui and react-ace
       * as Gatsby, then all loaders below will match and avoid HTMLElement issues
       */
      config.externals = config.externals.map(fn => {
        return (context, request, callback) => {
          if (request.indexOf('@elastic/eui') > -1 || request.indexOf('react-ace') > -1) {
            return callback();
          }

          return fn(context, request, callback);
        };
      });

      config.module.rules.push(
        {
          test: /react-ace/,
          use: 'null-loader',
        },
      );


      let definePluginId = config.plugins.findIndex(p => p.constructor.name === 'DefinePlugin');
      config.plugins[definePluginId].definitions = {
        ...config.plugins[definePluginId].definitions,
        HTMLElement: function(){},
        window: function(){},
      };
    }

    return config;
  }
});