Khắc phục lỗi ERROR: Expected identifier but found "import" trong dự án Vite

Lỗi ERROR: Expected identifier but found "import" - Vite do version "esbuild"

Thông tin lỗi có thể các bạn sẽ gặp:

Lỗi khi npm run dev:

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...

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:\client\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"

Nội dung file package.json:

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.17",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "esbuild": "^0.24.1",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.13.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.18.1",
    "vite": "^6.0.3"
  }
}

Ảnh mô tả lỗi

Issuse	package.json

Nguyên nhân và giải pháp

Do version esbuild gặp lỗi khi cấu hình vite, cách khắc phục mà mình tham khảo được

• pnpm overrides : pnpm add esbuild --save-dev

"pnpm": {
    "overrides": {
      "esbuild": "0.24.0"
    }
  }

• npm overrides : npm install esbuild --save-dev

{
  "overrides": {
    "esbuild": "0.24.0"
  }
}

• yarn resolutions : yarn add esbuild --dev

{
  "resolutions": {
    "esbuild": "0.24.0"
  }
}

Edited by @sapphi-red

Refer: github.com/evanw/esbuild/issues

Refer: github.com/vitejs/vite/issues