Khắc Phục Lỗi 'ERROR: Expected identifier but found "import"' Trong Vite
Lỗi "ERROR: Expected identifier but found "import"" thường xảy ra trong quá trình phát triển ứng dụng với Vite, thường là do vấn đề tương thích với phiên bản của esbuild. Dưới đây là hướng dẫn chi tiết về nguyên nhân và cách khắc phục lỗi này, để bạn có thể tiếp tục phát triển ứng dụng mà không gặp trở ngại.
Thông Tin Lỗi Thường Gặp
Khi bạn chạy lệnh npm run dev, có thể bạn sẽ gặp thông báo lỗi tương tự như sau:
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
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"
}
}Nguyên Nhân Và Cách Khắc Phục
Lỗi xảy ra chủ yếu do phiên bản esbuild không tương thích khi cấu hình Vite. Để khắc phục vấn đề này, bạn có thể thực hiện các bước sau:
1. Sử Dụng Overrides của pnpm
Nếu bạn đang sử dụng pnpm, bạn có thể thêm lệnh sau để ghi đè phiên bản esbuild:
bash
pnpm add esbuild --save-devVà thêm vào phần pnpm trong file package.json như sau:
json
"pnpm": {
"overrides": {
"esbuild": "0.24.0"
}
}2. Sử Dụng Overrides của npm
Nếu bạn sử dụng npm, bạn có thể cài đặt lại phiên bản esbuild như sau:
bash
npm install esbuild --save-devVà thêm vào phần overrides trong file package.json:
json
{
"overrides": {
"esbuild": "0.24.0"
}
}3. Sử Dụng Resolutions của Yarn
Nếu bạn đang dùng Yarn, chỉ cần thêm lệnh sau:
bash
yarn add esbuild --devVà chỉnh sửa file package.json với phần resolutions như sau:
json
{
"resolutions": {
"esbuild": "0.24.0"
}
}Kết Luận
Hy vọng hướng dẫn này sẽ giúp bạn khắc phục lỗi "ERROR: Expected identifier but found "import"" trong dự án Vite của mình. Đừng quên kiểm tra các tài liệu và kỹ thuật tốt nhất để duy trì sự tương thích trong các dự án phát triển của bạn nhé.
Tham khảo thêm từ: esbuild Issues và Vite Issues.
source: viblo
