Vue 3: Error on creation "Expected identifier but found 'import'"

Question

I try to create a new vue 3 application but i have a problem with creation.

Node version: 22.10.0 Npm version: 10.9.0

I create my project with: npm create vue@latest like in the docs

And when i try to run the code with npm run dev

I got this errror

X [ERROR] Expected identifier but found "import"

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

failed to load config from C:\Apache24\htdocs\testvue3\vite.config.mjs
error when starting dev server:
Error: Build failed with 3 errors:
(define name):1:0: ERROR: Expected identifier but found "import"

I haven't touched any line of code yet and the problem seems to come from the vite.config.ts file below

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Answer 1

It seems the issue can be resolved temporarily by downgrading the esbuild version. You can do this with the following command:

npm i -D [email protected]