Why Laravel Sail NPM say's 'unsupported version of Node.js'? - node.js

Question

I'm in a Laravel 8 project using Docker. Actually I'm in designing with SCSS.
My problem comes up, if I try to compile my SCSS. NPM says, my Node version is on 12.x and way to old, but in my container I use Node version 16.5.
I've tried it with the following commands on command line:
./vendor/bin/sail npm run dev
./vendor/bin/sail npm run watch
It runs into this error:
> # watch /var/www/html
> mix watch
Error: You are using an unsupported version of Node. Please update to at least Node v12.14
at assertSupportedNodeVersion (/var/www/html/node_modules/laravel-mix/src/Engine.js:6:15)
at executeScript (/var/www/html/node_modules/laravel-mix/bin/cli.js:61:5)
at Command.program.command.description.option.option.action (/var/www/html/node_modules/laravel-mix/bin/cli.js:39:13)
at Command.listener [as _actionHandler] (/var/www/html/node_modules/commander/index.js:922:31)
at Command._parseCommand (/var/www/html/node_modules/commander/index.js:1503:14)
at Command._dispatchSubcommand (/var/www/html/node_modules/commander/index.js:1443:18)
at Command._parseCommand (/var/www/html/node_modules/commander/index.js:1460:12)
at Command.parse (/var/www/html/node_modules/commander/index.js:1292:10)
at Command.parseAsync (/var/www/html/node_modules/commander/index.js:1318:10)
at run (/var/www/html/node_modules/laravel-mix/bin/cli.js:50:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # watch: `mix watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # watch 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/sail/.npm/_logs/2021-08-28T08_08_14_074Z-debug.log
So I've get into my container with docker exec -it <container-id> /bin/bash. There I look for my actual Node version with node -v. It says, that Node version 16.5 is already installed.
That's the content of the complete log file:
root#c20f3997d228:/var/www/html# cat /home/sail/.npm/_logs/2021-08-28T08_09_07_299Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
2 info using npm#6.14.4
3 info using node#v10.19.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle #~predev: #
6 info lifecycle #~dev: #
7 verbose lifecycle #~dev: unsafe-perm in lifecycle true
8 verbose lifecycle #~dev: PATH: /usr/share/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/html/node_modules/.bin:/root/.nvm/versions/node/v16.5/bin/:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle #~dev: CWD: /var/www/html
10 silly lifecycle #~dev: Args: [ '-c', 'npm run development' ]
11 silly lifecycle #~dev: Returned: code: 1 signal: null
12 info lifecycle #~dev: Failed to exec dev script
13 verbose stack Error: # dev: `npm run development`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:198:13)
13 verbose stack at ChildProcess.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:198:13)
13 verbose stack at maybeClose (internal/child_process.js:982:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid #
15 verbose cwd /var/www/html
16 verbose Linux 5.10.25-linuxkit
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
18 verbose node v10.19.0
19 verbose npm v6.14.4
20 error code ELIFECYCLE
21 error errno 1
22 error # dev: `npm run development`
22 error Exit status 1
23 error Failed at the # dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Does anybody has an idea why NPM says, that there is no actual version?
Regards,
Manny

Answer 1

Having come across this same problem myself recently, or more specifically the same wording in the response...
I can state with empirical certainty the issue is NOT your version of NPM, nor is it your version of Node.js, rather it's the version of the dependancy known as "Laravel-mix" which has been pre loaded into your node_modules directory.
In case you aren't aware, the "node_modules" folder is where all your supporting software dependancies get loaded, and increasingly, some of them (like "laravel-mix") are now only supporting very recent versions of Node.js - as in more recent than Mar 2020.
I'm currently seeing this problem pop up on certain versions of Docker, and on versions of Windows 8.1 or earlier. Even AFTER upgrading your version of Node.js the problem is NOT going away because 'laravel-mix" is also cross referencing your Operating System too.
It seems that when "laravel-mix" was upgraded from v5.0 to v6.0 it too fell in to this "very recent versions of Node.js" syndrome. By extension, the default version of "package.json" which now ships with Laravel v8.0 no longer wants 'laravel-mix v5.0", it wants "laravel-mix v6.0".
But there is some good news! Firstly, you do NOT have to use the latest version of "laravel-mix v6.0" in Laravel 8 if you don't want to.
If you do come across this problem, you can work around it by using "parts" of the default version of "package.json" which shipped with Laravel v7.0, which in turn loads the "laravel-mix v5.0" dependancy.
For example... this version of package.json works just great in Laravel 8.0
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --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 --disable-host-check --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 --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.21",
"cross-env": "^7.0.3",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"tailwindcss": "^3.0.17"
}
}
Make a backup copy of you "package.json" file and edit it similar to above.
It's perfectly OK to delete your "node_modules" folder, along with your "package-lock.json" file in your root directy. After doing this, you can then re-run "npm install" in your terminal.
You will find "npm run dev" will work without errors after performing these steps.