Minified React error in production with Vite.js
At work I inherited a really old website running on React.
The code was good but by old i mean really old; last commit was 3 years ago and most of the code was 5-6 years old…
So I converted it to TypeScript and ripped out the old babel/webpack build system and installed Vite to handle all the builds.
Everything went pretty smoothly and I got the site up and running with no errors in development mode.
When going to production is when things went sideways. Some pages crashed with the following error:
error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args=object&args= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at vc (vendor.93c27df6.js:23) at d (vendor.93c27df6.js:23) at vendor.93c27df6.js:23 at vendor.93c27df6.js:23 at Ts (vendor.93c27df6.js:23) at ul (vendor.93c27df6.js:23) at ic (vendor.93c27df6.js:23) at tc (vendor.93c27df6.js:23) at ql (vendor.93c27df6.js:23) at zl (vendor.93c27df6.js:23)
Some quick googling led me to a GitHub issue showing me that I was not alone with this bug.
Package problem number one
It seems that esbuild is checking for __esModule at runtime and rollup (which is used internally in Vite) is not.
So it will happen to any library that has an entry point with:
module.exports = require("./module");
Since a file exported this way does not include the ‘magic string’
__esModule as checked by generate-exports.js it’s not converted correctly.
In my case I had two librarys acting up; react-datetime which was imported locally like this:
import DateTime from "react-datetime"; which worked fine in Vite dev but not production.
Props to ntkoopman for the explanation.
User Haikyuu suggested using the following solution which is what I used in the end.
import DT from "react-datetime"; // @ts-ignore const DateTime = DT.default ? DT.default : DT;
Package problem number two
The second package with this issue was react-dropzone which in turn used the real culprit; attr-accept
Since the project used an old version (4.x.x, latest version is at the time of writing 14.x.x) and I got other issues upgrading to the latest version I could rule out a PR from me fixing it.
Solution number two
Instead I used patch-package and postinstall to create a patch-file with the fix.
//from import accepts from 'attr-accept'; //to import A from "attr-accept"; const accepts = A.default ? A.default : A;
I how this can help if someone is stuck, and I hope it will be fixed soon because it is kind of a blocker for using Vite.js in production.