Laravel 10中Laravel-mix配置报错求助：npx mix执行失败

问题描述 #

在Laravel 10中使用laravel-mix包，执行npx mix时持续报错，提示需将webpack.mix.js改为webpack.mix.cjs，但修改后仍无法正常运行。

报错信息 #

npx mix    
[webpack-cli] Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\webpack.mix.js from C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\node_modules\laravel-mix\setup\webpack.config.js not supported.
webpack.mix.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename webpack.mix.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at module.exports (C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\node_modules\laravel-mix\setup\webpack.config.js:11:5)
    at loadConfigByPath (C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\node_modules\webpack-cli\lib\webpack-cli.js:1439:37)
    at async Promise.all (index 0)
    at async WebpackCLI.loadConfig (C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\node_modules\webpack-cli\lib\webpack-cli.js:1454:35)
    at async WebpackCLI.createCompiler (C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\node_modules\webpack-cli\lib\webpack-cli.js:1785:22)
    at async WebpackCLI.runWebpack (C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\node_modules\webpack-cli\lib\webpack-cli.js:1890:20)
    at async Command.<anonymous> (C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\node_modules\webpack-cli\lib\webpack-cli.js:912:21)
    at async Promise.all (index 1)
    at async Command.<anonymous> (C:\Users\casro\Documents\Programeren\Laravel-projects\CasRovers-CMS\node_modules\webpack-cli\lib\webpack-cli.js:1372:13) {
  code: 'ERR_REQUIRE_ESM'
}

当前配置文件 #

package.json #

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "mix": "npx mix"
    },
    "devDependencies": {
        "@babel/core": "^7.23.3",
        "@babel/preset-env": "^7.23.3",
        "axios": "^1.1.2",
        "laravel-mix": "^6.0.49",
        "laravel-vite-plugin": "^0.8.1",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.69.5",
        "sass-loader": "^12.1.0",
        "vite": "^4.0.0",
        "webpack": "^5.89.0"
    },
    "dependencies": {
        "@popperjs/core": "^2.11.8",
        "bootstrap": "^5.3.2",
        "jquery": "^3.7.1"
    }
}

webpack.mix.js #

let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

解决步骤 #

方案一：调整项目模块类型适配laravel-mix #

laravel-mix v6基于CommonJS规范，当前项目通过"type": "module"将所有.js文件标记为ES模块，导致引入冲突。修改如下：

• 打开package.json，将"type": "module"改为"type": "commonjs"
• 保留webpack.mix.js文件名不变，此时所有.js文件都会被识别为CommonJS模块，与laravel-mix兼容

方案二：保留ES模块配置，单独适配laravel-mix #

如果不想修改项目整体模块类型，可按以下操作：

1. 将webpack.mix.js重命名为webpack.mix.cjs（.cjs后缀表示该文件为CommonJS模块）
2. 修改package.json中的mix脚本，指定配置文件路径：

   "scripts": {
       "dev": "vite",
       "build": "vite build",
       "mix": "npx mix --config webpack.mix.cjs"
   }
   

3. 确保webpack.mix.cjs内仍使用require()引入laravel-mix，无需改为import语法

额外注意事项 #

• 若不需要同时使用Vite和laravel-mix，可移除laravel-vite-plugin、vite等Vite相关依赖，减少配置冲突
• 修改配置后执行npm install确保依赖安装完整，再运行npm run mix测试

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