Expected identifier but found "import"

[shniubobo]

Describe the bug

When running pnpm dev in a freshly created project, the following error occurs:

✘ [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/projects/wmaibglvlk.github/vite.config.ts
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/projects/wmaibglvlk.github/node_modules/esbuild/lib/main.js:1466:15)
    at eval (/home/projects/wmaibglvlk.github/node_modules/esbuild/lib/main.js:935:25)
    at runOnEndCallbacks (/home/projects/wmaibglvlk.github/node_modules/esbuild/lib/main.js:1306:45)
    at buildResponseToResult (/home/projects/wmaibglvlk.github/node_modules/esbuild/lib/main.js:933:7)
    at eval (/home/projects/wmaibglvlk.github/node_modules/esbuild/lib/main.js:960:16)
    at responseCallbacks.<computed> (/home/projects/wmaibglvlk.github/node_modules/esbuild/lib/main.js:612:9)
    at handleIncomingPacket (/home/projects/wmaibglvlk.github/node_modules/esbuild/lib/main.js:667:12)
    at Socket.readFromStdout (/home/projects/wmaibglvlk.github/node_modules/esbuild/lib/main.js:590:7)
    at Socket.emit (node:events:30:10899)
    at addChunk (node:internal/streams/readable:225:3685)

Expected behavior

The dev server starts successfully.

How to reproduce

Go to either of these:

• https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/default
• https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript

[xvvhang]

same

[xvvhang]

It's caused by esbuild and there's a solution: install esbuild before v0.24.1 as dev dependency and restart dev server. more detail

[AdmiralPotato]

I'm getting this error when doing an incredibly default install choosing all the default options via:
npm create vue@latest

$ npm create vue@latest

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

√ Project name: ... npm_create_vue_is_broken
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? » No

Scaffolding project in G:\dev\npm_create_vue_is_broken...

Done. Now run:

  cd npm_create_vue_is_broken
  npm install
  npm run dev

$ cd npm_create_vue_is_broken/

$ npm install

added 145 packages, and audited 146 packages in 17s

42 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm run dev

> [email protected] dev
> vite

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 G:\dev\npm_create_vue_is_broken\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 (G:\dev\npm_create_vue_is_broken\node_modules\esbuild\lib\main.js:1476:15)
    at G:\dev\npm_create_vue_is_broken\node_modules\esbuild\lib\main.js:945:25
    at runOnEndCallbacks (G:\dev\npm_create_vue_is_broken\node_modules\esbuild\lib\main.js:1316:45)
    at buildResponseToResult (G:\dev\npm_create_vue_is_broken\node_modules\esbuild\lib\main.js:943:7)
    at G:\dev\npm_create_vue_is_broken\node_modules\esbuild\lib\main.js:970:16
    at responseCallbacks.<computed> (G:\dev\npm_create_vue_is_broken\node_modules\esbuild\lib\main.js:622:9)
    at handleIncomingPacket (G:\dev\npm_create_vue_is_broken\node_modules\esbuild\lib\main.js:677:12)
    at Socket.readFromStdout (G:\dev\npm_create_vue_is_broken\node_modules\esbuild\lib\main.js:600:7)
    at Socket.emit (node:events:524:28)
    at addChunk (node:internal/streams/readable:561:12)

[cexbrayat]

Yes, this is a regression in esbuild 0.24.1 which was released 2 hours ago.

See evanw/esbuild#4010

We can't do much on create-vue side, I'll let you watch the esbuild issue. They'll probably release a fix soon.
In the meantime you can manually install esbuild 0.24.0.

[btea]

Vite has released a new pin esbuild version; the latest version is normal.

[cexbrayat]

Awesome, let's close this then.