- 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/exportsyntax). - 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.