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

[aykxt]

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.

[callmeberzerker]

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

[callmeberzerker]

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

[aleclarson]

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

[aykxt]

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

Unfortunately the issue persists there too.

[thsorens]

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]

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]

@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]

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

[seanmthompson]

Im having this issue as well...

[lempira]

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]

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]

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"
  }
}