npm run dev gives an error.

We often encounter the error below when trying to start our react app.

packit-frontend@0.0.0 dev
vite

file:///home/ariel/Desktop/PackIt/PackIt-frontend/node_modules/vite/bin/vite.js:7
    await import('source-map-support').then((r) => r.default.install())
    ^^^^^

SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)
    at async link (internal/modules/esm/module_job.js:42:21)

This error is often caused by your node version being below the expected version. Below are some guides to help you fix that:

1. check your node version.

node -v

1. if your node version is lower than version 21, I will recommend you install node 21 or greater.

nvm install 21

1. After the installation is done, you can now use the version 21.

nvm use 21

1. Run the app again with

npm run dev

and the expected result should be:

> packit-frontend@0.0.0 dev
> vite


  VITE v5.3.4  ready in 222 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help