Question 419276 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Errors while starting vite + react

I am making a fullstack project, I have a parent folder in which I have frontend and backend folder. Frontend folder is my Vite project but when I do npm run dev it just shows errors:

> [email protected] dev
> vite

✘ [ERROR] Expected identifier but found "import"

    (define name):1:0:
      1 │ import.meta.dirname
        ╵ ~~~~~~

✘ [ERROR] Expected identifier but found "import"

    (define name):1:0:
      1 │ import.meta.filename
        ╵ ~~~~~~

✘ [ERROR] Expected identifier but found "import"

    (define name):1:0:
      1 │ import.meta.url
        ╵ ~~~~~~

failed to load config from /home/pankaj/study/sneaker-project/frontend/vite.config.js
error when starting dev server:
Error: Build failed with 3 errors:
(define name):1:0: ERROR: Expected identifier but found "import"
(define name):1:0: ERROR: Expected identifier but found "import"
(define name):1:0: ERROR: Expected identifier but found "import"
    at failureErrorWithLog (/home/pankaj/study/sneaker-project/frontend/node_modules/esbuild/lib/main.js:1476:15)
    at /home/pankaj/study/sneaker-project/frontend/node_modules/esbuild/lib/main.js:945:25
    at runOnEndCallbacks (/home/pankaj/study/sneaker-project/frontend/node_modules/esbuild/lib/main.js:1316:45)
    at buildResponseToResult (/home/pankaj/study/sneaker-project/frontend/node_modules/esbuild/lib/main.js:943:7)
    at /home/pankaj/study/sneaker-project/frontend/node_modules/esbuild/lib/main.js:970:16
    at responseCallbacks.<computed> (/home/pankaj/study/sneaker-project/frontend/node_modules/esbuild/lib/main.js:622:9)
    at handleIncomingPacket (/home/pankaj/study/sneaker-project/frontend/node_modules/esbuild/lib/main.js:677:12)
    at Socket.readFromStdout (/home/pankaj/study/sneaker-project/frontend/node_modules/esbuild/lib/main.js:600:7)
    at Socket.emit (node:events:524:28)
    at addChunk (node:internal/streams/readable:561:12)
Tags:

9

Answers


  1. 0

    Downgrade with npm i -D [email protected].0

    Login or Signup to reply.
  2. 0

    I am having the same error with laravel project. Looks like "vite": "^6.0.4" is causing the issue. Downgrading works at this moment

    npm uninstall vite

npm install vite@^5
    Login or Signup to reply.
  5. 0

    Step. 1 : npm i -D [email protected]

    Step. 2 : npm i

    Step. 3 : npm run dev

    Login or Signup to reply.
  6. 0

    Confirmed. Down grading to 5.4.11 solves issue. However, I am able to successfully build some projects with 6.0.4.

    package.json:

     "dependencies": {
    "lodash": "4.17.21",
    "lucide-react": "0.468.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "4.3.4",
    "vite": "6.0.4"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "recoil": "^0.7.7",
    "tailwindcss": "^3.3.0"
  }

        $ npm run build

> [email protected] build
> vite build

vite v6.0.4 building for production...
✓ 1592 modules transformed.
dist/index.es.js  63.14 kB │ gzip: 15.92 kB
dist/index.umd.js  43.72 kB │ gzip: 13.77 kB
✓ built in 2.25s
    Login or Signup to reply.
  7. 0

    I encountered a similar issue caused by [email protected].1. This version seems to have compatibility problems with certain project configurations. The solution I found is to pin the esbuild version to 0.24.0, which works well. You can do this by running:

    npm install --save-dev [email protected]

    If you’d like to ensure that all your projects use a safe version of esbuild, you can add a dependency resolution in your package.json file:

    "devDependencies": {
   ...
   "esbuild": "0.24.0",
   ...
}
    Login or Signup to reply.
  8. 0

    I got the same issue like:

    issue

    Resolved it by changing frontend package.json file.

    You just need to replace version number related to vite:your-version in @vitejs/plugin-react:your-version under devDependencies. Both property version numbers must be the same.

    Ex:

    {
   "devDependencies": 
   {
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^4.3.4"
   }
}

    Finally, reinstall node packages by npm install after removing package-lock.json and node_modules

    Login or Signup to reply.
  9. 0

    Your issue seems to be related to the recent release of esbuild version 0.24.1.

    To resolve the issue, downgrade esbuild to a stable version:

    npm install [email protected] --save-dev

    This should fix the error you are experiencing when running npm run dev.

    For more details, see the related GitHub issue: esbuild issue #4012.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search