From 9bf98ab53a306e144af17d5514bf09eb714f4a75 Mon Sep 17 00:00:00 2001
From: ckt1031 <65409152+ckt1031@users.noreply.github.com>
Date: Sat, 8 Jul 2023 07:52:37 +0000
Subject: [PATCH] Fix vite react variable issue

---
 web/package.json   |  7 +++---
 web/vite.config.js | 56 +++++++++++++++++-----------------------------
 2 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/web/package.json b/web/package.json
index b72262bd..89c2a2f6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,10 +17,9 @@
     "semantic-ui-react": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite preview --host 0.0.0.0",
+    "build": "vite build",
+    "dev": "vite dev"
   },
   "eslintConfig": {
     "extends": [
diff --git a/web/vite.config.js b/web/vite.config.js
index 5a3c43ab..19b4ebeb 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -1,44 +1,30 @@
-import fs from "node:fs";
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import * as esbuild from "esbuild";
+import fs from 'fs/promises';
 
-const sourceJSPattern = /\/src\/.*\.js$/;
-const rollupPlugin = (matchers) => ({
-  name: "js-in-jsx",
-  load(id) {
-    if (matchers.some(matcher => matcher.test(id))) {
-      const file = fs.readFileSync(id, { encoding: "utf-8" });
-      return esbuild.transformSync(file, { loader: "jsx" });
-    }
-  }
-});
-
-export default defineConfig({
-  plugins: [
-    react()
-  ],
-  build: {
-    outDir: "./build",
-    rollupOptions: {
-      plugins: [
-        rollupPlugin([sourceJSPattern])
-      ],
-    },
-    commonjsOptions: {
-      transformMixedEsModules: true,
-    },
+export default defineConfig(() => ({
+  plugins: [react()],
+  esbuild: {
+    loader: "jsx",
+    include: /src\/.*\.jsx?$/,
+    // loader: "tsx",
+    // include: /src\/.*\.[tj]sx?$/,
+    exclude: [],
   },
   optimizeDeps: {
     esbuildOptions: {
-      loader: {
-        ".js": "jsx",
-      },
+      plugins: [
+        {
+          name: "load-js-files-as-jsx",
+          setup(build) {
+            build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
+              loader: "jsx",
+              contents: await fs.readFile(args.path, "utf8"),
+            }));
+          },
+        },
+      ],
     },
   },
-  esbuild: {
-    loader: "jsx",
-    include: [sourceJSPattern],
-    exclude: [],
-  },
-});
+}));
\ No newline at end of file