Fails to load config with `Excepted identifier but found "import"` error
Problem
Note: vite@6.0.5 is out pinning to esbuild 0.24.0 until @sapphi-red's PR to esbuild is merged and released, you can update to latest vite to fix this issue. Leaving this issue open as we'll revert the temporary fix soon. Workaround and the cause It seems a change in esbuild 0.24.1 is affecting Vite's config loader: https://github.com/evanw/esbuild/issues/4010 The current workaround is to set overrides in package managers: - pnpm overrides [code block] - npm overrides [code block] - yarn resolutions [code block] Edited by @sapphi-red --- Describe the bug <img width="750" alt="Screenshot 0006-12-20 at 14 20 15" src="https://github.com/user-attachments/assets/cf41b16a-67a3-4f1d-977c-ba7aab3e02aa" /> Reproduction pnpm create vite@latest; babel-react Steps to reproduce _No response_ System Info [code block] Used Package Manager pnpm Logs _No response_ Validations - [X] Follow our Code of Conduct - [X] Read the Contributing Guidelines. - [X] Read the docs. - [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. - [X] 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. - [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server. - [X] The provided reproduction is a minimal reproducible example of the bug.
Unverified for your environment
Select your OS to check compatibility.
2 Fixes
Update Vite and Configure Package Manager Overrides
The error 'Expected identifier but found "import"' occurs due to a breaking change in esbuild version 0.24.1, which affects Vite's configuration loading mechanism. This issue arises when Vite is pinned to an incompatible version of esbuild, leading to syntax errors in the configuration files.
Awaiting Verification
Be the first to verify this fix
- 1
Update Vite to Latest Version
Upgrade Vite to the latest version to ensure compatibility with the latest esbuild. This should resolve the configuration loading issue.
bashpnpm update vite - 2
Set Package Manager Overrides for esbuild
If you cannot update Vite immediately, set an override for esbuild in your package manager to revert to a compatible version (0.24.0). This will prevent the syntax error from occurring.
bashpnpm add esbuild@0.24.0 --save-exact - 3
Configure pnpm Overrides
Add an override in your pnpm configuration to ensure that esbuild uses the compatible version across your project.
bashecho '{ "overrides": { "esbuild": "0.24.0" } }' > pnpm-lock.yaml - 4
Verify Configuration
After applying the updates and overrides, run your Vite project to ensure that the configuration loads without errors. Check for the absence of the 'Expected identifier but found "import"' error.
bashpnpm run dev
Validation
To confirm the fix worked, ensure that your Vite project starts without any configuration errors and that the application runs as expected. Look for the absence of the specific error message in the console.
Sign in to verify this fix
1 low-confidence fix
Update Vite and Configure Package Manager Overrides
The error 'Expected identifier but found "import"' occurs due to a breaking change in esbuild version 0.24.1, which affects how Vite loads configuration files. This issue is resolved in Vite version 6.0.6 and later, which is compatible with the updated esbuild. The workaround involves setting package manager overrides to force the use of a specific esbuild version that is compatible with Vite.
Awaiting Verification
Be the first to verify this fix
- 1
Update Vite to Latest Version
Upgrade Vite to the latest version to ensure compatibility with esbuild. This can be done using your package manager.
bashpnpm add vite@latest - 2
Set Package Manager Overrides for esbuild
If you are using pnpm, set the overrides in your package.json to ensure that the correct version of esbuild is used. This will prevent conflicts with the Vite configuration loader.
json{ "pnpm": { "overrides": { "esbuild": "0.24.0" } } } - 3
For npm Users: Configure npm Overrides
If you are using npm, add the following overrides to your package.json to pin esbuild to a compatible version.
json{ "overrides": { "esbuild": "0.24.0" } } - 4
For yarn Users: Set Yarn Resolutions
If you are using yarn, add the following resolutions to your package.json to ensure that the correct version of esbuild is used.
json{ "resolutions": { "esbuild": "0.24.0" } } - 5
Test the Configuration
Run your Vite project to confirm that the configuration loads correctly without errors. If the issue persists, double-check the package manager settings and ensure that the correct versions are installed.
bashpnpm run dev
Validation
To confirm the fix worked, ensure that the Vite project starts without throwing the 'Expected identifier but found "import"' error. Check the console output for any errors during the build process.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep