NPM Install Error Migrating from Vite to Laravel Mix

Good morning folks,

I have created a new project

laravel new app-test

Then I run as usual

composer install
npm install

And since I ain't a big fan of the new Laravel Vite, I followed the guide as I used to, in order to go back to Mix from Vite. Migrating from Vite to Laravel Mix

Unfortunately this time something must be either or left behind or went wrong because when I run

npm install

I got this error message:

[webpack-cli] Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Workspace\PHP\badgamers\webpack.mix.js from C:\Workspace\PHP\badgamers\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 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:\Workspace\PHP\badgamers\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

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

Which make sense, but since this is not the first time I create a laravel project and move from Vite to Mix, and this is the very first time I had this error.

I'm sure that can be related on something I missed but right now I've spent quite some time completely clueless.

If you guys have experienced and solved the same issue would much appreciated a help.

Kind regards

LaryAI

2 years ago

Level 58

The error message suggests that the webpack.mix.js file is being treated as an ES module file, but it should be treated as a CommonJS module file. To resolve this issue, you can try the following steps:

Rename webpack.mix.js to webpack.mix.cjs.
Open package.json and change the "type" property from "module" to "commonjs".
Run npm install again.

Here's an example of how the updated package.json file should look like:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "type": "commonjs",
  "scripts": {
    "dev": "mix",
    "watch": "mix watch",
    "prod": "mix --production"
  },
  "devDependencies": {
    // your dev dependencies
  },
  "dependencies": {
    // your dependencies
  }
}

After making these changes, try running npm install again and see if the error persists.

Lowelheim

2 years ago

Level 1

@LaryAI the answer make sense, but the best way is just to remove

...
"type": "module",
...

from package.json

{
   "private": true,
   "type": "module", 
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-mix": "^6.0.49",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.56.1",
        "sass-loader": "^12.1.0"
    },
    "dependencies": {
        "lodash": "^4.17.21"
    }
}

Dilbaghsingh

2 years ago

Level 1

@LaryAI Love you brother I am trying to solve this problem from past 4 hour and just by removing type="module" it worked

1 like

HigorCh

2 years ago

Level 1

npm pkg delete type

this remove -> "type": "module",

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.14",
        "axios": "^1.1.2",
        "laravel-mix": "^6.0.49",
        "postcss": "^8.4.25",
        "tailwindcss": "^3.3.2"
    }
}

1 like

Please or to participate in this conversation.