Laravel+Vue项目集成Firebase遇模块解析错误求助

我正在开发一个基于Laravel和Vue的项目，原本运行正常，但安装并使用Firebase后出现模块解析错误，具体报错如下：

ERROR in ./node_modules/idb/build/index.js
Module parse failed: Unexpected token (83:4)
You may need an appropriate loader to handle this file type.
| }
| replaceTraps((oldTraps) => ({
|     ...oldTraps,
|     get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
|     has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),
 @ ./node_modules/@firebase/app/dist/esm/index.esm2017.js 5:0-29
 @ ./node_modules/@firebase/app-compat/dist/esm/index.esm2017.js
 @ ./node_modules/firebase/compat/app/dist/esm/index.esm.js
 @ ./resources/assets/js/kyc_section.js
 @ multi ./resources/assets/js/kyc_section.js

已尝试以下方案但未解决：

• 将Node.js版本从16降级至14.19.0
• 删除node_modules及package-lock.json后重新安装依赖

当前环境信息：

• Node.js 14.19.0
• npm 6.14.16
• package.json相关依赖片段：

"dependencies": {
    "@vue/composition-api": "^1.7.1",
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^1.0.0",
    "clipboard-polyfill": "^3.0.1",
    "firebase": "^9.6.11",
}

解决方案 #

1. 配置Webpack转译idb模块 #

Laravel默认的Webpack配置未对node_modules中的idb包进行转译，导致其使用的ES语法无法被解析。修改webpack.mix.js，添加转译规则：

// 方式1：直接指定转译idb文件
mix.js('resources/assets/js/kyc_section.js', 'public/js')
   .vue()
   .babel(['node_modules/idb/build/index.js'], 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

// 方式2：配置Webpack规则，排除node_modules但例外idb
mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules(?!\/idb)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
});

若未安装babel-loader和@babel/preset-env，执行以下命令安装：

npm install babel-loader @babel/preset-env --save-dev

2. 锁定idb兼容版本 #

当前Firebase@9.6.11依赖的idb版本可能使用了当前Webpack不支持的ES语法，通过resolutions锁定兼容版本：
在package.json中添加：

"resolutions": {
    "idb": "^6.1.5"
}

然后执行：

# 安装npm-force-resolutions（npm 6需要，yarn无需）
npm install npm-force-resolutions --save-dev
# 在package.json的scripts中添加preinstall脚本
"scripts": {
    "preinstall": "npx npm-force-resolutions"
}
# 删除依赖文件后重新安装
rm -rf node_modules package-lock.json
npm install

3. 升级Laravel Mix版本 #

若当前Laravel Mix版本过低，对新ES语法支持不足，尝试升级到最新兼容版本：

npm install laravel-mix@latest --save-dev

升级后需检查webpack.mix.js配置，适配新版本API（如Vue相关配置可能需要调整）。

内容的提问来源于stack exchange，提问作者Jarliev Pérez