fix build issue, frontend start point

Dalongcoder0522 · Dec 29, 2024 · 87f40bc · 87f40bc
1 parent 73cdace
commit 87f40bc
Show file tree

Hide file tree

Showing 5 changed files with 1,979 additions and 46 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -73,7 +73,6 @@ export const Header = () => {
   const burgerMenuRef = useRef<HTMLDivElement>(null);
 
   useOutsideClick(
-    //@ts-expect-error refs are supposed to be null by default
     burgerMenuRef,
     useCallback(() => setIsDrawerOpen(false), []),
   );

diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
@@ -54,7 +54,6 @@ export const AddressInfoDropdown = ({
     dropdownRef.current?.removeAttribute("open");
   };
 
-  // @ts-expect-error ref are initialized with null by default
   useOutsideClick(dropdownRef, closeDropdown);
 
   function handleConnectBurner(

diff --git a/packages/nextjs/next.config.mjs b/packages/nextjs/next.config.mjs
@@ -24,8 +24,43 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: process.env.NEXT_PUBLIC_IGNORE_BUILD_ERROR === "true",
   },
-  webpack: (config) => {
-    config.resolve.fallback = { fs: false, net: false, tls: false };
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback = {
+        fs: false,
+        net: false,
+        tls: false,
+        url: false,
+        crypto: false,
+        stream: false,
+        path: false,
+        http: false,
+        https: false,
+        zlib: false,
+        querystring: false,
+        buffer: false,
+      };
+
+      // Add a rule to handle node: protocol imports
+      config.module.rules.push({
+        test: /[\\/]node_modules[\\/]tough-cookie[\\/].*\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: [
+              ['module-resolver', {
+                alias: {
+                  'node:url': 'url',
+                  'node:punycode': 'punycode',
+                  'node:net': false,
+                }
+              }]
+            ]
+          }
+        }
+      });
+    }
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -45,23 +45,41 @@
     "zustand": "^4.1.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
+    "@types/babel__core": "^7",
+    "@types/babel__preset-env": "^7",
     "@types/node": "^20",
     "@types/nprogress": "^0",
+    "@types/path-browserify": "^1",
     "@types/react": "latest",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "latest",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-istanbul": "^2.1.1",
     "@vitest/coverage-v8": "^2.1.1",
     "autoprefixer": "^10.0.1",
+    "babel-loader": "^9.2.1",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
+    "https-browserify": "^1.0.0",
     "jsdom": "^25.0.1",
+    "null-loader": "^4.0.1",
+    "path-browserify": "^1.0.1",
     "postcss": "^8",
+    "querystring-es3": "^0.2.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "string-replace-loader": "^3.1.0",
     "tailwindcss": "^3.3.0",
     "typescript": "^5",
+    "url": "^0.11.4",
     "vercel": "^33.7.1",
     "vitest": "^2.1.1"
   }