how to use Laravel-mix in laravel 10

Question

cant seem to configur the laravel-mix package.

Hey,I want to use the laravel-mix package in laravel 10, but i cant seem to configur it properly because when i run npx mix i keep getting a error that says that i need to change my webpack.mix.js to webpack.mix.cjs but when i do that i still cant use npx mix, can somewone tell me how to configur the laravel-mix package it would realy help.

npx mix error:

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

if someone can help me with this i realy appreciate it

Answer 1

I’ve got it working now, all I had to do is remove "type": "module", from the package.json