React crash (ReactCurrentDispatcher/ReactCurrentBatchConfig undefined) on Wasp 0.18
Hi everyone đź‘‹,
I’m running into a blocking issue after deploying my Wasp 0.18 project to AWS (EC2 with Docker).
In production, when loading the app in the browser I get:
Later I also tried running locally and now I see a very similar error:
This happens right when the frontend bundle starts (before any API call).
Backend and DB seem fine (no errors in logs).
Environment details:
Wasp 0.18
React 18 (declared in package.json)
React DOM 18 (same)
Using Docker for prod deploy on EC2
Nginx serves the assets fine, but the JS crashes instantly
Has anyone seen this error before with Wasp 0.18? Could this be caused by a mismatch between React/ReactDOM versions in the generated code or dependencies? Any advice on how to properly pin React for a Wasp project or avoid duplicate React installations would be really appreciated 🙏
Thanks!
2 Replies
Hi @mario.p. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your issue—errors like
Wasp has had issues with double installations of React, especially when restructuring projects or when dependencies are resolved from different places. This can happen if both your app and Wasp's SDK (or generated code) end up installing their own versions of React, leading to two React instances in your bundle. This is discussed in detail in this issue, where a double React installation caused a white screen and console errors. The temporary fix was to delete the redundant React installation and Vite's cache. 2. Dependency Version Mismatch
If your
Sometimes, the way dependencies are resolved in production (e.g., via Docker, Nginx, or different node_modules structure) can surface these issues even if things work in development. What You Can Do - Ensure Single React Version
Make sure that only one version of React and ReactDOM is installed and used throughout your project. Check both your root
You must use the exact React version that Wasp expects. If you specify a different version, Wasp will throw an error or, worse, you may get runtime issues if it slips through (details here). - Clean and Reinstall
Try deleting all
If you suspect a double installation, follow the advice from this issue: delete redundant React installations and Vite's cache. - NPM Workspaces
There is a suggestion to use NPM workspaces to avoid multiple React instances (see here), but this is not yet implemented in Wasp. Summary Yes, this error can be caused by a mismatch or double installation of React/ReactDOM in Wasp projects. The best practice is to ensure you are using the exact React version Wasp expects and that only one instance of React is present in your final bundle. If you continue to have issues, check for double installations and clean your environment as described above. If you need to use a different React version, currently Wasp does not support this directly, but there are plans to allow it via npm aliases in the future (see here). If you need more specific troubleshooting steps, please provide your
Cannot read properties of undefined (reading 'ReactCurrentBatchConfig') or 'ReactCurrentDispatcher'—is a classic symptom of having multiple versions of React loaded in your app, or a mismatch between React and ReactDOM versions. This is a known problem in the React ecosystem, especially when using tools that generate or manage dependencies, like Wasp.
Possible Causes in Wasp
1. Duplicate React InstallationsWasp has had issues with double installations of React, especially when restructuring projects or when dependencies are resolved from different places. This can happen if both your app and Wasp's SDK (or generated code) end up installing their own versions of React, leading to two React instances in your bundle. This is discussed in detail in this issue, where a double React installation caused a white screen and console errors. The temporary fix was to delete the redundant React installation and Vite's cache. 2. Dependency Version Mismatch
If your
package.json specifies a different version of React than what Wasp expects or generates, you can run into conflicts. Wasp currently requires you to use the same version of dependencies like React as it does, otherwise you get an error. There is an open issue to allow specifying different versions via npm aliases, but as of now, you must match Wasp's version to avoid problems (see here).
3. Production Build DifferencesSometimes, the way dependencies are resolved in production (e.g., via Docker, Nginx, or different node_modules structure) can surface these issues even if things work in development. What You Can Do - Ensure Single React Version
Make sure that only one version of React and ReactDOM is installed and used throughout your project. Check both your root
node_modules and any generated .wasp or subproject folders for extra React installations.
- Match Wasp's React VersionYou must use the exact React version that Wasp expects. If you specify a different version, Wasp will throw an error or, worse, you may get runtime issues if it slips through (details here). - Clean and Reinstall
Try deleting all
node_modules, package-lock.json, and any generated .wasp folders, then reinstall everything:
For Docker, ensure your Dockerfile does not cache old node_modules or install dependencies in multiple places.
- Check for Double InstallationIf you suspect a double installation, follow the advice from this issue: delete redundant React installations and Vite's cache. - NPM Workspaces
There is a suggestion to use NPM workspaces to avoid multiple React instances (see here), but this is not yet implemented in Wasp. Summary Yes, this error can be caused by a mismatch or double installation of React/ReactDOM in Wasp projects. The best practice is to ensure you are using the exact React version Wasp expects and that only one instance of React is present in your final bundle. If you continue to have issues, check for double installations and clean your environment as described above. If you need to use a different React version, currently Wasp does not support this directly, but there are plans to allow it via npm aliases in the future (see here). If you need more specific troubleshooting steps, please provide your
package.json and the output of npm ls react from both your root and any subfolders.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @mario.p, 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?This issue has been resolved, you need to upgrade to 0.18.1: https://discord.com/channels/686873244791210014/686873245428875297/1428717410625785909