Getting import error even if files there and also included in `nuxt.config.ts`
using bun as per as the quickstart guide in nuxt4 getting the following error:
2 Replies
Hi @Ash Blanc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources, there are several known issues with module resolution and imports in Nuxt 4, especially when using Bun as the runtime:
1. Bun Compatibility Issues: Multiple users have reported that Bun can cause problems with Nuxt 4 projects, particularly with module resolution. A common workaround is to install Node.js alongside Bun, as Bun may rely on Node for certain operations. Some users also suggest rolling back to an earlier version of Bun (e.g., 1.1.45) if you encounter issues, or simply switching to Node.js for development to avoid these problems entirely. After installing Node, the import errors were resolved for several users Nuxt dev server issues.
2. Path Aliases in Imports: In Nuxt config files (
nuxt.config.ts), you cannot use ~/ or @/ aliases for imports. You must use relative or absolute paths. This is a known limitation and is not specific to Bun, but it can cause confusion if you expect these aliases to work everywhere. For example, use:
instead of
Cannot find module - Nuxt 3, TypeScript
3. Directory Structure and Aliases: In Nuxt 4, the ~ alias refers to the app directory by default. If you place files outside of the expected structure or use incorrect aliases, Nuxt may fail to resolve them, especially for assets or CSS files. Make sure your files are in the correct directories and that your import paths match the new structure Cant read css file.
4. Workarounds and Recommendations:
- If you are using Bun and facing import errors, try installing Node.js and running your project with Node instead.
- Double-check your import paths in nuxt.config.ts and other config files—use relative paths, not aliases.
- Ensure your project structure matches Nuxt 4's expectations, especially for assets, CSS, and other resources.
If you continue to get import errors even after following these steps, it may be due to unresolved compatibility issues with Bun and Nuxt 4. In that case, switching to Node.js is the most reliable solution for now.
If you can provide the exact error message and the relevant code/configuration, I can help diagnose further. But based on the current knowledge sources, Bun is a likely cause of your import issues with Nuxt 4. Try running your project with Node.js to see if the problem persists.
Let me know if you need more specific troubleshooting!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@928583389404102706> Kapa.ai is still learning and improving, please let me know how I did by reacting below.