error when try to run npm build on react project - node.js

i'm trying to deploy my app via VPS (Ubuntu and Nginx) but this error keeps showing up, (on vs code it works fine) any idea how could i procede? thanks!
> mystery#0.1.0 build /home/react-projects/portfolio
> react-scripts build
/home/react-projects/portfolio/node_modules/eslint-webpack-plugin/node_modules/jest-worker/build/index.js:110
_ending;
^
SyntaxError: Unexpected token ;
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/react-projects/portfolio/node_modules/eslint-webpack-plugin/dist/getESLint.js:9:5)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mystery#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mystery#0.1.0 build 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! /root/.npm/_logs/2022-08-23T18_10_04_282Z-debug.log

one way you can :
go to your package.json
replace "react-scripts": "..." to "react-scripts": "1.1.4",
then run npm install, after that npm build
if it didn't work try :
create a file .env at the root of the folder react folder
type SKIP_PREFLIGHT_CHECK=true inside of .env file
this command will help you in resolving this npm error.
then try to run npm build and check it should work .
notice : this command will permanently disable this preflight check

Updating node to higher version worked for me, i was using v10.22.1: nvm use --lts

i solved it installing the correct versions through NVM on my web server
https://www.freecodecamp.org/news/how-to-install-node-js-on-ubuntu-and-update-npm-to-the-latest-version/

Related

Next.js tutorial, error running Next.js dev server (npm run dev)

I'm doing the starter Next.js tutorial and encountering an error when I try to run the Next dev server and run my app.
Here is what my package.json file contains:
{
"scripts": {
"dev": "next dev"
},
"dependencies": {
"next": "^12.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
When running npm run dev, I get the following error:
> # dev /Users/renaudj/Documents/Projects/next-app
> next dev
/Users/renaudj/Documents/Projects/next-app/node_modules/next/dist/trace/report/index.js:14
reporters = [];
^
SyntaxError: Unexpected token =
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # dev: `next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # 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! /Users/renaudj/.npm/_logs/2022-07-04T05_09_15_196Z-debug.log
Anyone know what I'm missing here? Thank you!
I update my node version V11.15.1 to V12.22.1 then it's solved
I update my node version V10->V16. it' work
Yes, updating your version of node will solve this issue.
Before doing this, delete the node_modules folder in your project.
Then to update node to the latest stable version, run the following command on your terminal:
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
You may need to restart your terminal to see the version update which you check using:
node -v
Then reinstall your project using
npm install
Basically I have multiple versins of node.
It is possible through nvm
I switched to node 14 using the command :
node use 14.15.0

problem with laravel and vue.js | Error: Cannot find module

I recently got this error whenever I install vue in laravel using the following commands:
composer require laravel/UI
PHP artisan up vue
php artisan ui vue --auth
npm install && npm run dev
I get this new error and its the first time that happened to me:
Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
Require stack:
- C:\wamp64\www\projects\quizapp\node_modules\vue-loader\lib\plugin-webpack5.js
- C:\wamp64\www\projects\quizapp\node_modules\vue-loader\lib\plugin.js
- C:\wamp64\www\projects\quizapp\node_modules\vue-loader\lib\index.js
- C:\wamp64\www\projects\quizapp\node_modules\laravel-mix\src\components\Vue.js
- C:\wamp64\www\projects\quizapp\node_modules\laravel-mix\src\components\ComponentRegistrar.js
- C:\wamp64\www\projects\quizapp\node_modules\laravel-mix\src\Mix.js
- C:\wamp64\www\projects\quizapp\node_modules\laravel-mix\setup\webpack.config.js
- C:\wamp64\www\projects\quizapp\node_modules\webpack-cli\lib\webpack-cli.js
- C:\wamp64\www\projects\quizapp\node_modules\webpack-cli\lib\bootstrap.js
- C:\wamp64\www\projects\quizapp\node_modules\webpack-cli\bin\cli.js
- C:\wamp64\www\projects\quizapp\node_modules\webpack\bin\webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (C:\wamp64\www\projects\quizapp\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\wamp64\www\projects\quizapp\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
at Module._compile (C:\wamp64\www\projects\quizapp\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Module.require (internal/modules/cjs/loader.js:974:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\vue-loader\\lib\\plugin.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\vue-loader\\lib\\index.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\laravel-mix\\src\\components\\Vue.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\laravel-mix\\src\\Mix.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\laravel-mix\\setup\\webpack.config.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\webpack-cli\\lib\\bootstrap.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\webpack-cli\\bin\\cli.js',
'C:\\wamp64\\www\\projects\\quizapp\\node_modules\\webpack\\bin\\webpack.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # watch: `mix watch`
npm ERR! Exit status 2
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! C:\Users\zzzab\AppData\Roaming\npm-cache\_logs\2021-08-05T07_08_51_267Z-debug.log
and I tried to make a new laravel project and didn't work.
Finally, i have the solution,
1- Delete the node_modules folder using the file explorer and delete package-lock.json as well.
2- Run npm install command.
3- Run npm run dev or npm run watch for auto mix when ever change made.

How to properly set up dev environment using node and npm for Material.io components?

I've done the codepens provided by Material.io however when I try to follow the same steps using my own files, I always get an error.
> webpack-dev-server --progress
internal/modules/cjs/loader.js:983
throw err;
^
Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- C:\Users\willy\Desktop\Wireframes-master\Front Page\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
at Function.Module._load (internal/modules/cjs/loader.js:862:27)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (C:\Users\willy\Desktop\Wireframes-master\Front Page\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\willy\\Desktop\\Wireframes-master\\Front Page\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mdc-101-web#0.0.0 start: `webpack-dev-server --progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mdc-101-web#0.0.0 start 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! C:\Users\willy\AppData\Roaming\npm-cache\_logs\2020-04-10T15_13_14_365Z-debug.log
C:\Users\willy\Desktop\Wireframes-master\Front Page>webpack-dev-server --progress
'webpack-dev-server' is not recognized as an internal or external command,
operable program or batch file.
I am still new to web development and most of this log is alien to me, I've found similar issues online however their solutions have not fixed my issue.
Versions:
npm: 6.14.4
webpack: 4.42.1
node.js: 12.16.2
UPDATE: It seems that when I first install npm, everything goes just fine, however there a 3 original vulnerabilities. Before I audit fix them, the npm start command works just fine and successfully compiles. When I run the npm audit to see the details of the vulnerabilities, I use the suggested commands to fix them. Once I've done that it no longer works.

Error when running vuetifyjs template

I have successfully installed a vuetifyjs template using the command
vue init vuetifyjs/webpack-advanced
it was successfully installed but when I tried to use the command npm run dev I had the following error message:
C:\Users\Muse\Documents\vuetify>npm run dev
vuetify#1.0.0 dev C:\Users\Muse\Documents\vuetify
node build/dev-server.js
fs.js:1657
binding.lstat(baseLong);
^
Error: ENOENT: no such file or directory, lstat 'C:\Users\Muse\Documents\vuetify\test'
at Object.realpathSync (fs.js:1657:15)
at resolve (C:\Users\Muse\Documents\vuetify\build\webpack.base.conf.js:8:13)
at Object. (C:\Users\Muse\Documents\vuetify\build\webpack.base.conf.js:35:35)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Module.require (module.js:517:17)
at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuetify#1.0.0 dev: node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuetify#1.0.0 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! C:\Users\Muse\AppData\Roaming\npm-cache_logs\2017-08-31T09_19_06_701Z-debug.log
You just need to create a test folder and give it access.
It's a bug with webpack-advanced template
Fore install your project dependencies
npm install -f
Then, make a folder named "test" in your root project
mkdir test
It's a bug caused by vuetifyjs/webpack-advanced

Cannot find module 'has-flag'

Getting below error while "npm run build" on server.On local machine working fine. Getting 500 response on server
node version:8.0
npm version: 5.0.3
Error: Cannot find module 'has-flag'
at Function.Module._resolveFilename (module.js:485:15)
at Function.Module._load (module.js:437:25)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous>
(/usr/share/../../../node_modules/postcss/node_modules/supports-color/index.js:2:15)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ***#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ***#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Try npm install --save has-flag. It looks like supports-color is requiring has-flag to be installed but it isn't. If you need to install any other packages you can just type npm install.
The above didn't work for me, but deleting my node_modules and dist folders and rerunning npm install did.

Resources