reactjs - Webpack 5 DLL module resolution react context issues - Stack Overflow

admin管理员组

文章数量:1022949

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

Share Improve this question Follow edited Nov 18, 2024 at 20:56 Jonathan Woolf asked Nov 18, 2024 at 20:51 Jonathan WoolfJonathan Woolf 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

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

Share Improve this question Follow edited Nov 18, 2024 at 20:56 Jonathan Woolf asked Nov 18, 2024 at 20:51 Jonathan WoolfJonathan Woolf 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： reactjsWebpack 5 DLL module resolution react context issuesStack Overflow