`Uncaught ReferenceError: React is not defined` in production build #10

aykxt · 2021-07-20T15:19:30Z

I get an Uncaught ReferenceError: React is not defined error, when rendering the DateTimePicker component from @material-ui/pickers. This error happens only in production build and not in the dev server.

The text was updated successfully, but these errors were encountered:

callmeberzerker · 2021-07-27T15:53:11Z

Yes I am experiencing the same issue exactly with @material-ui/pickers

callmeberzerker · 2021-07-27T16:02:42Z

I created the following issue as well, because I am not certain who is causing it. mui/material-ui#27473

aleclarson · 2021-09-22T19:31:40Z

Can you see if this issue is fixed by using @vitejs/plugin-react?

aykxt · 2021-09-23T18:32:57Z

Can you see if this issue is fixed by using @vitejs/plugin-react?

Unfortunately the issue persists there too.

thsorens · 2021-10-28T09:08:35Z

Calendar.prototype.render = function () { var _a = this.state, currentMonth = _a.currentMonth, slideDirection = _a.slideDirection; var _b = this.props, classes = _b.classes, allowKeyboardControl = _b.allowKeyboardControl, leftArrowButtonProps = _b.leftArrowButtonProps, leftArrowIcon = _b.leftArrowIcon, rightArrowButtonProps = _b.rightArrowButtonProps, rightArrowIcon = _b.rightArrowIcon, loadingIndicator = _b.loadingIndicator; var loadingElement = loadingIndicator ? loadingIndicator : React.createElement(CircularProgress_1.default, null); return (React.createElement(React.Fragment, null, allowKeyboardControl && this.context !== 'static' && (React.createElement(KeyDownListener, { onKeyDown: this.handleKeyDown })), React.createElement(CalendarHeader_1.default, { currentMonth: currentMonth, slideDirection: slideDirection, onMonthChange: this.handleChangeMonth, leftArrowIcon: leftArrowIcon, leftArrowButtonProps: leftArrowButtonProps, rightArrowIcon: rightArrowIcon, rightArrowButtonProps: rightArrowButtonProps, disablePrevMonth: this.shouldDisablePrevMonth(), disableNextMonth: this.shouldDisableNextMonth() }), React.createElement(SlideTransition_1.default, { slideDirection: slideDirection, transKey: currentMonth.toString(), className: classes.transitionContainer }, React.createElement(React.Fragment, null, (this.state.loadingQueue > 0 && (React.createElement("div", { className: classes.progressContainer }, loadingElement))) || React.createElement("div", null, this.renderWeeks()))))); };

Everything seems to be transpiled correctly when processing the vendor-bundle, except the React.Fragment reference.

Final code:

return react.exports.createElement(React.Fragment, null ....
In my bundle, Fragment is defined as ua, and this line should probably have been:

return react.exports.createElement(Ra('ua'), ....)
Where Ra is a function that returns different types, ex Fragment. (Trying to read minfied stuff is not that easy, so i might be mistaken about the exact reference it should have had. But React.Fragment shouldnt have leaked directly into the vendor-bundle after being built by vite/esbuild.

Pernick · 2021-11-10T08:27:07Z

I have the same issue using @vitejs/plugin-react with react-custom-scrollbars/react-custom-scrollbars-2. The issue there seems to be that it is using React.createElement instead of _react3 which is used in other calls.

react-custom-scrollbars-2 is importing React helper functions here:
https://github.com/RobPethick/react-custom-scrollbars-2/blob/master/src/Scrollbars/index.js#L3

In the output generated it creates variable var _react3 = react.exports; which is used for the Component and cloneElement from the imports in react-custom-scrollbars-2. But the createElement function is not using this var and calls React.createElement. Has anyone encountered this? It seems to be the same issue @thsorens is experiencing with React.Fragment reference not beign transpiled correctly.

luxferrew · 2021-12-29T09:04:14Z

@Pernick
Maybe I find the solution...

material-ui@v4/pickers
vite
vitejs/plugin-react(v1.1.3)

I tried any solution ways in other similar issue(in material-ui vite rollup vitejs/plugin-react ....) but it not work.

then... I find a suspicious point in the plugin @vitejs/plugin-react , src/index.tsx:

const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React(,|\s+)/

this RegE can not match the React__default in the @material-ui/pickers/esm/CalendarXXX file(if you're using material-ui@v4).

I try this vite config(resolve.alias):

{
    find: /^@material-ui\/pickers/,
    replacement: path.resolve(
        __dirname,
        './node_modules/@material-ui/pickers/dist/material-ui-pickers.js',
    ),
},

to replace esm file, and work well .

Maybe your problems could use the same way like this. Just pay attention to the vitejs/plugin-react(if you use...)

ChuckJonas · 2022-01-07T04:50:16Z

I get this same issue, but in my dev build...

seanmthompson · 2022-02-02T18:34:53Z

Im having this issue as well...

lempira · 2022-02-09T19:33:29Z

I ran into the same issue. Like others, I suspect the culprit package is @material-ui/pickers. I was able to fix this by choosing the "classic" option for the jsxRuntime in the react plugin definition. I'll probably upgrade to material v5 at some point. That seems to fix other issues I have been having.

The fix

react({
  jsxRuntime: 'classic'
})

My deps for reference:

"dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@material-ui/core": "^4.5.2",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "axios": "^0.24.0",
    "d3": "^7.2.1",
    "date-fns": "^2.13.0",
    "history": "^4.10.1",
    "leaflet": "^1.7.1",
    "moment": "^2.24.0",
    "framer-motion": "^5.5.5",
    "plotly.js": "^2.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-grid-layout": "^1.3.0",
    "react-icons": "^4.3.1",
    "react-leaflet": "^3.2.2",
    "react-plotly.js": "^2.5.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-table": "^7.7.0",
    "web-vitals": "^2.1.2"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.2.0",
    "vite": "^2.8.0"
  }

marek-sed · 2022-02-21T14:38:26Z

Hi guys, we also ran into this issue with @chakra-ui and chakra-ui-steps.
Can any one provide an advice how to handle this, using option runtime classic does not help, also the older versions

the failing example is here.
https://stackblitz.com/edit/vitejs-vite-syu3ve?file=src/App.tsx

if anyone can provide some guidance would be great.
thx

edit after couple of hours of playing with it, found config that actually works, but would love to no why is @vitejs/react-plugin not needed for production build. Also how to identify library that is not supported by vite.

export default defineConfig(({ mode }) => ({
  plugins: mode === "development" ? [react()] : [],
  esbuild: {
    jsxInject: `import * as React from 'react'`,
  },
}));

FreddyAilogic · 2022-04-20T12:14:33Z

I had the same problem, after migrating from CRA to Vite, still unable to solved:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "vite.config.ts"]
}

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  build: {
    outDir: 'build'
  },
  plugins: [react()],
  resolve: {
    alias: [
      {
        // This template is using src/ imports, so we changed it
        find: 'src',
        replacement: resolve(__dirname, 'src')
      }
    ]
  }
}));

package.json

{
  "name": "react-admin-dashboard",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "build:container": "cross-env NODE_OPTIONS=--max_old_space_size=10000 tsc && vite build",
    "serve": "vite preview",
    "lint": "eslint .",
    "lint:fix": "eslint --fix",
    "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json}\" --config ./.prettierrc",
    "clean": "rimraf ./build"
  },
  "dependencies": {
    "@auth0/auth0-spa-js": "1.19.2",
    "@emotion/react": "11.6.0",
    "@emotion/styled": "11.6.0",
    "@fullcalendar/core": "5.10.1",
    "@fullcalendar/daygrid": "5.10.1",
    "@fullcalendar/interaction": "5.10.1",
    "@fullcalendar/list": "5.10.1",
    "@fullcalendar/react": "5.10.1",
    "@fullcalendar/timegrid": "5.10.1",
    "@mui/core": "^5.0.0-alpha.54",
    "@mui/icons-material": "5.1.1",
    "@mui/lab": "5.0.0-alpha.55",
    "@mui/material": "5.1.1",
    "@mui/styles": "5.1.1",
    "@reduxjs/toolkit": "1.6.2",
    "@types/jsonwebtoken": "8.5.5",
    "@types/nprogress": "0.2.0",
    "@types/numeral": "2.0.2",
    "@types/react": "17.0.29",
    "@types/react-beautiful-dnd": "13.1.2",
    "@types/react-dom": "17.0.9",
    "@types/react-gauge-chart": "0.3.1",
    "@types/react-redux": "7.1.19",
    "@types/react-router-dom": "5.3.1",
    "@types/react-simple-maps": "1.0.6",
    "@types/uuid": "8.3.1",
    "apexcharts": "3.30.0",
    "aws-amplify": "4.3.7",
    "axios": "0.24.0",
    "axios-mock-adapter": "1.20.0",
    "chart.js": "2.9.4",
    "clsx": "1.1.1",
    "country-flag-icons": "1.4.14",
    "date-fns": "2.25.0",
    "firebase": "9.4.1",
    "formik": "2.2.9",
    "formik-mui": "^4.0.0-alpha.3",
    "formik-mui-lab": "^1.0.0-alpha.3",
    "history": "5.1.0",
    "i18next": "21.5.2",
    "i18next-browser-languagedetector": "6.1.2",
    "jsonwebtoken": "8.5.1",
    "notistack": "2.0.3",
    "nprogress": "0.2.0",
    "numeral": "2.0.6",
    "prop-types": "15.7.2",
    "react": "^17.0.2",
    "react-apexcharts": "1.3.9",
    "react-beautiful-dnd": "13.1.0",
    "react-chartjs-2": "2.11.1",
    "react-circular-progressbar": "2.0.4",
    "react-countup": "6.1.0",
    "react-custom-scrollbars-2": "4.4.0",
    "react-dom": "^17.0.2",
    "react-dropzone": "11.4.2",
    "react-gauge-chart": "0.4.0",
    "react-helmet-async": "1.1.2",
    "react-i18next": "11.14.2",
    "react-quill": "2.0.0-beta.4",
    "react-redux": "7.2.6",
    "react-router": "6.0.0-beta.0",
    "react-router-dom": "6.0.0-beta.0",
    "react-simple-maps": "2.3.0",
    "react-sparklines": "^1.7.0",
    "react-syntax-highlighter": "15.4.5",
    "redux": "4.1.2",
    "redux-devtools-extension": "2.13.9",
    "redux-thunk": "2.4.0",
    "stylis": "4.0.10",
    "stylis-plugin-rtl": "2.1.1",
    "swiper": "6.8.4",
    "uuid": "8.3.2",
    "web-vitals": "2.1.2",
    "yup": "0.32.11"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vitejs/plugin-react": "^1.3.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.11.0",
    "eslint-config-airbnb-typescript": "^16.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "prettier": "^2.5.0",
    "typescript": "4.4.4",
    "vite": "^2.9.5"
  }
}

ulexxander · 2022-04-21T07:56:57Z

I am experiencing the same issue on version 1.2.0

leonbloy · 2022-05-02T20:23:25Z

Same issue here, with react 17, mui 4.12.3 , @material-ui/pickers 3.3.10

The fix from #issuecomment-1034120883 ( jsxRuntime: 'classic', ) worked for me.

TemaSM · 2022-05-05T02:02:14Z

Same issue

"react": "^17.0.2",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.11.3-deprecations.1",
"@material-ui/pickers": "^3.3.10",

This helped me somehow:

delete node_modules folder at root of your project
update vite to ^2.9.8 or newer
update @vitejs/plugin-react to ^1.3.2 or newer
Oneliner:
npm: npm i -D vite@^2.9.8 @vitejs/plugin-react@^1.3.2
pnpm: pnpm add -D vite@^2.9.8 @vitejs/plugin-react@^1.3.2

If didn't helped you, then remove package-lock.json / yarn.lock / .pnpm-lock.yaml files and try again 3 steps above, starting from 1.

Probably related to:
vitejs/vite-plugin-react#15
vitejs/vite#6537
vitejs/vite#6838

JCMais · 2022-07-19T23:25:15Z

Did anyone find a workaround for this issue?

Fix by change vite config Make us able to deploy our application as website alloc/vite-react-jsx#10 (comment)

Pernick mentioned this issue Nov 10, 2021

@vitejs/plugin-react - Inconsistent vendor reference vitejs/vite#5608

Closed

7 tasks

Stephan-C mentioned this issue Jan 19, 2022

@vitejs/plugin-react@1.1.4: ReferenceError: React is not defined when rendering a Dialog-component from @mui/material vitejs/vite#6537

Closed

7 tasks

Kenchu123 mentioned this issue Feb 23, 2022

EDITOR-#146 FrameList Error rendering on production. (React is not defined) NTUEELightDance/LightDance-Editor#147

Merged

1 task

Digital-Coder mentioned this issue Jul 24, 2022

React Vite compatibility fullcalendar/fullcalendar-react#150

Closed

Kamigami55 added a commit to Kamigami55/toefl-speaking-learner that referenced this issue Aug 1, 2022

Fix vite standalone deploy as website bug

6382ba3

Fix by change vite config Make us able to deploy our application as website alloc/vite-react-jsx#10 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`Uncaught ReferenceError: React is not defined` in production build #10

`Uncaught ReferenceError: React is not defined` in production build #10

aykxt commented Jul 20, 2021

callmeberzerker commented Jul 27, 2021

callmeberzerker commented Jul 27, 2021

aleclarson commented Sep 22, 2021

aykxt commented Sep 23, 2021

thsorens commented Oct 28, 2021 •

edited

Pernick commented Nov 10, 2021 •

edited

luxferrew commented Dec 29, 2021 •

edited

ChuckJonas commented Jan 7, 2022

seanmthompson commented Feb 2, 2022

lempira commented Feb 9, 2022

marek-sed commented Feb 21, 2022 •

edited

FreddyAilogic commented Apr 20, 2022

ulexxander commented Apr 21, 2022

leonbloy commented May 2, 2022

TemaSM commented May 5, 2022 •

edited

JCMais commented Jul 19, 2022

Uncaught ReferenceError: React is not defined in production build #10

Uncaught ReferenceError: React is not defined in production build #10

Comments

aykxt commented Jul 20, 2021

callmeberzerker commented Jul 27, 2021

callmeberzerker commented Jul 27, 2021

aleclarson commented Sep 22, 2021

aykxt commented Sep 23, 2021

thsorens commented Oct 28, 2021 • edited

Pernick commented Nov 10, 2021 • edited

luxferrew commented Dec 29, 2021 • edited

ChuckJonas commented Jan 7, 2022

seanmthompson commented Feb 2, 2022

lempira commented Feb 9, 2022

marek-sed commented Feb 21, 2022 • edited

FreddyAilogic commented Apr 20, 2022

ulexxander commented Apr 21, 2022

leonbloy commented May 2, 2022

TemaSM commented May 5, 2022 • edited

JCMais commented Jul 19, 2022

`Uncaught ReferenceError: React is not defined` in production build #10

`Uncaught ReferenceError: React is not defined` in production build #10

thsorens commented Oct 28, 2021 •

edited

Pernick commented Nov 10, 2021 •

edited

luxferrew commented Dec 29, 2021 •

edited

marek-sed commented Feb 21, 2022 •

edited

TemaSM commented May 5, 2022 •

edited