使用 webpack 构建时“TypeError：弱集中使用的值无效”

Question

我正在尝试将 scss 添加到项目中。我想从 scss 文件构建 css 文件，但由于我添加了 MiniCssExtractPlugin，我收到一条错误消息“TypeError: Invalid value used in weak set”。 这是我的 webpack.config.js：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
  // TODO: Add common Configuration
  module: {},
};

const js = Object.assign({}, config, {
  name: 'js',
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, '../some/path/here'),
    filename: 'main.js',
  },
});

const scss = Object.assign({}, config, {
  name: 'scss',
  entry: path.resolve(__dirname, './scss/styles.scss'),
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(s*)css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ],
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, '../some/path/here'),
    filename: 'styles.css',
  },
});

module.exports = [js, scss];

我搜索了很多，但没有找到任何答案。 我使用 Node.js v 8.4.0。

控制台输出（还有更多，但我认为这已经足够了）：

TypeError: Invalid value used in weak set
    at WeakSet.add (native)
    at MiniCssExtractPlugin.apply (/path/path/path/path/path/path/path/node_modules/mini-css-extract-plugin/dist/index.js:362:18)

PS：我是 webpack 的新手，如果你能帮助我改进这段代码，我会很高兴。主要思路是保持js编译不变，加入scss编译。我还想将包含的 scss 文件编译为单独的文件。

PSS：如果您需要更多信息，我会提供一些，因为我知道还有什么有用的。

Answer 1

也许最新的 mini-css-extract-plugin 版本有错误。我试图使用这个包的另一个版本。它的工作！！！

1. 删除您的上一个软件包版本：

    npm uninstall mini-css-extract-plugin
   

2. 下载这个版本 0.9.0（它对我有用）：

    npm i --save-dev mini-css-extract-plugin@0.9.0
   

*可选（--save-dev）

查看所有版本： mini-css-extract-plugin/all-versions

Answer 2

这很可能是由于错误或 webpack 版本不兼容，例如在 webpack 4 上升级到当前主要的 v2.0.0 版本。

有关更多信息，请check the changelog 进行重大更改和修复。

Answer 3

我认为您还需要降级其他一些插件。当我遇到同样的错误时，我正在关注一个教程。这对我有用：

{
  "name": "recipe-blocks",
  "scripts": {
    "dev": "cross-env BABEL_ENV=default webpack --watch",
    "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack -p"
  },
  "main": "index.js",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-transform-react-jsx": "^7.2.0",
    "@wordpress/babel-preset-default": "^3.0.1",
    "babel-loader": "^8.0.4",
    "classnames": "^2.2.6",
    "cross-env": "^5.1.5",
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "raw-loader": "^2.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2"
  },
  "version": "1.0.0",
  "license": "MIT"
}

然后运行：
npm install
npm run dev