Laravel/Vue Mix项目引入jsPDF时webpack报process/browser模块缺失错误求助

报错原因 #

该报错由Webpack 5的ESM规范校验触发：jsPDF依赖的canvg包内部导入process/browser时未携带.js后缀，Webpack 5对严格ES模块的导入要求必须完整指定文件后缀，因此识别失败。

修复步骤 #

第一步：安装缺失的process依赖 #

项目缺少浏览器端兼容的process polyfill，先执行安装命令：

npm install process --save-dev

第二步：修改Laravel Mix配置 #

打开项目根目录下的webpack.mix.js文件，按如下规则修改：

1. 顶部引入path模块
2. 调用mix.webpackConfig添加自定义解析规则，原有其他mix配置（比如vue编译、css处理等）保持不变

完整配置参考：

const mix = require('laravel-mix');
const path = require('path');

// 你原有的业务配置保持不变，示例如下
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

// 新增webpack配置解决process/browser解析问题
mix.webpackConfig({
    resolve: {
        // 直接将process/browser的导入指向带完整后缀的文件
        alias: {
            'process/browser': path.resolve(__dirname, 'node_modules/process/browser.js')
        },
        // 配置process polyfill的兜底规则
        fallback: {
            process: require.resolve('process/browser')
        }
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                include: /node_modules\/canvg/,
                resolve: {
                    // 针对canvg包关闭严格的后缀全匹配校验
                    fullySpecified: false
                }
            }
        ]
    }
});

第三步：清除缓存重新编译 #

执行命令清除旧编译缓存后重新启动服务即可：

rm -rf node_modules/.cache public/hot
npm run dev
# 开发环境可直接用 npm run watch

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