Minified React error #130 or jsxDevRuntime.exports.jsxDEV is not a function

[n8sabes]

I'm stuck and would appreciate some help resolving a production build problem with a ViteJS React Typescript project I'm porting from CRA to ViteJS. I cannot find any posts on the topic of how to debug this situation.

My project runs perfectly with yarn dev, however it crashes in the browser when serving the production build yarn build && yarn serve and there is so little information available that I cannot tack the origin of the problem. The error is:

react_devtools_backend.js:2540 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.

After some searching, I found a recommendation to change the vite.config.ts to help debug what is failing in a build situation. The recommend vite.config.ts is:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  mode: "development",
  build: {
    minify: false,
  }
})

However, when attempting a build and serve this configuration, I get the following error. I have verified a boilerplate ViteJS starter project also produces this error with the above configuration.

Uncaught TypeError: jsxDevRuntime.exports.jsxDEV is not a function at index.e025178a.js:1045 (anonymous) @ index.e025178a.js:1045

Upon inspection of the generated code running in the browser, the ReactDOM.render call is transformed to jsxDevRuntime.exports.jsxDEV whereas jsxDEV is undefined.

ReactDOM.render(/* @__PURE__ */ jsxDevRuntime.exports.jsxDEV(React.StrictMode, {
  children: /* @__PURE__ */ jsxDevRuntime.exports.jsxDEV(App, {}, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 9,
    columnNumber: 5
  }, globalThis)
}, void 0, false, {
  fileName: _jsxFileName,
  lineNumber: 8,
  columnNumber: 3
}, globalThis), document.getElementById("root"));

This is where I am stuck and would appreciate some help.

1. How can I debug why the production build is failing?
2. How can I get the development mode in a build so it can be debugged with more meaningful output?

[n8sabes]

I just found Issue #2139 from back in February that discusses this problem. Unfortunately, it's November and there's still no practical solution in sight. As others stated in #2139, migrating from Create React App (CRA) to ViteJS seems not possible. I am puzzled how ViteJS can be used at all for React without hacking all kinds of popular packages. 🤔

If anybody knows how to identify the (one, or potentially many) offending libraries that exist in a mature CRA project along with a clean workaround, please advise.

Unfortunately after a few days attempting to migrate to ViteJS, it looks like rolling back CRA with slow-n-painful builds is the only choice. 😢

[SJanJan]

The question gives you the opportunity to submit pr.

[lidaof]

got same problem...seems only way to to use CRA again

[Lani]

I managed to solve this for our project by adding the @babel/plugin-transform-react-jsx plug-in:

import react from '@vitejs/plugin-react';

export default defineConfig(({ mode }) => {
  return {
    resolve: {
      alias: {
       // I needed this to make dev mode work.
        'react/jsx-runtime': 'react/jsx-runtime.js',
      },
    },
    plugins: [react({
      babel: {
        plugins: [
          ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }],
        ]
      },
    })],
  };
});

Click to expand for my full config!

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import commonjs from '@rollup/plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, 'env');
  const htmlPlugin = () => {
    return {
      name: 'html-transform',
      // Replace %VITE_X% env variables in index.html.
      transformIndexHtml(html: string) {
        return html.replace(/%(.*?)%/g, function match(_match, p1) {
          return env[p1];
        });
      },
    };
  };

  return {
    resolve: {
      alias: {
        'react/jsx-runtime': 'react/jsx-runtime.js',
      },
    },
    define: {
      'process.env': process.env,
    },
    build: {
      outDir: './build',
      rollupOptions: {
        plugins: [commonjs()],
      },
      commonjsOptions: {
        exclude: [/./],
      },
    },
    publicDir: './public',
    plugins: [htmlPlugin(), react({
      babel: {
        plugins: [
          ['@babel/plugin-proposal-decorators', { legacy: true }],
          ['@babel/plugin-proposal-class-properties', { loose: false }],
          'babel-plugin-transform-typescript-metadata',
          'babel-plugin-parameter-decorator',
          ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }],
        ]
      },
    })],
    server: {
      fs: {
        // Allow serving files from workspace root, the fonts are for some reason fetched from there!
        allow: ['../..'],
      },
    },
  };
});

I hope that it also could work for you, or someone else with the same problem.

[Pixele9]

I solved this by doing something like this:
require('./components/Home').default

By exporting as default and then importing as
import Home from './components/Home'

[renatogabrielbr]

I was able to solve mine removing NODE_ENV=noMatterTheValue from .env files

[digivorefr]

When my NODE_ENV is set to development, build fails.
When my NODE_ENV is set to production, build succeeds.

[dangenendt]

Same here. Wtf?

[digivorefr]

Related issue with solution found here #5885 (comment)

It worked for me.

[ndungtse]

I had the same problem but it looks like it was caused by some packages, in my case it was react-phone-input-2 I removed it and used other input and works ( no error in production)

[tonyrizzotto]

So I did stumble across this issue today with getting a production react build working with SSR. The issue exists in the jsxRuntime configuration, which is part of the react plugin from @vitejs/plugin-react v.3.1.0

I found this in the plugins typescript file:

    /**
     * Set this to `"automatic"` to use [vite-react-jsx](https://github.com/alloc/vite-react-jsx).
     * @default "automatic"
     */
    jsxRuntime?: 'classic' | 'automatic';

By default, the config is set to jsxRuntime: 'automatic', which forces the usage of a package called vite-react-jsx for the source management, which according to the home page is now archived (no longer maintained), since esbuild can handle jsx natively now.

This appears to be something they fixed for the next major version as the jsxRuntime option will be deprecated. Link to PR: vitejs/vite-plugin-react#131

Anyway, the v3.1.0 fix will be to apply the config to your plugins option in your vite.config.js:

plugins: [react({ jsxRuntime: 'classic' })],

or use the suggestion above related to the Babel Transform.

This is also listed under the opt-out for the config: https://www.npmjs.com/package/@vitejs/plugin-react

Also, for those curious about the difference in runtimes:
TLDR: With this runtime enabled, the functions that JSX compiles to will be imported automatically.

https://babeljs.io/docs/babel-plugin-transform-react-jsx

[janderson099]

My solution:

Create an env file in the root of the project.: .env.production

Add the NODE_ENV to it: NODE_ENV=production

Save and build the solution.

I hope it helps.

[smyja]

i am still getting the error

[abecks]

@janderson099 's solution works, but Vite gives the warning NODE_ENV=production is not supported in the .env file. and the jsxRuntime option is now deprecated.

My .env file had NODE_ENV=development in it which caused the output of vite build --outDir dist/ssr/funnels --config=vite.config.funnels.ts --ssr client-funnels/entry-server.ts --mode production to build a file that imports jsxDEV instead of jsx from react/jsx-runtime

the solution was to rename .env to .env.development

[holyspiritomb]

@abecks 's solution worked for me. Thank you!