运行 webpack 抛出 'Callback was already called' 错误

Question

我刚开始学习 webpack 来管理我项目中的依赖项。我正在尝试使用它为我的打字稿和 javascript 文件构建捆绑包。对于打字稿文件，我使用ts-loader 插件来处理它。对于 CSS，我使用 mini-css-extract 和 optimize-css-assets 插件。当我尝试运行 webpack 时，我收到以下错误，我无法找出可能导致此错误的原因。

user@system spl % npm run build

> spl@1.0.0 build /Users/user/Downloads/spl
> webpack --config webpack.config.js

/Users/user/Downloads/spl/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/user/Downloads/spl/node_modules/neo-async/async.js:16:11)
    at /Users/user/Downloads/spl/node_modules/neo-async/async.js:2818:7
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! spl@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the spl@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-05-14T14_23_32_985Z-debug.log

以下是我用来构建 dist 文件的 webpack.config 文件。

const path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    mode: 'production',
    entry: "./static/js/index.js",
    output: {
        filename: "bundle.[contentHash].js",  // File name with hash, based on content
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin(),
            new TerserPlugin(),
            new HtmlWebpackPlugin({
                template: "./static/index.html",
                minify: {
                    removeAttributeQuotes: true,
                    collapseWhitespace: true,
                    removeComments: true
                }
            })
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].[contentHash].css"
        }),
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [ "html-loader" ]
            },
            {
                test: /\.[tj]s$/,
                use: "ts-loader",
                exclude: /(node_modules|tests)/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ],
    },
    resolve: {
        alias: {
            src: path.resolve(__dirname, 'src'),
            static: path.resolve(__dirname, 'static'),
        },
        extensions: [ '.ts', '.js' ]
    }
}

Answer 1

对我来说，问题是在升级 css-loader 之后出现的。将其降级回原始版本对我有用

diff --git a/package.json b/package.json
index 7151c509..b0eba48b 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "webpack-merge": "^4.1.3"
   },
   "devDependencies": {
-    "css-loader": "^6.5.1",
+    "css-loader": "^1.0.0",

Answer 2

我遇到了这个问题，它与最近有人对 mini-css-extract-plugin 进行的降级有关。我们正在使用 pnpm，所以这个答案是特定的。我不得不删除模块中的 pnpm-lock.yaml 文件，我试图用完 VSCode 中的 spring boot 仪表板。如果缺少此文件，则会生成此文件，但无论如何对我们来说，它已提交到 repo。如果这对您不起作用，您还可以考虑删除 npm-cache 和 .pnpm-store 目录。这些文件的位置在用户主目录的.npmrc 文件中配置。

Answer 3

我遇到了这个问题，并且能够确定原因是 Typescript 中的循环依赖，而不是此处其他答案所建议的过时依赖。当我将代码从 import MyClass from "folder/file" 重构为 import { MyClass } from "folder" 时出现此错误。

我是在阅读了这篇关于differences in semantics between export default 和其他类型导出的帖子后才考虑这种可能性的。

Answer 4

tl;dr: 将 webpack 升级到更新版本为我解决了这个问题。

我进入 node_modules/neo-async/async.js 并修改了 onlyOnce 以便它提供更具描述性的堆栈跟踪，如下所示：

  /**
   * @private
   * @param {Function} func
   */
  function onlyOnce(func) {
    const defined = new Error('onlyOnce first used here')
    return function(err, res) {
      var fn = func;
      func = () => {
        console.error(defined);
        throwError();
      };
      fn(err, res);
    };
  }

堆栈跟踪指向 webpack 的内部代码，当我升级到最新版本时，它解决了这个问题。

Answer 5

我遇到了同样的问题，我意识到我正在从 index.html 文件中导入 CSS 文件：

<link rel="stylesheet" href="./css/main.css">

虽然 CSS 文件应该是使用 import 从入口文件 (index.js) 导入的：

import '../css/main.css'; 

所以我删除了<link rel="stylesheet" href="./css/main.css"> 行并解决了问题。 您可以查看您的 HTML 文件并检查是否有任何从您的 HTML 文件导入的资产。我希望它有所帮助。