DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Fredrik Bergqvist
Fredrik Bergqvist

Posted on • Originally published at bergqvist.it

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)
Enter fullscreen mode Exit fullscreen mode

Some quick googling led me to a GitHub issue showing me that I was not the only one experiencing 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.

Solution

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.