Merge pull request #1579 from IntersectMBO/fix/fix-vite-package-trans…

…form

[#1583] fix: fix frontend build

CHANGELOG.md

@@ -107,6 +107,7 @@ changes.
 - Fix app crash on voting on the GA without the connected wallet before [Issue 1313](https://github.com/IntersectMBO/govtool/issues/1313)
 - Fix the navigation to Home from Proposal pillar on disconnected wallet [Issue 1355](https://github.com/IntersectMBO/govtool/issues/1355)
 - Fix navigation over Proposal discussion forum pillar [Issue 1436](https://github.com/IntersectMBO/govtool/issues/1436)
+- Fix building the frontend image [Issue 1583](https://github.com/IntersectMBO/govtool/issues/1583)
 
 ### Changed
 

govtool/frontend/Dockerfile

@@ -9,7 +9,7 @@ ARG NPMRC_TOKEN
 ARG VITE_USERSNAP_SPACE_API_KEY
 ARG VITE_IS_PROPOSAL_DISCUSSION_FORUM_ENABLED='false'
 
-ENV NODE_OPTIONS=--max_old_space_size=4096
+ENV NODE_OPTIONS=--max_old_space_size=8192
 WORKDIR /src
 
 # Set npm configuration settings using environment variables

govtool/frontend/package.json

@@ -80,7 +80,7 @@
     "@types/react-gtm-module": "^2.0.2",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^1.5.0",
     "@vitest/ui": "^1.1.0",
     "chromatic": "^11.3.0",

govtool/frontend/vite.config.ts

@@ -1,40 +1,27 @@
 import path from "path";
-import {
-  defineConfig as defineViteConfig,
-  mergeConfig,
-  transformWithEsbuild,
-} from "vite";
+import { defineConfig as defineViteConfig, mergeConfig } from "vite";
 import { defineConfig as defineVitestConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
+import babel from "vite-plugin-babel";
 
 // https://vitejs.dev/config/
 const viteConfig = defineViteConfig({
   plugins: [
-    {
-      name: "jsx-in-js-transformer",
-      async transform(code, id) {
-        if (!id.match(/.*\.js$/)) return null;
-
-        // Use the exposed transform from vite, instead of directly
-        // transforming with esbuild
-        return transformWithEsbuild(code, id, {
-          loader: "jsx",
-          jsx: "automatic",
-        });
-      },
-    },
     react(),
+    // Transpile @intersect.mbo packages as they provides jsx in js which is not supported in vite.
+    babel({
+      include: [
+        "node_modules/@intersect.mbo/**/*.js",
+        "node_modules/@intersect.mbo/**/*.jsx",
+      ],
+      exclude: /node_modules\/@intersect\.mbo\/.*\/node_modules\/.*/, // Exclude nested node_modules
+      babelConfig: {
+        presets: ["@babel/preset-react"],
+      },
+    }),
   ],
   cacheDir: ".vite",
-  optimizeDeps: {
-    force: true,
-    include: ["@intersect.mbo/**/*"],
-    esbuildOptions: {
-      loader: {
-        ".js": "jsx",
-      },
-    },
-  },
+  // Required for the @intersect.mbo packages as they uses the .env from process which is not supported in vite.
   define: {
     "process.env": {},
   },

govtool/frontend/yarn.lock

@@ -1471,6 +1471,21 @@
   resolved "https://registry.npmjs.org/@emurgo/cardano-serialization-lib-asmjs/-/cardano-serialization-lib-asmjs-12.0.0-alpha.29.tgz"
   integrity sha512-E9+jGLo8QciXbkb7dDYEbZL6YlEJfNRwzYkyR4kkuvzAsy0uKe93dtAY1tdj6ECp+NyeH5xqyKU6aUT8rxwm7A==
 
+"@esbuild/[email protected]":
+  version "0.18.20"
+  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+
+"@esbuild/[email protected]":
+  version "0.19.12"
+  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz"
+  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
+
+"@esbuild/[email protected]":
+  version "0.20.2"
+  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz"
+  integrity sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==
+
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -2622,10 +2637,15 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/[email protected]":
+"@rollup/[email protected]":
+  version "4.18.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz"
+  integrity sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==
+
+"@rollup/[email protected]":
   version "4.18.0"
-  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz"
-  integrity sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz"
+  integrity sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==
 
 "@rushstack/eslint-patch@^1.1.0":
   version "1.10.3"
@@ -3667,6 +3687,16 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@swc/[email protected]":
+  version "1.5.25"
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.25.tgz"
+  integrity sha512-LwbJEgNT3lXbvz4WFzVNXNvs8DvxpoXjMZk9K9Hig8tmZQJKHC2qZTGomcyK5EFzfj2HBuBXZnAEW8ZT9PcEaA==
+
+"@swc/[email protected]":
+  version "1.5.25"
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.25.tgz"
+  integrity sha512-rsepMTgml0EkswWkBpg3Wrjj5eqjwTzZN5omAn1klzXSZnClTrfeHvBuoIJYVr1yx+jmBkqySgME2p7+magUAw==
+
 "@swc/core@*", "@swc/core@^1.3.18":
   version "1.5.25"
   resolved "https://registry.npmjs.org/@swc/core/-/core-1.5.25.tgz"
@@ -4466,10 +4496,10 @@
     magic-string "^0.27.0"
     react-refresh "^0.14.0"
 
-"@vitejs/plugin-react@^4.3.0":
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.0.tgz"
-  integrity sha512-KcEbMsn4Dpk+LIbHMj7gDPRKaTMStxxWRkRmxsg/jVdFdJCZWt1SchZcf0M4t8lIKdwwMsEyzhrcOXRrDPtOBw==
+"@vitejs/plugin-react@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz"
+  integrity sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==
   dependencies:
     "@babel/core" "^7.24.5"
     "@babel/plugin-transform-react-jsx-self" "^7.24.5"
@@ -8304,16 +8334,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2, fsevents@~2.3.3:
-  version "2.3.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
-[email protected]:
-  version "2.3.2"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"