Webpack 5升级后执行npm run start报Babel预设导出错误

问题背景 #

将Webpack从4升级到5后，重新安装了若干loader。安装babel-loader后执行npm run start，控制台弹出如下错误：

node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/jessiechen/Desktop/Sampling_frontend/node_modules/babel-preset-stage-0/lib/index.js
    at createDescriptor (/Users/jessiechen/Desktop/Sampling_frontend/node_modules/@babel/core/lib/config/config-descriptors.js:159:11)
    at createDescriptor.next (<anonymous>)
    at step (/Users/jessiechen/Desktop/Sampling_frontend/node_modules/gensync/index.js:261:32)
    at evaluateAsync (/Users/jessiechen/Desktop/Sampling_frontend/node_modules/gensync/index.js:291:5)
    at /Users/jessiechen/Desktop/Sampling_frontend/node_modules/gensync/index.js:44:11
    at Array.forEach (<anonymous>)
    at Function.async (/Users/jessiechen/Desktop/Sampling_frontend/node_modules/gensync/index.js:43:15)
    at Function.all (/Users/jessiechen/Desktop/Sampling_frontend/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at createDescriptors (/Users/jessiechen/Desktop/Sampling_frontend/node_modules/@babel/core/lib/config/config-descriptors.js:101:41)

我的配置文件 #

package.json #

{  
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "@babel/runtime": "^7.22.6",
    "@fortawesome/fontawesome-free": "^6.4.0",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "regenerator-runtime": "^0.13.11",
    "style-loader": "^3.3.3",
    "vee-validate": "^2.2.8",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@babel/core": "^7.22.9",
    "@babel/plugin-transform-runtime": "^7.22.7",
    "@babel/preset-env": "^7.22.9",
    "babel-core": "^6.26.0",
    "babel-loader": "^9.1.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-vue": "^2.0.2",
    "css-loader": "^3.3.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.3",
    "install": "^0.13.0",
    "npm": "^9.8.0",
    "path": "^0.12.7",
    "vue-loader": "^14.2.3",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^5.88.1"
  }
}

初始webpack.config.js #

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.js', '.jsx','.vue', '.css'],
        modules: [
            'node_modules'
        ]  
    },
    module: {
        rules: [
            {
                test: /\.vue?$/,
                exclude: /(node_modules)/,
                use: 'vue-loader'
            },
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/i,
                use: [{loader:'style-loader'}, {loader: 'css-loader'}],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        esModule: false
                    }
                  },
                ],
            },
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })],
    devServer: {
        historyApiFallback: true
    },
    externals: {
        // global app config object
        config: JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    },
}

尝试过的修改（无效） #

调整了webpack配置，但错误依旧：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.js', '.jsx','.vue', '.css'],
        modules: [
            'node_modules'
        ]  
    },
    module: {
        rules: [
            {
                test: /\.vue?$/,
                exclude: /(node_modules)/,
                use: 'vue-loader'
            },
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options:{
                        presets: [
                            ['@babel/preset-env', { targets: "defaults" }]
                        ],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            },
            {
                test: /\.css$/i,
                use: [{loader:'style-loader'}, {loader: 'css-loader'}],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        esModule: false
                    }
                  },
                ],
            },
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })],
    devServer: {
        historyApiFallback: true
    },
    externals: {
        // global app config object
        config: JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    },
}

解决方案 #

问题根源 #

报错指向babel-preset-stage-0，这是Babel 6的预设，而当前项目使用的是Babel 7（@babel/core 7.x版本）。Babel 7不再支持旧的babel-preset-*包，且这些旧预设导出的是对象，不符合Babel 7要求的函数格式，导致冲突。同时package.json里同时存在Babel 6和Babel 7的包，进一步加剧了版本冲突。

修复步骤 #

1. 卸载Babel 6相关旧包
   执行命令移除冲突依赖：

npm uninstall babel-core babel-preset-env babel-preset-stage-0 babel-preset-vue

2. 安装适配Babel 7的Vue预设
   项目使用Vue 2，安装对应版本的Babel预设：

npm install @babel/preset-vue@2 --save-dev

3. 配置Babel
   在项目根目录创建.babelrc文件，内容如下：

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults" }],
    "@babel/preset-vue"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

若不想使用.babelrc，也可直接在webpack.config.js的babel-loader options中配置上述预设和插件。

4. 简化webpack配置
   确保webpack.config.js中的js规则正确，可简化为：

{
    test: /\.js?$/,
    exclude: /(node_modules)/,
    use: 'babel-loader'
}

5. 重新安装依赖并启动
   删除现有依赖和锁文件后重新安装：

rm -rf node_modules package-lock.json
npm install
npm run start

上述步骤可解决版本冲突导致的预设导出格式错误问题。

内容的提问来源于stack exchange，提问作者Freedom Trail