DEV Community

Rushab jain
Rushab jain

Posted on

Error: Minified React error #130 in vite Projects

Show me the fix
If you've encountered the Error: Minified React error #130 in your production environment, but not in your dev environment and you are migrating (from CRA) or using "Vite" it is frustrating trying to figure out what the issue is The error itself is quite vague, as it is displayed by minified React rather than any specific React error.i had spent a lot of time debugging this because i made the fundamental mistake of not following the debugging steps.
lets go through the steps which i should have followed in the first place-

  1. Debug the app and get more details. To do this, use minify, sourcemap, and dev mode in your vite.config.js file:
export default defineConfig({
  plugins: [reactRefresh()],
  mode: "development",
  build: {
    minify: false,
    sourcemap: true 
  }
});
Enter fullscreen mode Exit fullscreen mode

You may be able to pinpoint the buggy code by inspecting the console.eg

  1. If you can't find the buggy code, try reproducing the bug with minimal code. Start by commenting out imports and their dependent code. This error often occurs in older npm libraries, so start with the oldest library you are using in package.json. This can be time-consuming, but it's worth it to find the root cause of the issue.

  2. Once you've identified the problematic npm library, you have two options: update the package to the latest version and see if the bug is fixed, or use the hack suggested by the maintainers:

Workaround

import Something from "library";
const UseThis = Something.default ? Something.default : Something;
Enter fullscreen mode Exit fullscreen mode

OR

import RPI from "react-phone-input-2";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const ReactPhoneInput = RPI.default ?? RPI;
Enter fullscreen mode Exit fullscreen mode

Or like me you may also choose to delete the dependency from your project altogether.


Why this occurred

The root problem is that many packages follow a bad practice that breaks Rollup ESM-CJS interop - sodatea
and Vite (which uses Rollup) handles default exports differently than CRA (which uses webpack or esbuild)

This is an open issue in the Vite repo This is an open, so if any future updates resolve it i will update this blog.

Top comments (0)