Webpack css-loader UnhandledPromiseRejectionWarning: Error: The module created for a LoaderDependency must have an original source答案

【问题标题】：Webpack css-loader UnhandledPromiseRejectionWarning: Error: The module created for a LoaderDependency must have an original sourceWebpack css-loader UnhandledPromiseRejectionWarning: Error: The module created for a LoaderDependency must have an original source
【发布时间】：2021-04-23 00:30:33
【问题描述】：

下面列出的所有插件都是最新版本。少加载器：7.2.1 CSS加载器：5.0.1 文件加载器：6.2.0 postcss加载器：4.1.0 提取加载器：5.1.0 自动前缀：10.2.1

我的 postcss 配置：

module.exports = {
  plugins: [require('autoprefixer')],
};

我的 webpack (5) 配置中有以下规则：

        test: /\.less$/,
        /* include: [
          settings.PATHS.CSS_SOURCE,
          ...settings.PATHS.CSS_FEATURES_SOURCE,
        ], */
        use: [
          {
            loader: 'file-loader',
            options: cssOptions,
          },
          {
            loader: 'extract-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: process.env.npm_lifecycle_event.indexOf('watch') > -1,
              url: false,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                config: path.resolve(__dirname, '../postcss.config.js'),
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                paths: [path.resolve(__dirname, 'node_modules')],
              },
            },
          },
        ],
      },

我正在使用 importLoaders: 2，因为我在 css-loader 的文档中看到，如果以前的加载器也对 @import 做了一些事情，这将是必要的吗？现在我收到以下错误：

 UnhandledPromiseRejectionWarning: Error: The module created for a LoaderDependency must have an original source
    at compilation.handleModuleCreation.err (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\dependencies\LoaderPlugin.js:79:16)
    at buildModule.err (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\Compilation.js:1556:8)
    at hooks.result.callAsync.hookError (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\util\AsyncQueue.js:281:5)
    at Hook.eval [as callAsync] (eval at create (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._handleResult (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\util\AsyncQueue.js:254:21)
    at _processor (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\util\AsyncQueue.js:237:11)
    at _modulesCache.store.err (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\Compilation.js:1263:15)
    at C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\HookWebpackError.js:69:3
    at Hook.eval [as callAsync] (eval at create (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\webpack\lib\Cache.js:107:20)

当我删除 importLoaders 属性时，我收到以下错误：

TypeError: Cannot read property 'sources' of undefined
    at cssWithMappingToString (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\css-loader\dist\runtime\cssWithMappingToString.js:25:33)
    at C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\css-loader\dist\runtime\api.js:14:21
    at Array.map (<anonymous>)
    at Array.toString (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\css-loader\dist\runtime\api.js:13:17)
    at extractExports (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\extract-loader\lib\extractLoader.js:182:269)
    at C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\extract-loader\lib\extractLoader.js:171:45
    at Generator.next (<anonymous>)
    at step (C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\babel-runtime\helpers\asyncToGenerator.js:17:30)
    at C:\Projects\Carglass\carglass930-source\src\Projects\Platform\code\node_modules\babel-runtime\helpers\asyncToGenerator.js:28:13

我做错了什么？这在我将 css-loader 升级到 v5.0.1 后开始发生

【问题讨论】：

标签： webpack css-loader postcss-loader less-loader

【解决方案1】：

已在 css-loader@5.2.7 - https://github.com/webpack-contrib/css-loader/releases/tag/v5.2.7 中修复。

【讨论】：

【解决方案2】：

显然问题在于 extract-loader 与 css-loader v5 不兼容。我将 css-loader 降级到 v4，这修复了它。

【讨论】：