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

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

Related

error when try to run npm build on react project

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/

`npm ERR! code 1` after SyntaxError when running `npm ci && npm run build`

I am trying to build and run a project on an npx dev-server. My package.json file has "type":"module" inside the first {} as recommended here. When I run npm ci && npm run build in terminal (MacOS Mojave), I get the following error message:
[!] SyntaxError: Unexpected token {
/Users/User/folder/project/node_modules/rollup-plugin-lit-css/rollup-plugin-lit-css.js:1
import { createFilter } from "rollup-pluginutils";
^
SyntaxError: Unexpected token {
at Module._compile (internal/modules/cjs/loader.js:720:23)
at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Object.require.extensions.<computed> [as .js] (/Users/User/folder/project/node_modules/rollup/dist/shared/loadConfigFile.js:622:13)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (/Users/User/folder/project/rollup.config.js:7:14)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.require.extensions.<computed> [as .js] (/Users/User/folder/project/node_modules/rollup/dist/shared/loadConfigFile.js:619:20)
npm ERR! code 1
npm ERR! path /Users/User/folder/project/
npm ERR! command failed
npm ERR! command sh -c rollup -c && workbox generateSW
The debug logs give the following additonal error info:
22 verbose stack Error: command failed
22 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/#npmcli/promise-spawn/index.js:63:27)
When I try to run an npx server using npx #web/dev-server --root-dir static --app-index static/index.html, I get this error:
npm ERR! could not determine executable to run
I've tried updating npm through a number of methods:
npm rm -rf node_modules
npm install --legacy-peer-deps
but am still getting the same errors.
Any suggestions on where to start would be appreciated.
Had to update MacOS to Big Sur, then completely uninstall and reinstall node and npm.

Build fail with an error about fs-extra module, using circle cI and create react app

I have been trying to use circle ci with create react app, but I confronted this error.
#!/bin/bash -eo pipefail
CI=true npm run build
> react-scripts build
/home/circleci/project/node_modules/react-scripts/node_modules/fs-extra/lib/mkdirs/make-dir.js:85
} catch {
^
SyntaxError: Unexpected token {
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (module.js:613:28)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Module.require (module.js:593:17)
at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! robofriends#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the robofriends#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! /home/circleci/.npm/_logs/2021-09-24T23_47_26_734Z-debug.log
Exited with code exit status 1
CircleCI received exit code 1
These are my simple setup.
# .circleci/config.yml
version: 2.1
jobs:
build:
docker:
- image: circleci/node:9.8
steps:
- checkout
- run: echo "npm installing"
- run: npm install
- run: CI=true npm run build
// package.json
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.2.4",
"react-scripts": "^4.0.3"
Does anyone have any clue why this error comes up?
Would this be about node version or something?...
I have changed the node image to the latest and it worked!!
- image: circleci/node:latest

SyntaxError: Unexpected reserved word => prettier/third-party.js

I'm pretty new to Node, npm and webpack. I'm trying to set up a Craft 3 environment with Tailwind css.
Everything worked fine out of the box, but when i run npm run dev i get the following error:
> craftcms-tailwind#1.0.0 dev /Users//sites/***/www
> gulp dev
/Users/***/sites/***/www/node_modules/prettier/third-party.js:9871
for await (const place of this.config.searchPlaces) {
^^^^^
SyntaxError: Unexpected reserved word
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/***/sites/***/www/node_modules/prettier/index.js:16551:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! craftcms-tailwind#1.0.0 dev: `gulp dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the craftcms-tailwind#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! /Users/***/.npm/_logs/2020-08-28T14_23_16_034Z-debug.log
Why is this hapening and how can i make sure i can fix this in the furure?
As described here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
This syntax :
for await (const place of this.config.searchPlaces) {
// ...
}
is available in NodeJS starting version 10.0.0
I faced same issue first I tried with upgrading node v8 --> node v10 works fine.
If you do not want to upgrade your node version you can downgrade prettier version to prettier#1.13.7 This fix is also working properly.
Downgrade prettier version:
npm i -D prettier#1.13.7
More info: https://dev.to/shivampawar/syntaxerror-unexpected-reserved-word-prettierthird-partyjs-3ph7
I had the same issue in node v8.11.2. Upgraded node to version 12.3.1 and it works fine
I know it's late but for people coming here, you can either use node v10 or downgrade prettier to v1.x.x.
If any package throws an unexpected error like this please check it's package.json on github or from node_module and look for engines
"engines": {
"node": ">=8"
},
make sure it matches your node, either change (upgrade) the node version if possible or use a different (older) package version. You can check which package version is suitable by changing the version from dropdown for this file.

Module not found (MODULE_NOT_FOUND) on nest.js code base

I have a code base which is working perfectly fine on a Windows box on node v10.16.3 but when I try to install the same code base on a CentOS Linux box with node v.12.16.3, I get the following error. Not sure what the issue could be.
# npm start
> nest start
internal/modules/cjs/loader.js:960
throw err;
^
Error: Cannot find module '#angular-devkit/core'
Require stack:
- /usr/local/lib/node_modules/#nestjs/cli/lib/schematics/schematic.option.js
- /usr/local/lib/node_modules/#nestjs/cli/lib/schematics/index.js
- /usr/local/lib/node_modules/#nestjs/cli/actions/generate.action.js
- /usr/local/lib/node_modules/#nestjs/cli/actions/index.js
- /usr/local/lib/node_modules/#nestjs/cli/commands/command.loader.js
- /usr/local/lib/node_modules/#nestjs/cli/commands/index.js
- /usr/local/lib/node_modules/#nestjs/cli/bin/nest.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
at Function.Module._load (internal/modules/cjs/loader.js:840:27)
at Module.require (internal/modules/cjs/loader.js:1019:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous>
(/usr/local/lib/node_modules/#nestjs/cli/lib/schematics/schematic.option.js:3:16)
at Module._compile (internal/modules/cjs/loader.js:1133:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
at Module.load (internal/modules/cjs/loader.js:977:32)
at Function.Module._load (internal/modules/cjs/loader.js:877:14)
at Module.require (internal/modules/cjs/loader.js:1019:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/local/lib/node_modules/#nestjs/cli/lib/schematics/schematic.option.js',
'/usr/local/lib/node_modules/#nestjs/cli/lib/schematics/index.js',
'/usr/local/lib/node_modules/#nestjs/cli/actions/generate.action.js',
'/usr/local/lib/node_modules/#nestjs/cli/actions/index.js',
'/usr/local/lib/node_modules/#nestjs/cli/commands/command.loader.js',
'/usr/local/lib/node_modules/#nestjs/cli/commands/index.js',
'/usr/local/lib/node_modules/#nestjs/cli/bin/nest.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Exit status 1
npm ERR!
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/2020-05-22T14_14_24_709Z-debug.log
Delete the dist folder and again run yarn start, npm start, yarn start:dev or npm run start:dev to rebuild the dist folder. In addition yarn prebuild or npm run prebuild does the same thing using rimraf
The problem occurs when you change a name and the tsc does not change it in dist and transpiled .js files, so it cannot find the module
I think to the best of my knowledge, nestjs or tsc does that to make the transpilation faster
Nothing else worked for me but the following did:
npm install --save-dev webpack
i'm not completely sure if there is any adverse impact to this though
most important where you started node js the dist/ or / build folder has a worng path which we import or required so for
NPM : npm install --save-dev webpack
and for yarn add webpack this one packeg will slove your problem

Resources