chore: upgrade remix example to v2 (#1805)

* chore: bump node engine in examples

* chore: upgrade remix, migrations

* docs: fix remix installation guide

* docs: with-remix link fix

* fix: pnpm start for remix

---------

Co-authored-by: Magomed Khamidov <[email protected]>

examples/with-next-app-i18n/package.json

@@ -27,6 +27,6 @@
     "typescript": "^5.0.4"
   },
   "engines": {
-    "node": ">=16.8.0"
+    "node": ">=18.0.0"
   }
 }

examples/with-next-app/package.json

@@ -26,6 +26,6 @@
     "typescript": "^5.0.4"
   },
   "engines": {
-    "node": ">=16.8.0"
+    "node": ">=18.0.0"
   }
 }

examples/with-remix/app/entry.client.tsx

@@ -1,4 +1,3 @@
-import './polyfills';
 import { RemixBrowser } from '@remix-run/react';
 import { hydrateRoot } from 'react-dom/client';
 

examples/with-remix/app/root.tsx

@@ -40,11 +40,13 @@ type Env = { PUBLIC_ENABLE_TESTNETS?: string };
 
 type LoaderData = { ENV: Env };
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'RainbowKit Remix Example',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta: MetaFunction = () => ([
+  {
+    charset: 'utf-8',
+    title: 'RainbowKit Remix Example',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+]);
 
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: globalStylesUrl },

examples/with-remix/package.json

@@ -1,36 +1,33 @@
 {
   "name": "with-remix",
   "private": true,
-  "sideEffects": [
-    "polyfills.ts"
-  ],
+  "version": "0.0.80",
+  "type": "module",
   "scripts": {
     "build": "remix build",
     "dev": "PORT=8000 remix dev",
-    "start": "remix-serve build"
+    "start": "remix-serve build/index.js"
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "@remix-run/node": "^1.5.1",
-    "@remix-run/react": "^1.5.1",
-    "@remix-run/serve": "^1.5.1",
-    "buffer-polyfill": "npm:buffer@^6.0.3",
+    "@remix-run/node": "^2.7.2",
+    "@remix-run/react": "^2.7.2",
+    "@remix-run/serve": "^2.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "viem": "^2.7.12",
     "wagmi": "^2.5.7",
     "@tanstack/react-query": "^5.22.2"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.5.1",
-    "@remix-run/eslint-config": "^1.5.1",
+    "@remix-run/dev": "^2.7.2",
+    "@remix-run/eslint-config": "^2.7.2",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "eslint": "^8.15.0",
     "typescript": "^5.0.4"
   },
   "engines": {
-    "node": ">=14"
-  },
-  "version": "0.0.80"
+    "node": ">=18.0.0"
+  }
 }

examples/with-remix/remix.config.js

@@ -1,20 +1,11 @@
-/**
- * @type {import('@remix-run/dev').AppConfig}
- */
-module.exports = {
-  ignoredRouteFiles: ['**/.*'],
+/** @type {import('@remix-run/dev').AppConfig} */
+export default {
+  ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
   // publicPath: "/build/",
-  serverDependenciesToBundle: [
-    '@rainbow-me/rainbowkit',
-    '@rainbow-me/rainbowkit/wallets',
-    /^@?wagmi.*/,
-    /.*/,
-  ],
+  // serverBuildPath: "build/index.js",
+  browserNodeBuiltinsPolyfill: {
+    modules: { buffer: true, events: true, http: true },
+  },
 };
-
-// https://github.com/remix-run/remix/discussions/2594#discussioncomment-4733564
-// Remix currently does not bundle all dependency packages
-// /.*/ is the recommended catch-all for missing RainbowKit dependencies