live-codes/livecodes

Unexpected identifier error for `npm start`

Closed this issue · 5 comments

jinhojang6 commented

Hi, @hatemhosny thank you for starting this amazing project.

I've revisited the project since #297 and followed the steps below.

npm install
npm run build
npm start

but encountered this error :

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: CHANGELOG.md
[nodemon] starting `node LICENSE README.md build docs e2e functions images node_modules package-lock.json package.json patches playwright.config.ts scripts src storybook tsconfig.eslint.json tsconfig.json tsconfig.sdk.json vendor-licenses.md ./scripts/build.js --dev`

MIT License
    ^^^^^^^

SyntaxError: Unexpected identifier

It opens the http://localhost:8080/ and the project itself can be run. But the watch mode (hot reload) is not working, which means my code updates are not reflected in real-time.

The code updates are applied after I run npm run buildand npm run start again, which takes much time to see what's changed.

I'd like to contribute to this project. Can you please let me know how I can solve this issue above and run the project in watch mode?

hatemhosny commented

Hi, @jinhojang6

Thank you for showing interest in LiveCodes and willing to contribute

can you check npm scripts in "./package.json" and make sure they match these?

{
    "scripts": {
        "start": "run-p watch serve",
        "serve": "live-server build --cors --quiet --wait=2000",
        "watch": "nodemon --watch src -e * ./scripts/build.js --dev",
}

your logs show:

[nodemon] watching extensions: CHANGELOG.md
[nodemon] starting `node LICENSE README.md build docs e2e functions images node_modules package-lock.json package.json patches playwright.config.ts scripts src storybook tsconfig.eslint.json tsconfig.json tsconfig.sdk.json vendor-licenses.md ./scripts/build.js --dev`

they should look like this:

[nodemon] watching extensions: (all)
[nodemon] starting `node ./scripts/build.js --dev`

you may try to manually run:

npx nodemon --watch src -e * ./scripts/build.js --dev

and in a separate terminal :

npm run serve

obviously, make sure you have had a recent sync with the repo to get the latest changes on the develop branch.

please let me know if that helps

jinhojang6 commented

@hatemhosny

I was in the develop branch and ran the command npx nodemon --watch src -e * ./scripts/build.js --dev in the root directory. But got the same error.

I thought the asterisk * is trying to read all the files including .md and other unnecessary ones, so changed the package.json

from
"watch": "nodemon --watch src -e * ./scripts/build.js --dev",

to
"watch": "nodemon --watch src -e ts,tsx,js,json,html,css ./scripts/build.js --dev",

(* => ts,tsx,js,json,html,CSS)

and now the error messages are gone. The hot reload is working as well.

Can you let me know why the asterisk * is being used here?

Also, don't you see any errors in a fresh environment? I'm using Mac and node v18.15.0.

hatemhosny commented

thank you @jinhojang6 for reporting back

I use windows, and I have not had any problems with this issue.
just watching all files with any extension inside ./src is more convenient.
if you use a list of extensions you also want to include scss
probably: ts,tsx,js,jsx,json,html,css,scss

I do not have access to a Mac machine for development.
I think your shell was trying to execute all files on the project root because of this *

have you tried quoting it?

"watch": "nodemon --watch src -e \"*\" ./scripts/build.js --dev",

jinhojang6 commented

@hatemhosny

quoting the askterisk "watch": "nodemon --watch src -e \"*\" ./scripts/build.js --dev", worked!

It seems that * should be \"*\" for Mac or Linux. I tried this on another mac and showed the same issue.

hatemhosny commented

@jinhojang6

great!

I will change it to be quoted.

Thank you very much 👍

  • 👍1