Vite + esbuild errors in Wasp dev mode
Hey everyone! 👋
I’m working on App, built with Wasp + OpenSaaS. I successfully deployed the app to production (runs fine), but in dev mode (wasp start), I’m getting Vite + esbuild errors:
[plugin:vite:esbuild] Transform failed with 3 errors:
ERROR: The symbol "inWebWorker" has already been declared
ERROR: The symbol "prevRefreshReg" has already been declared
ERROR: The symbol "prevRefreshSig" has already been declared
Things I’ve tried so far:
✅ wasp clean && rm -rf .wasp/out node_modules package-lock.json && npm install
✅ Running with --disable-hmr and --force-polling
✅ Tried downgrading to Node.js v20 (LTS), still no luck
I’m running Windows 11 + WSL (Ubuntu) with Node.js v22.
Has anyone faced this before? Any ideas on what might be causing this? Thanks! 🙌
8 Replies
Hi @LibanAbdullahi. 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 information provided in the knowledge sources, I can offer some insights and suggestions regarding your Vite + esbuild errors in Wasp dev mode:
1. Node.js Version:
The current version of Wasp requires Node.js 18. As mentioned in the Discord support thread, Wasp is planning to update the requirement to be >= 18 in the coming days, which will support Node.js 20. However, your use of Node.js v22 is not currently supported.
Recommendation: Install and use Node.js 18 with Wasp. You can use nvm (Node Version Manager) to manage multiple Node.js versions. Here's the relevant documentation: Wasp Quick Start Guide
2. WSL and File System:
There's a known issue with hot reloading in WSL when the project is on the Windows file system instead of the Linux file system. This is mentioned in the Discord support thread. While this might not be directly related to your esbuild errors, it's worth ensuring your project is on the Linux file system within WSL.
Recommendation: Make sure your code is on the Linux file system. You can refer to this guide for Wasp development on WSL: Guide to Windows Development with Wasp and WSL
3. Cleaning and Reinstalling:
You've already tried cleaning and reinstalling, which is a good troubleshooting step. If you haven't already, you might also try running
wasp clean in the app directory before wasp start, as suggested in another Discord thread.
4. Vite Configuration:
While not directly related to your error, it's worth noting that Wasp allows for custom Vite configurations. You can refer to this guide if you need to make any Vite-specific adjustments: Custom Vite Config in Wasp
Given the specific errors you're seeing with symbols being already declared, it seems like there might be a conflict or duplication in your project's dependencies or configurations. However, the knowledge sources don't provide specific information about these exact errors.
If the above suggestions don't resolve your issue, you might want to:
1. Double-check for any duplicate declarations in your code.
2. Ensure all your dependencies are compatible with the version of Wasp you're using.
3. Consider creating a minimal reproducible example and sharing it with the Wasp community for more targeted assistance.
Remember, using the correct Node.js version (18 for now) is crucial, so that should be your first step in troubleshooting this issue.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @LibanAbdullahi, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Did you configure something for something like a PWA? 🙂
No, I haven't explicitly configured anything for PWA. The project is based on the OpenSaaS template, and I haven't added any service worker or PWA-related code myself.
However, I did notice that the error occurs specifically with React refresh injecting duplicate code.
Hmm, could you tell a bit about what you are building? Are you doing anything "special" or something different from what you already in have Open Saas?
I'm building a job application assistant tool that helps users track applications, analyze resumes etc. It's mostly using the standard features from the OpenSaaS template - authentication, database entities, and some AI integration.
Nothing particularly special in terms of configuration - I'm using the standard Wasp setup with React, TypeScript, and Tailwind. I haven't added any service workers, offline capabilities, or custom build processes beyond what's in the template. Do you think any of these aspects could be contributing to the React refresh issues? Or is this more likely related to the WSL2/Windows environment?
Thank you for the detailed response, it does seem like it shouldn't be a problem. Hm. This is strange. Could you maybe try creating a super basic project e.g.
wasp new app-name and see if it runs?
If you want, you can share your project ZIP with me using something like https://www.transfernow.net/en (here or in DMs) so I maybe reproduce the bug if there is one : )
Regarding WSL, I always recommend checking this blog post: https://wasp.sh/blog/2023/11/21/guide-windows-development-wasp-wslTransferNow
Send Large Files - Free Secure File Transfer - TransferNow
TransferNow is a simple, quick and secure free solution to send large files and big documents up to 250 GB per transfer. No registration required.
@miho I found a solution to the React refresh issues! 🎉
The problem was duplicate React refresh code being injected into files. Fixed it by:
1. Adding @vitejs/plugin-react to devDependencies
2. Creating a minimal vite.config.ts that disables HMR overlay
3. Adding a client setup function that disables React refresh in dev mode
Everything works perfectly now.
Wohooo @LibanAbdullahi, you just became a Waspeteer level 1!