I am working on the Shopify node app and the front end works with Vite.
I am using Mobx 6 for state management with a structure like Mobx 5 and it is working fine in development mode but not working when I build it and try to deploy it on the server it shows an error.

ReferenceError: React is not defined
    at mobxreact.esm.js:416:18
    at ow (react-dom.production.min.js:157:137)
    at IE (react-dom.production.min.js:176:260)
    at BP (react-dom.production.min.js:269:165)
    at FP (react-dom.production.min.js:250:347)
    at r6 (react-dom.production.min.js:250:278)
    at Sf (react-dom.production.min.js:250:138)
    at X1 (react-dom.production.min.js:243:163)
    at react-dom.production.min.js:123:115
    at e.unstable_runWithPriority (scheduler.production.min.js:18:343)

and here is the other configurations

package file

{
  "name": "shopify-frontend-template-react",
  "version": "1.0.0",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "build": "vite build",
    "dev": "vite",
    "coverage": "vitest run --coverage"
  },
  "type": "module",
  "engines": {
    "node": ">= 12.16"
  },
  "stylelint": {
    "extends": "@shopify/stylelint-polaris"
  },
  "dependencies": {
    "@formatjs/intl-locale": "^3.3.2",
    "@formatjs/intl-localematcher": "^0.4.0",
    "@formatjs/intl-pluralrules": "^5.2.4",
    "@shopify/app-bridge": "^3.7.7",
    "@shopify/app-bridge-react": "^3.7.7",
    "@shopify/i18next-shopify": "^0.2.3",
    "@shopify/polaris": "^10.49.1",
    "@types/node": "^20.10.0",
    "@vitejs/plugin-react": "1.2.0",
    "antd": "^5.10.1",
    "axios-auth-refresh": "^3.3.6",
    "bootstrap": "^5.3.2",
    "clsx": "^2.0.0",
    "formik": "^2.4.5",
    "i18next": "^23.1.0",
    "i18next-resources-to-backend": "^1.1.4",
    "jsonwebtoken": "^9.0.2",
    "mobx": "^6.10.2",
    "mobx-react": "^9.1.1",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-bootstrap": "^2.9.0",
    "react-dom": "^17.0.2",
    "react-google-recaptcha": "^3.1.0",
    "react-i18next": "^13.0.0",
    "react-query": "^3.34.19",
    "react-router-dom": "^6.17.0",
    "react-textarea-autosize": "^8.5.3",
    "reactstrap": "^9.2.2",
    "sass": "^1.69.5",
    "simplebar-react": "^3.2.4",
    "vite": "^5.0.2",
    "vite-tsconfig-paths": "^4.2.1",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@shopify/stylelint-polaris": "^12.0.0",
    "history": "^5.3.0",
    "jsdom": "^19.0.0",
    "prettier": "^2.6.0",
    "stylelint": "^15.6.1",
    "vi-fetch": "^0.6.1"
  }
}

vie.config.js

import { defineConfig } from "vite";
import { dirname } from "path";
import { fileURLToPath } from "url";
import react from "@vitejs/plugin-react";

if (
  process.env.npm_lifecycle_event === "build" &&
  !process.env.CI &&
  !process.env.SHOPIFY_API_KEY
) {
  console.warn(
    "nBuilding the frontend app without an API key. The frontend build will not run without an API key. Set the SHOPIFY_API_KEY environment variable when running the build command.n"
  );
}

const proxyOptions = {
  target: `http://127.0.0.1:${process.env.BACKEND_PORT}`,
  changeOrigin: false,
  secure: true,
  ws: false,
};

const host = process.env.HOST
  ? process.env.HOST.replace(/https?:///, "")
  : "localhost";

let hmrConfig;
if (host === "localhost") {
  hmrConfig = {
    protocol: "ws",
    host: "localhost",
    port: 64999,
    clientPort: 64999,
  };
} else {
  hmrConfig = {
    protocol: "wss",
    host: host,
    port: process.env.FRONTEND_PORT,
    clientPort: 443,
  };
}

export default defineConfig({
  build: {
    sourcemap: 'inline',
  },
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV === 'production' ? 'production' : 'development'),
  },
  plugins: [react({ jsxRuntime: 'automatic' })],
  root: dirname(fileURLToPath(import.meta.url)),
  resolve: {
    preserveSymlinks: true,
    alias: {
      utils: '/utils',
      pages: '/pages',
      store: '/store',
      hooks: '/hooks',
      assets: '/assets',
      services: '/services',
      constants: '/constants',
      components: '/components',
    },
  },
  server: {
    host: "localhost",
    port: process.env.FRONTEND_PORT,
    hmr: hmrConfig,
    proxy: {
      "^/(\?.*)?$": proxyOptions,
      "^/api(/|(\?.*)?$)": proxyOptions,
      "^/webhooks(/|(\?.*)?$)": `http://127.0.0.1:${process.env.BACKEND_PORT}`,
    },
  },
});

store index file

import ObservableAuthStore from "./authStore/authStore";
import ObservableModalStore from "./modalStore/modalStore";
import ObservableGatewayStore from "./gateway/gatewayStore";
import ObservableShopifyStore from "./shopify/shopifyStore";
import ObservableTemplateStore from "./templateStore/templateStore";
import ObservableDashboardStore from "./dashboardStore/dashboardStore";

class RootStore {
  constructor() {
    this.authStore = ObservableAuthStore;
    this.modalStore = ObservableModalStore;
    this.gatewayStore = ObservableGatewayStore;
    this.shopifyStore = ObservableShopifyStore;
    this.templateStore = ObservableTemplateStore;
    this.dashboardStore = ObservableDashboardStore;
  }
}

export default RootStore;

inside store

import { makeAutoObservable, observable, runInAction } from "mobx";
import { getCustomers } from "services/index";
import React from "react";

class ObservableShopifyStore {

    customerList = [];
    response = undefined;


    getShopifyCustomers = async () => {
        const list = await getCustomers();
        try {
            runInAction(() => {
                this.customerList = list?.data;
            });
        } catch (error) {
            runInAction(() => {
                this.response = error;
            })
        }
        return this.customerList;
    }




    constructor() {
        makeAutoObservable(this, {
            customerList: observable,
        })
    }
}

export default new ObservableCustomerStore;

App.jsx

import React from 'react'
import { ConfigProvider } from "antd";
import { Provider } from "mobx-react";
import { Toaster } from "react-hot-toast";
import { loadState } from "./store/initial";
import { BrowserRouter } from "react-router-dom";
import AuthorizedPages from "./routes/Authorized";
import { toastConfig } from "./constants/constants";
import UnauthorizedPages from "./routes/Unauthorized";
import { AppBridgeProvider } from "components/providers";

import RootStore from "./store";

const state = new RootStore();
loadState(state);

export default function App() {
  const { token: isTokenAvailable } = state.authStore;

  return (
    <BrowserRouter>
      <ConfigProvider>
        <Provider store={state}>
          <AppBridgeProvider>
            <Toaster {...toastConfig} />
            {isTokenAvailable ? <AuthorizedPages /> : <UnauthorizedPages />}
          </AppBridgeProvider>
        </Provider>
      </ConfigProvider>
    </BrowserRouter>
  );
}

help to resolve the issue i can’t able to find what is the problem, i imported React in every file but still error occurs in production.