issue

webpack.base.js

/* eslint-disable import/no-dynamic-require */
const path = require('path');
const { camelCase, startCase } = require('lodash');
const webpack = require('webpack');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const NODE_POLYFILL_ALIASES = require('./nodePolyfillAliases');

const { ModuleFederationPlugin } = webpack.container;
const cwd = process.cwd();
const DIST_PATH = path.resolve(cwd, 'dist');
const SRC_PATH = path.resolve(cwd, 'src');
const PACKAGE_JSON_PATH = path.resolve(cwd, 'package.json');
const INDEX_JS_PATH = path.resolve(SRC_PATH, 'index.js');
const isDev = process.env.BABEL_ENV === 'development';
const prodContentHash = !isDev && '.[contenthash]';
const NODE_MODULES = 'node_modules';
// PATH FROM EK-REACT_MODULE-BUILD (ie: ek-react-module-build/node_modules)
const NODE_MODULES_ABSOLUTE_PATH = path.resolve(__dirname, NODE_MODULES);
// PATH FROM WHERE THE BUILD IS TRIGGERED (ie: ek-request/node_modules)
const NODE_MODULES_RELATIVE_PATH = path.resolve(cwd, NODE_MODULES);

const {
  id: packageId,
  includePolyfills = [],
  exposes,
  name,
  packageName,
  parentPath = '',
  remotes,
  shared
} = require(PACKAGE_JSON_PATH);

const getDefaultExpose = () => {
  const componentName = startCase(name).replace(/ /g, '');
  const fullComponentPath = `./${componentName}`;

  return { [fullComponentPath]: './' };
};

const baseConfig = {
  context: SRC_PATH,
  entry: INDEX_JS_PATH,
  resolve: {
    extensions: ['.js'],
    // Avoid duplicates (each module imports only once from app/node_modules)
    modules: [
      NODE_MODULES_ABSOLUTE_PATH,
      NODE_MODULES_RELATIVE_PATH,
      NODE_MODULES
    ]
  },
  output: {
    path: DIST_PATH,
    filename: path.join(parentPath, packageId, 'index.js'),
    chunkFilename: path.join(parentPath, packageId, 'static', `[name]${prodContentHash}.js`),
    publicPath: 'auto',
    library: packageName || packageId,
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [SRC_PATH],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // debug: true,
                    corejs: {
                      version: '3.15'
                    },
                    useBuiltIns: 'usage',
                    targets: 'defaults'
                  }
                ],
                [
                  '@babel/preset-react',
                  {
                    development: isDev
                  }
                ]
              ],
              plugins: [
                'babel-plugin-styled-components',
                '@babel/plugin-proposal-class-properties'
              ]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          // https://github.com/webpack-contrib/mini-css-extract-plugin#recommend
          isDev
            ? 'style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader'
        ],
        type: 'javascript/auto'
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        },
        type: 'javascript/auto'
      },
      {
        test: /\.svg$/,
        use: [
          require.resolve('@svgr/webpack'),
          {
            loader: 'url-loader',
            options: {
              esModule: false
            }
          }
        ],
        type: 'javascript/auto'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new ModuleFederationPlugin({
      name: `${camelCase(name)}`,
      filename: path.join(parentPath, packageId, 'remoteEntry.js'),
      exposes: exposes || getDefaultExpose(),
      shared,
      remotes
    })
  ]
};

const polyfillsToExclude = NODE_POLYFILL_ALIASES.filter(
  (alias) => !includePolyfills.includes(alias)
);

if (polyfillsToExclude.length < NODE_POLYFILL_ALIASES.length) {
  baseConfig.plugins.push(new NodePolyfillPlugin({ excludeAliases: polyfillsToExclude }));
}

if (!isDev) {
  baseConfig.plugins.push(new MiniCssExtractPlugin({
    filename: path.join(parentPath, packageId, `index${prodContentHash}.css`),
    chunkFilename: path.join(parentPath, packageId, `[id]${prodContentHash}.css`),
    ignoreOrder: true // https://stackoverflow.com/questions/51971857/mini-css-extract-plugin-warning-in-chunk-chunkname-mini-css-extract-plugin-con/67579319#67579319
  }));
}

module.exports = baseConfig;