使用 Babel 运行 Webpack5 时出错：找不到模块“fs/promises”

Question

尝试让 Babel 和 Webpack 5 很好地协同工作，但我收到以下错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'fs/promises'

我看到的大多数链接都引用旧版本的 Node（最常提到 v12），但运行时node -v我可以看到安装了以下版本：

v18.12.1

Package.json 看起来像这样

{
  "name": "foobar",
  "version": "1.0.0",
  "description": "Trying out webpack 5 and babel.",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "terser-webpack-plugin": "5.3.0",
    "typescript": "^4.9.3",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "axios": "^1.1.3"
  },
  "-vs-binding": {
    "ProjectOpened": [
      "install"
    ]
  }
}

Webpack 配置如下所示：

const entry = {
    example: './_build/js/example.js'
};
const path = require('path');
module.exports = {
    entry: entry,
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
    },
    devServer: {
        static: path.resolve(__dirname, './dist'),
    },
};

错误的完整堆栈跟踪是：

    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (D:\path\to\node_modules\babel-loader\lib\cache.js:24:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)

实际的打字稿文件内容是任意的 -

export default class FooBar {
    Load(): void {
        let foo = 'bar';
        let stack = 'overflow';
    }
}

如果它是空的，我会得到同样的错误。

Answer 1

我遇到了同样的问题，安装 babel-loader 版本 8.0.4 解决了我的问题。