Webpack构建或运行时错误，“require（）不是样式加载器上的函数”

Question

在做webpack构建或运行webpack的网站时，我得到关于require不是函数的随机错误。这发生在深度嵌套的需求分辨率的调用堆栈上的不同点上的不同模块上。

我广泛搜索了这个错误，发现它可能是由许多不同的症状引起的。我已经尝试了所有我能找到的，但没有一个能为我工作。

我发布了一个解决方案来展示哪些对我有用，以防其他人可能遇到同样的问题。

以下是webpack集的相关部分：

/**
 * @returns {import('webpack').RuleSetRule}
 */
module.exports = () => ({
  test: /\.js$/,
  exclude: /node_modules\/(?!(query-string|strict-uri-encode|modernizr|split-on-first)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        [ '@babel/preset-env', {
          // - If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array
          //   nor source. Note, @babel/polyfill still needs to be installed.
          // - If useBuiltIns: 'entry' is specified in .babelrc then include @babel/polyfill at the top of the entry point to your application
          //   via require or import
          // - If useBuiltIns key is not specified or it is explicitly set with useBuiltIns: false in your .babelrc, add @babel/polyfill
          //   directly to the entry array in your webpack.config.js.
          useBuiltIns: 'usage',
          corejs: '2'
        } ]
      ],
      plugins: [
        ['@babel/plugin-transform-modules-commonjs', {
          strictMode: false
        }]
      ]
    }
  }
})

上面的babel加载程序出现以下错误：

    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    TypeError: __webpack_require__(...) is not a function
        at Object.I8a+ (C:\TRAVLR\Repos\Travlr\Webs\WebApp\node_modules\css-loader\dist\cjs.js!C:\TRAVLR\Repos\Travlr\Webs\WebApp\node_modules\postcss-loader\src\index.js??ref--6-2!C:\TRAVLR\Repos\Travlr\Webs\WebApp\node_modules\sass-loader\lib\loader.js!C:\TRAVLR\Repos\Travlr\Library\UiKit\src\scss\app.scss:580:38)

要么

    at eval (webpack:///./node_modules/core-js/modules/_classof.js?:4)
    at Object../node_modules/core-js/modules/_classof.js (pkg.core-js.js:889)
    at __webpack_require__ (runtime.client.js:782)
    at fn (runtime.client.js:150)
    at eval (webpack:///./node_modules/core-js/modules/es6.object.to-string.js?:3)
    at Object../node_modules/core-js/modules/es6.object.to-string.js (pkg.core-js.js:2167)
    at __webpack_require__ (runtime.client.js:782)
    at fn (runtime.client.js:150)
    at eval (webpack:///./node_modules/core-js/modules/es6.regexp.to-string.js?:11)
    at Object../node_modules/core-js/modules/es6.regexp.to-string.js (pkg.core-js.js:2306)```

Answer 1

对我有用的是从上面的文件更改以下行：useBuiltIns: 'usage'到useBuiltIns: 'entry'

请注意，这可能对您不起作用。同样的错误似乎有很多不同的原因。