#ReferenceError: React is not defined

2 messages · Page 1 of 1 (latest)

ionic oak
#

Everything works fine when running npm run dev, but after building the app with npm run build (building with Vite) and trying to visit the site I get ReferenceError: React is not defined
As far as I can tell I am importing React where I need to be
If I remove the <NextUIProvider> tags, the page loads fine. What am I not doing right?

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>React & NextUI</title>
</head>

<body>
    <div id="app"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>

</html>

// main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('app')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

// App.jsx

import * as React from 'react';
import { NextUIProvider } from '@nextui-org/react';
import { NavBar } from "./partials";

function App() {
    return (
      <NextUIProvider>
        <NavBar />
      </NextUIProvider>
    );
  }

export default App;
ionic oak
#

SOLVED

Solved by adding window.React = React after importing react DOM

import React from 'react';
import ReactDOM from 'react-dom/client';
window.React = React;