Error when running Vite with import.meta in vite.config.js

[fffml1]

Describe the bug

I encountered an error when running a freshly created Vue 3 project with Vite. The project fails to start with the following errors in vite.config.js:

X [ERROR] Expected identifier but found "import"
    (define name):1:0:
      1 │ import.meta.dirname
        ╵ ~~~~~~
X [ERROR] Expected identifier but found "import"
    (define name):1:0:
      1 │ import.meta.filename
        ╵ ~~~~~~
X [ERROR] Expected identifier but found "import"
    (define name):1:0:
      1 │ import.meta.url
        ╵ ~~~~~~
failed to load config from D:\Code\vue-project\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 (D:\Code\vue-project\node_modules\esbuild\lib\main.js:1476:15)
    at D:\Code\vue-project\node_modules\esbuild\lib\main.js:945:25
    at runOnEndCallbacks (D:\Code\vue-project\node_modules\esbuild\lib\main.js:1316:45)
    at buildResponseToResult (D:\Code\vue-project\node_modules\esbuild\lib\main.js:943:7)
    at D:\Code\vue-project\node_modules\esbuild\lib\main.js:970:16
    at responseCallbacks.<computed> (D:\Code\vue-project\node_modules\esbuild\lib\main.js:622:9)
    at handleIncomingPacket (D:\Code\vue-project\node_modules\esbuild\lib\main.js:677:12)
    at Socket.readFromStdout (D:\Code\vue-project\node_modules\esbuild\lib\main.js:600:7)
    at Socket.emit (node:events:519:28)
    at addChunk (node:internal/streams/readable:559:12)

Reproduction

none

Steps to reproduce

Run npm init vue@latest to create a new Vue 3 project.
Select default options (Vue 3, no TypeScript, no router, no Pinia, etc.).
Navigate to the project folder and run npm install.
Run npm run dev to start the Vite development server.

System Info

Node.js version: v20.17.0
npm version: 10.8.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hykilpikonna]

Same issue here when upgrading Svelte project from vite 5 to vite 6

[Qullis]

The same thing happens with a new React project.

npm create vite@latest my-react-app -- --template react

[newstart0514]

Vue3 old projects also have similar issues when building new devices, with Node version 20.17.0

[hykilpikonna]

What's strange is that, a new Vite+Svelte+TS project created yesterday on Vite 6.0.3 did not have this issue even when upgraded to Vite 6.0.4, but a new Vite+Svelte+TS 6.0.4 project created today has this issue.

Diffing the two including node modules seem to say that node_modules/.vite isn't present in the problematic one

[sameignatovich]

duplicates #19018

[TheRealShreyash]

The same is happening with me in vite+react but I am using vite 6.0.3

[jeff-fe]

It seems to be caused by the new version of esbuild:0:24.1
问题看样子是上游esbuild 0.24.1版本导致的

[diganta688]

Same thing happens with a new React project.
npm create vite@latest my-react-app -- --template react

X [ERROR] Expected identifier but found "import"
X [ERROR] Expected identifier but found "import"

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

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

    ╵ ~~~~~~

X [ERROR] Expected identifier but found "import"
X [ERROR] Expected identifier but found "import"

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

X [ERROR] Expected identifier but found "import"

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

failed to load config from C:\vite\d\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 (C:\vite\d\node_modules\esbuild\lib\main.js:1476:15)
at C:\vite\d\node_modules\esbuild\lib\main.js:945:25
at runOnEndCallbacks (C:\vite\d\node_modules\esbuild\lib\main.js:1316:45)
at buildResponseToResult (C:\vite\d\node_modules\esbuild\lib\main.js:943:7)
at C:\vite\d\node_modules\esbuild\lib\main.js:970:16
at responseCallbacks. (C:\vite\d\node_modules\esbuild\lib\main.js:622:9)
at handleIncomingPacket (C:\vite\d\node_modules\esbuild\lib\main.js:677:12)
at Socket.readFromStdout (C:\vite\d\node_modules\esbuild\lib\main.js:600:7)
at Socket.emit (node:events:519:28)
at addChunk (node:internal/streams/readable:559:12)

[sapphi-red]

Duplicate of #19018

[Entri-aswin]

The same thing happens with a new React project.

npm create vite@latest my-react-app -- --template react

did you get the solution for that?

[Sujan7Neupane]

npm i -D esbuild@0.24.0

This worked for me

[breizh24]

To avoid adding esbuild to the devDependencies the solution that worked for me was to add an override in the package.json

{
  "name": "Your app",
  "devDependencies": {
    "vite": "^6.0.4",
  },
  "overrides": {
    "vite": {
      "esbuild": "0.24.0"
    }
  },
}

Then delete the node_modules folder and run npm install

[wangxy-gitub]

Don‘t use vite 6

[val1984]

v6.0.5 pins esbuild to v0.24.0 which fixes this issue without having to mess with package.json.