I'm currently working on a project that relies on React Material UI as a dependency. One of the components uses react context to handle styling. I had to upgrade the project from webpack 4 to webpack 5, and was having issues with that context styling being applied.

When stepping through with a debugger, I realized that there were duplicate module imports, with two separate context instances which is resulting in the styles not being applied. Notably, one reference is to the libraries file, the other is to a built DLL. When using webpack 4, everything is referenced inside the DLL, but with webpack 5, some things are in the DLL and others are in webpack-internal source.

Webpack 4: webpack-internal://node_modules/@material-ui/core/esm/Button/index.js

module.exports = (__webpack_require__("dll-reference vendor_c82e1137115378ec60a1"))("./node_modules/@material-ui/core/esm/Button/index.js");

Webpack 5: webpack-internal://node_modules/@material-ui/core/esm/Button/Button.js

var Button = ...

The configuration for this project is quite confusingly large. I'll put below configuration that I think could be related to the issue I am having. Let me know if there is more you would like to see.

webpack.config.js

const config = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.(js|tsx|ts)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }
        ...
        ],
    },
    resolve: {
      modules: ['./src', 'node_modules'],
      extensions: ['.ts', '.tsx', '.js', '.json'],
      fallback: {
        fs: false,
      },
    },
    entry: {
       ...
       vendor: [
           ...
           '@material-ui/core',
       ],
    },
    ...
}

babel.config.js

const config = {
    presets: [
      [
        '@babel/preset-env',
        {
          modules: false,
          useBuiltIns: isDev ? false : 'entry',
        },
      ],
      '@babel/preset-react',
      ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
    ],
    ...
  };

I'm currently working on a project that relies on React Material UI as a dependency. One of the components uses react context to handle styling. I had to upgrade the project from webpack 4 to webpack 5, and was having issues with that context styling being applied.

When stepping through with a debugger, I realized that there were duplicate module imports, with two separate context instances which is resulting in the styles not being applied. Notably, one reference is to the libraries file, the other is to a built DLL. When using webpack 4, everything is referenced inside the DLL, but with webpack 5, some things are in the DLL and others are in webpack-internal source.

Webpack 4: webpack-internal://node_modules/@material-ui/core/esm/Button/index.js

module.exports = (__webpack_require__("dll-reference vendor_c82e1137115378ec60a1"))("./node_modules/@material-ui/core/esm/Button/index.js");

Webpack 5: webpack-internal://node_modules/@material-ui/core/esm/Button/Button.js

var Button = ...

The configuration for this project is quite confusingly large. I'll put below configuration that I think could be related to the issue I am having. Let me know if there is more you would like to see.

webpack.config.js

const config = {
    ...
    module: {
        rules: [
        ...
        {
            test: /\.(js|tsx|ts)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }
        ...
        ],
    },
    resolve: {
      modules: ['./src', 'node_modules'],
      extensions: ['.ts', '.tsx', '.js', '.json'],
      fallback: {
        fs: false,
      },
    },
    entry: {
       ...
       vendor: [
           ...
           '@material-ui/core',
       ],
    },
    ...
}

babel.config.js

const config = {
    presets: [
      [
        '@babel/preset-env',
        {
          modules: false,
          useBuiltIns: isDev ? false : 'entry',
        },
      ],
      '@babel/preset-react',
      ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
    ],
    ...
  };

• reactjs
• webpack-5

1 Answer 1

Seems that from webpack 4 to webpack 5, in order to get the DLLPlugin to work the same, entryOnly needs to be set to false. This seems to have fixed the issue for me.