Replies: 2 comments 11 replies
-
|
Since your code needs to run to generate the initial |
Beta Was this translation helpful? Give feedback.
-
|
React Router + Vite works fine for creating SPA apps. RemixSPA does not. Really hoping that the merger announcement doesn't break things. |
Beta Was this translation helpful? Give feedback.
-
|
@yesmeck I think this is a problem with MUI not being properly configured for ESM/CJS specifically, not Remix SPA mode (I also get similar errors when I turn off I didn't dig too deep but using the config from that issue, I can build and run your app in SPA mode - but I still run into ESM/CJS issues on with Vite in dev mode: export default defineConfig({
plugins: [
remix({ ssr: false }),
tsconfigPaths(),
...(process.env.NODE_ENVIRONMENT === "development"
? [
cjsInterop({
dependencies: ["@mui/*"],
}),
]
: []),
],
ssr: {
noExternal: ["@mui/*"],
},
}); |
Beta Was this translation helpful? Give feedback.
-
|
@garth or @Ryan-Zayne would either of you be able to provide a small reproduction of the issue you're having with browser APIs causing errors during the Remix SPA mode build? |
Beta Was this translation helpful? Give feedback.
-
|
The problem is not browser api's it's that you might be creating apps for other environments, such as socketsupply, where you need to import something like this: import { network } from 'socket:network'With ReactRouter + Vite you can configure it to ignore specific imports, but last time I tried, this was not possible with Remix + Vite. |
Beta Was this translation helpful? Give feedback.
-
|
@brophdawg11 Yeah, it's an issue with MUI indeed. The thing is, as @garth pointed out, it works with React Router + Vite without extra configurations. What I'm expecting is it can work with Remix SPA without extra configurations as well. But now, just because of the SSR of HydrateFallback, I need to deal with these SSR and ESM/CJS issues. |
Beta Was this translation helpful? Give feedback.
-
|
This is the biggest blocker to migrate our large react-router app to Remix SPA mode. Our dependencies are mixed with CJS and ESM. Making them work together with SSR is quite difficult. |
Beta Was this translation helpful? Give feedback.
-
|
I patched the remix vite plugin to let the server always render an empty component. It seems to works well for me. diff --git a/node_modules/@remix-run/dev/dist/vite/plugin.js b/node_modules/@remix-run/dev/dist/vite/plugin.js
index 5fee221..a97b830 100644
--- a/node_modules/@remix-run/dev/dist/vite/plugin.js
+++ b/node_modules/@remix-run/dev/dist/vite/plugin.js
@@ -438,6 +438,15 @@ const remixVitePlugin = (remixUserConfig = {}) => {
ctx.serverBundleBuildConfig.routes :
// Otherwise, all routes are imported as usual
ctx.remixConfig.routes;
+
+ routes = Object.keys(routes).reduce((acc, id) => {
+ acc[id] = {
+ ...routes[id],
+ file: 'root.server.tsx'
+ };
+ return acc;
+ }, {});
+
return `
import * as entryServer from ${JSON.stringify(resolveFileUrl.resolveFileUrl(ctx, ctx.entryServerFilePath))};
${Object.keys(routes).map((key, index) => {// routes/root.server.tsx
import { Links, Meta, Scripts, ScrollRestoration } from '@remix-run/react';
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return null;
}
export function HydrateFallback() {
return null;
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
For some reason remix dev is still doing SSR when running in SPA mode. Meaning that you get errors when using client only features.
Is there a way to turn off SSR when writing SPAs?
Beta Was this translation helpful? Give feedback.
All reactions