Webpack 5 not transforming a Node Module ESM Package

Viewed 112
  • I have a Webpack 5 config, set to emit commonjs2 outputs
  • It's consumed for a Isomorphic web app, so one bundle for browser, another for Node
  • Material UI / MUI have published version 5, which is a ESM package (the JS files use the import/export syntax).
  • The build succeeds normally, however, when running the node output, Node complains Unexpected token 'export' as soon as it trys to read any MUI file.

Shortened webpack config:

const server = {
  target: "node",
  externalsPresets: { node: true },
  module: {
    rules: [
      {
        test: /\.js$/,
        type: "javascript/auto",
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            babelrc: false,
            configFile: false,
            presets: ["@babel/preset-react"],
          },
        },
      },
    ],
  },
  output: {
    filename: "[name].cjs",
    library: {
      type: "commonjs2",
    },
  },
  externals: [nodeExternals()],
};

How can I convince Webpack to convert the MUI files from ESM to CommonJS. I had always thought this was built-in automatic. Since it can clearly understand the files.

0 Answers
Related