Various issues with SPA feature #8534

mkarajohn · 2024-01-16T23:56:44Z

mkarajohn
Jan 16, 2024

Context: I am trying to (experimentally) migrate an existing Vite + RR5 app to Remix SPA and this has turned into an ordeal.

So, I followed the Migrating from RR guide and I ended up with the following:

// app/routes/_index.tsx

export default function Index() {
  return <h1>hello</h1>;
}

// app/routes/$.tsx

export default function Index() {
  return <h1>hello</h1>;
}

// app/entry.client.tsx

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>
  );
});

// app/entry.server.tsx

import type { EntryContext } from '@remix-run/node';
import { RemixServer } from '@remix-run/react';
import { renderToString } from 'react-dom/server';

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  // responseHeaders: Headers,
  remixContext: EntryContext
) {
  const html = renderToString(<RemixServer context={remixContext} url={request.url} />);

  return new Response(html, {
    headers: { 'Content-Type': 'text/html' },
    status: responseStatusCode,
  });
}

// app/env.d.ts

/// <reference types="@remix-run/node" />
/// <reference types="vite/client" />

// app/tsx root.tsx

import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

export function HydrateFallback() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <p>yolo...</p>
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

// vite.config.ts

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remix({ unstable_ssr: false }), tsconfigPaths()],
});

// tsconfig.json

{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "noEmit": true
  }
}

Some relevant installed packages:

    "@remix-run/node": "^2.5.0",
    "@remix-run/react": "^2.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.2",
    "@remix-run/dev": "^2.5.0",
    "typescript": "~5.2.2",
    "vite": "^5.0.5",
    "vite-tsconfig-paths": "^4.2.2",

Running remix vite:dev would initially throw an error about RefreshRuntime being declared twice and then it started throwing the error from the title.

Unexpected Server Error  TypeError: Cannot read properties of undefined (reading 'routes')

I have deleted the index.html and main.tsx that were used in the vanilla Vite configuration.

I have spent too much time on this, and I am this close to giving up on it 😮‍💨

The full error trace is this:

TypeError: Cannot read properties of undefined (reading 'routes')
    at RemixServer (/home/mitch/Workspace/github/app-name/node_modules/@remix-run/react/dist/server.js:60:53)
    at renderWithHooks (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderIndeterminateComponent (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5735:15)
    at renderElement (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at retryTask (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5)
    at performWork (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7)
    at /home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12
    at scheduleWork (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:78:3)
    at startWork (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6903:3)
    at renderToStringImpl (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6977:3)
    at Module.renderToString (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:7065:10)
    at handleRequest (/home/mitch/Workspace/github/app-name/app/entry.server.tsx:11:16)
    at handleDocumentRequestRR (/home/mitch/Workspace/github/app-name/node_modules/@remix-run/server-runtime/dist/server.js:226:18)
    at async requestHandler (/home/mitch/Workspace/github/app-name/node_modules/@remix-run/server-runtime/dist/server.js:105:18)
    at async /home/mitch/Workspace/github/app-name/node_modules/@remix-run/dev/dist/vite/node/adapter.js:84:20
    at async /home/mitch/Workspace/github/app-name/node_modules/@remix-run/dev/dist/vite/plugin.js:598:15
TypeError: Cannot read properties of undefined (reading 'routes')
    at RemixServer (/home/mitch/Workspace/github/app-name/node_modules/@remix-run/react/dist/server.js:60:53)
    at renderWithHooks (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderIndeterminateComponent (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5735:15)
    at renderElement (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at retryTask (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5)
    at performWork (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7)
    at /home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12
    at scheduleWork (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:78:3)
    at startWork (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6903:3)
    at renderToStringImpl (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6977:3)
    at Module.renderToString (/home/mitch/Workspace/github/app-name/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:7065:10)
    at handleRequest (/home/mitch/Workspace/github/app-name/app/entry.server.tsx:11:16)
    at handleDocumentRequestRR (/home/mitch/Workspace/github/app-name/node_modules/@remix-run/server-runtime/dist/server.js:254:20)
    at async requestHandler (/home/mitch/Workspace/github/app-name/node_modules/@remix-run/server-runtime/dist/server.js:105:18)
    at async /home/mitch/Workspace/github/app-name/node_modules/@remix-run/dev/dist/vite/node/adapter.js:84:20
    at async /home/mitch/Workspace/github/app-name/node_modules/@remix-run/dev/dist/vite/plugin.js:598:15

brophdawg11 · 2024-01-17T15:41:48Z

brophdawg11
Jan 17, 2024
Maintainer

I think this is your problem:

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  // responseHeaders: Headers,
  remixContext: EntryContext
) {...}

You commented out a parameter for the function so remixContext is not getting the proper value. You need to leave the 3rd parameter in there even though you aren't using it for SPA mode's rendering of index.html.

20 replies

mkarajohn Jan 26, 2024
Author

@jrestall oh thanks, that's a killer tool! I did not know it existed!
Will work on resolving the issues it throws and update the thread. And here I was thinking I had figured out esm/cjs bundling 😅

For the record though, I will note again that Vite, without the remix plugin, has no issue consuming the aforementioned package. Something works differently when the remix plugin is used

mkarajohn Jan 26, 2024
Author

Update:

Exports are fixed https://publint.dev/@orfium/[email protected] 🎊 Really glad I learnt about the publint tool

Now I am getting the issue with the .svg import: https://stackblitz.com/edit/vitejs-vite-u1xsya?file=src%2FApp.tsx
(the @orfium/toolbox package is importing an svg asset in one of its components, the offending import can be found here)

I am not getting this error when I run the project with Vite using the following plugins:

plugins: [
      react({
        babel: {
          plugins: ['@emotion/babel-plugin'],
        },
      }),
      tsconfigPaths(),
      svgr(),
      ViteEjsPlugin(),
    ],

this error only occurs when I try to run it using remix vite:dev

It seems as if it is not properly handling svg imports that are not in user-code directly (as in the working example provided by @brophdawg11 )

brophdawg11 Jan 26, 2024
Maintainer

ok - would you mind opening a new github issue with a minimal reproduction of just the SVG issue - and remove all the other unrelated aspects of this setup? That will allow the team to look at that SVG issue alone 👍

mkarajohn Jan 26, 2024
Author

Done, thanks for all the support 💪

JoepKockelkorn Jan 26, 2024

Just to add my two cents on SPA mode issues: I ran into this issue, but I didn't fix it by isolating server stuff to .server.ts files but rather by replacing any @remix-run/node imports by their @remix-run/react equivalents. Because redirecting is something you still do in clientLoaders.

Various issues with SPA feature #8534

Uh oh!

Uh oh!

mkarajohn Jan 16, 2024

Replies: 1 comment · 20 replies

Uh oh!

brophdawg11 Jan 17, 2024 Maintainer

Uh oh!

mkarajohn Jan 26, 2024 Author

Uh oh!

Uh oh!

mkarajohn Jan 26, 2024 Author

Uh oh!

brophdawg11 Jan 26, 2024 Maintainer

Uh oh!

Uh oh!

mkarajohn Jan 26, 2024 Author

Uh oh!

JoepKockelkorn Jan 26, 2024

mkarajohn
Jan 16, 2024

Replies: 1 comment 20 replies

brophdawg11
Jan 17, 2024
Maintainer

mkarajohn Jan 26, 2024
Author

mkarajohn Jan 26, 2024
Author

brophdawg11 Jan 26, 2024
Maintainer

mkarajohn Jan 26, 2024
Author