Laravel-mix: [6.*] webpack-cli Unknown argument and SyntaxError

[calvin-cg]

• Laravel Mix Version: 6.0.0-beta-4
• Node Version: 10.16.3
• NPM Version: 6.9.0
• OS: macOS Catalina v10.15.7

Description:

After upgrading to Mix 6 beta 4, npm run dev produces an error like the following.
[webpack-cli] Unknown argument: --hide-modules

If I try to remove the flag, I ended up with another error.
[webpack-cli] SyntaxError: Unexpected token =

This is my NPM Scripts. It's the default from the mix documentation website (installation page).
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

Steps To Reproduce:

From Mix version 5.0.5, upgrade to mix 6.0.0-beta.4 using:
npm install [email protected] -D
Then npm run dev

Edit

It seems when creating a new Laravel app with laravel new command, and then upgrade to mix 6 using the same command npm install [email protected] -D is producing the same error when trying to npm run dev.

[MrJuliuss]

--hide-modules does not exist anymore in webpack-cli 4, you must remove it from command line

[calvin-cg]

--hide-modules does not exist anymore in webpack-cli 4, you must remove it from command line

Thanks for the information. What about the [webpack-cli] SyntaxError: Unexpected token = error?
Seems it caused by this flag --config=node_modules/laravel-mix/setup/webpack.config.js.
Is it something that changed too in webpack-cli 4?

[rrrrando]

If you use the mix v6-beta then you should use npx to run mix:

npx mix

[calvin-cg]

If you use the mix v6-beta then you should use npx to run mix:

npx mix

I tried npx mix, but it still produces the same error.
[webpack-cli] SyntaxError: Unexpected token =

[rrrrando]

Can you paste the contents your package.json file?

[thecrypticace]

Here's an example package.json scripts block to get you started:

{
  "scripts": {
    "dev": "mix",
    "prod": "mix -p",
    "watch": "mix watch"
  }
}

[rrrrando]

I think you shouldn't change the scripts in package.json. Should be like this:

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js --disable-host-check",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

and then just run npx mix or npx mix -p

[JeffreyWay]

@calvin-cg Just to be safe, nuke your node_modules directory and try again from scratch. Also, make sure that you don't have any existing webpack plugins or loaders that might not have been upgraded to webpack 5.

Also, the Laravel-mix.com website is not maintained by us. The most up-to-date documentation is here on GitHub.

[gdgroot]

Hi @calvin-cg,

I had the same problem as you.
I had to update my node version to the latest stable from v10.19.0 to v12.18.4

Hope that fixes it.

[calvin-cg]

I think you shouldn't change the scripts in package.json. Should be like this:

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js --disable-host-check",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

and then just run npx mix or npx mix -p

My scripts in package.json are exactly like this, but still, get the error from running npx mix.

[calvin-cg]

@calvin-cg Just to be safe, nuke your node_modules directory and try again from scratch. Also, make sure that you don't have any existing webpack plugins or loaders that might not have been upgraded to webpack 5.

Also, the Laravel-mix.com website is not maintained by us. The most up-to-date documentation is here on GitHub.

I already tried with a fresh laravel app, straight to upgrade the laravel-mix, and still get the error.

[emilsrits]

This worked for me upgrading from version 5*.

• delete node_modules and package-lock.json
• npm install
• install latest laravel-mix npm i --save-dev laravel-mix@latest

change scripts to:

"scripts": {
    "dev": "npm run development",
    "development": "npx mix",
    "watch": "npx mix watch",
    "prod": "npm run production",
    "production": "npx mix -p"
},

[calvin-cg]

Thanks, @gdgroot and @emilsrits , it really was the node version.
I upgrade my node to v12.18.4, then change the scripts to npx mix, and now it worked.

I'm gonna close this.
Thank you.

[ahmadmamdouh-10]

Urgen problem please;
i have a problem while running npm run dev to upgrade all changes in formatting and css styles for my web page, im using laravel 6 and this is the followin error:
npm run dev

[email protected] dev /home/vgv/laracast/freeCodeGram
npm run development

[email protected] development /home/vgv/laracast/freeCodeGram
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

[webpack-cli] Unknown argument: --hide-modules
? Which flags do you want to use? …
✔ --entry: The entry point(s) of your application e.g. ./src/main.js
✔ --config: Provide path to a webpack configuration file e.g. ./webpack.config.js
✔ --color: Enable/Disable colors on console
✔ --merge: Merge two or more configurations using webpack-merge e.g. -c ./webpack.config.js -c ./webpack.test.config.js --merge
✔ --progress: Print compilation progress during build
✔ --help: Outputs list of supported flags
✔ --output-path: Output location of the file generated by webpack e.g. ./dist/
✔ --target: Sets the build target e.g. node
✔ --watch: Watch for files changes
✔ --hot: Enables Hot Module Replacement
✔ --devtool: Determine source maps to use
✔ --prefetch: Prefetch this request
✔ --json: Prints result as JSON or store it in a file
✔ --mode: Defines the mode to pass to webpack
✔ --version: Get current version
✔ --stats: It instructs webpack on how to treat the stats e.g. verbose
✔ --env: Environment passed to the configuration when it is a function
✔ --name: Name of the configuration. Used when loading multiple configurations.

------ i choosed all of them and nothing run it when i choose any of them then press ENTER, i found and errors like this :
✔ Which flags do you want to use? · No items were selected
[webpack-cli]
Executing CLI

[webpack-cli] Compilation finished
asset main.js 644 bytes [compared for emit] (name: main)

ERROR in main
Module not found: Error: Can't resolve './src' in '/home/vgv/laracast/freeCodeGram'

webpack 5.3.2 compiled with 1 error in 62 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vgv/.npm/_logs/2020-11-02T13_23_14_341Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: npm run development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vgv/.npm/_logs/2020-11-02T13_23_14_424Z-debug.log

THIS is my npm version (6.14.8) and node (v11.11.0),

THIS my packag.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js --disable-host-check",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.0.0",
"cross-env": "^7.0.2",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.7",
"lodash": "^4.17.20",
"popper.js": "^1.16.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.28.0",
"sass-loader": "^8.0.2",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.3.2",
"webpack-cli": "^4.1.0"
},
"name": "freeCodeGram",
"dependencies": {
"babel-loader": "^8.1.0",
"bulma": "^0.9.1",
"bulma-extensions": "^6.2.7",
"install": "^0.13.0",
"loader": "^2.1.1",
"or": "^0.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"resolve": "^1.18.1",
"url": "^0.11.0",
"vue-loader": "^15.9.4",
"webpack-dev-server": "^3.11.0",
"webpack-plugin": "^1.0.5"
},
"description": "

",
"version": "1.0.0",
"main": "webpack.mix.js",
"directories": {
"test": "tests"
},
"keywords": [],
"author": "",
"license": "ISC"
}

COULD ANYONE HELP ME PLEASE ??

[thecrypticace]

@ahmadmamdouh-10 Laravel Mix v5 does not work with webpack 5. Please use webpack 4 or upgrade to the latest Laravel Mix v6 beta by following the upgrade guide: https://github.com/JeffreyWay/laravel-mix/blob/340925ccff797361aee069bf512f5c2f6166240b/UPGRADE.md

[ahmadmamdouh-10]

"laravel-mix": "^6.0.0-beta.11",
"webpack": "^5.3.2",
and still the same error, i don't know what's wrong!

On Mon, 2 Nov 2020 at 10:41, Jordan Pittman [e-mail]
wrote:

@ahmadmamdouh-10 https://github.com/ahmadmamdouh-10 Laravel Mix v5 does
not work with webpack 5. Please use webpack 4 or upgrade to the latest
Laravel Mix v6 beta by following the upgrade guide:
https://github.com/JeffreyWay/laravel-mix/blob/340925ccff797361aee069bf512f5c2f6166240b/UPGRADE.md

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JeffreyWay/laravel-mix/issues/2521#issuecomment-720549692,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ARSRXPQCR3S3VPPVXB5TX3DSN3HI7ANCNFSM4SF2QPKQ
.

[calvin-cg]

@ahmadmamdouh-10
After upgrading to mix 6, make sure to change your NPM scripts.

"scripts": { "dev": "npm run development", "development": "npx mix", "watch": "npx mix watch", "prod": "npm run production", "production": "npx mix -p" },

Don't forget to use the latest node version.

[ahmadmamdouh-10]

i changed the scripts as you mentioned and look there is a new error here:
[image: image.png]
///
npm run dev

[email protected] dev
npm run development

[email protected] development
npx mix

[webpack-cli] /home/vgv/laracast/freeCodeGram/webpack.mix.js:15
.sass('resources/sass/app.scss', 'public/css');
^

SyntaxError: Unexpected token '.'
at new Script (node:vm:100:7)
at NativeCompileCache._moduleCompile (/home/vgv/laracast/freeCodeGram/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
at Module._compile (/home/vgv/laracast/freeCodeGram/node_modules/v8-compile-cache/v8-compile-cache.js:184:36)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (/home/vgv/laracast/freeCodeGram/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/home/vgv/laracast/freeCodeGram/node_modules/laravel-mix/setup/webpack.config.js:3:1)
at Module._compile (/home/vgv/laracast/freeCodeGram/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
///

On Mon, 2 Nov 2020 at 22:48, Calvin Chandra Gunawan <
[email protected]> wrote:

@ahmadmamdouh-10 https://github.com/ahmadmamdouh-10
After upgrading to mix 6, make sure to change your NPM scripts.

"scripts": { "dev": "npm run development", "development": "npx mix",
"watch": "npx mix watch", "prod": "npm run production", "production": "npx
mix -p" },

Don't forget to use the latest node version.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JeffreyWay/laravel-mix/issues/2521#issuecomment-720889551,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ARSRXPSDQVMO4WYBAXEWCHDSN54SXANCNFSM4SF2QPKQ
.

[g3n1us]

I had this same issue with a repo as well. I am actually still using v5, but nonetheless got the same error when doing a npm update on a repo that had not been touched in about 6 months. I was running node 15, but after reverting to 12 the issue was fixed.

I haven't looked into why this resolved the issue, or if this is the real answer, but I hope this helps somebody with debugging.

[alexiswaldo13]

This something you should never do, but If you're desperate like I was, here is what i did to solutionated it:

I created a new Laravel Mix project following the next steps:

1.- npm init
2.- npm install express --save
3.- npm install laravel-mix --save-dev
4.- npm install cross-env --save-dev
5.- cp node_modules/laravel-mix/setup/webpack.mix.js ./
6.- npm install --save-dev nodemon
7.- Change the "Scripts" in package.json file for:

"scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" },

8.- Configure webpack.mix and check that the "npm run dev" command works

If it works...
I copied all files from node_modules folder and I pasted them in my original project, It is important not to copy the folder as such, you have to copy all the files (with Ctrl + A for example), so that the old ones are rewritten and the ones that do not match are kept.

Like i said, it's a very bad practice, but I had a deliverable the next day and couldn't fix it properly.

Cheers!

[mikelucid]

--hide-modules does not exist anymore in webpack-cli 4, you must remove it from command line

thanks for this!

[besrabasant]

What about webpack --quiet option? How do I use it with the new mix version?

[thecrypticace]

All arguments after -- are passed directly to webpack.

So you can do this: mix -- --quiet

[besrabasant]

@thecrypticace This is what I get when running the command.

I have also tried mix --no-progress but the progress is still shown.

[thecrypticace]

That means webpack doesn't have a quiet option. And with the addition of webpackbar I imagine no-progress isn't honored. Please open a separate issue.

[csiber]

npm upgrade