如何在 laravel 10 中使用 Laravel-mix

Question

似乎无法配置

laravel-mix

包。

嘿，我想在 laravel 10 中使用

laravel-mix

包，但我似乎无法正确配置它，因为当我运行 npx mix 时，我不断收到错误消息，提示我需要将 webpack.mix.js 更改为 webpack .mix.cjs 但当我这样做时，我仍然无法使用 npx mix，有人可以告诉我如何配置

laravel-mix

包，它真的会有帮助。

npx 混合错误：

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');

如果有人可以帮助我，我真的很感激

Answer 1

我现在已经可以使用了，我所要做的就是从 package.json 中删除

"type": "module",

Answer 2

删除“类型”：“模块”正在工作，为什么我不知道