fix various import resolution issues

Signed-off-by: Marc MacLeod <[email protected]>

.changeset/cool-crews-pump.md

@@ -0,0 +1,17 @@
+---
+'@ssrx/plugin-tanstack-router': patch
+'@ssrx/plugin-react-router': patch
+'@ssrx/renderer': patch
+'@ssrx/react': patch
+'@ssrx/remix': patch
+'@ssrx/solid': patch
+'@ssrx/vite': patch
+'@ssrx/plugin-solid-router': patch
+'@ssrx/plugin-tanstack-query': patch
+'@ssrx/plugin-trpc-react': patch
+'@ssrx/plugin-unhead': patch
+'@ssrx/streaming': patch
+'@ssrx/trpc-react-query': patch
+---
+
+Fix various import resolution issues.

examples/bun-react-router/vite.config.ts

@@ -7,6 +7,12 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 export default defineConfig({
   plugins: [tsconfigPaths(), react(), ssrx()],
 
+  resolve: {
+    // Better simulates a production use case that is importing @ssrx packages from node_modules, which affects
+    // vite behavior. This setting is NOT needed outside of the examples in this repo.
+    preserveSymlinks: true,
+  },
+
   ssr: {
     target: 'webworker',
     resolve: {

examples/react-router-kitchen-sink/vite.config.ts

@@ -15,6 +15,12 @@ export default defineConfig(({ isSsrBuild, command }) => ({
     }),
   ],
 
+  resolve: {
+    // Better simulates a production use case that is importing @ssrx packages from node_modules, which affects
+    // vite behavior. This setting is NOT needed outside of the examples in this repo.
+    preserveSymlinks: true,
+  },
+
   build: {
     rollupOptions: {
       output: {

examples/react-router-records/vite.config.ts

@@ -9,6 +9,12 @@ export default defineConfig({
 
   plugins: [tsconfigPaths(), react(), ssrx()],
 
+  resolve: {
+    // Better simulates a production use case that is importing @ssrx packages from node_modules, which affects
+    // vite behavior. This setting is NOT needed outside of the examples in this repo.
+    preserveSymlinks: true,
+  },
+
   server: {
     port: 3000,
   },

examples/react-router-simple/vite.config.ts

@@ -7,6 +7,12 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 export default defineConfig(({ isSsrBuild, command }) => ({
   plugins: [tsconfigPaths(), react(), ssrx()],
 
+  resolve: {
+    // Better simulates a production use case that is importing @ssrx packages from node_modules, which affects
+    // vite behavior. This setting is NOT needed outside of the examples in this repo.
+    preserveSymlinks: true,
+  },
+
   build: {
     rollupOptions: {
       output: {

examples/remix-vite/vite.config.ts

@@ -6,6 +6,12 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 export default defineConfig({
   plugins: [envOnlyMacros(), tsconfigPaths(), remix()],
 
+  resolve: {
+    // Better simulates a production use case that is importing @ssrx packages from node_modules, which affects
+    // vite behavior. This setting is NOT needed outside of the examples in this repo.
+    preserveSymlinks: true,
+  },
+
   ssr: {
     resolve: {
       conditions: ['workerd', 'worker', 'browser'],

examples/solid-router-simple/vite.config.ts

@@ -7,6 +7,12 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 export default defineConfig(({ isSsrBuild, command }) => ({
   plugins: [tsconfigPaths(), solid({ ssr: true }), ssrx()],
 
+  resolve: {
+    // Better simulates a production use case that is importing @ssrx packages from node_modules, which affects
+    // vite behavior. This setting is NOT needed outside of the examples in this repo.
+    preserveSymlinks: true,
+  },
+
   build: {
     rollupOptions: {
       output: {

examples/tanstack-router-simple/vite.config.ts

@@ -19,6 +19,12 @@ export default defineConfig(({ isSsrBuild, command }) => ({
     }),
   ],
 
+  resolve: {
+    // Better simulates a production use case that is importing @ssrx packages from node_modules, which affects
+    // vite behavior. This setting is NOT needed outside of the examples in this repo.
+    preserveSymlinks: true,
+  },
+
   build: {
     rollupOptions: {
       output: {

packages/plugin-react-router/package.json

@@ -34,7 +34,8 @@
     "react-router-dom": "^6"
   },
   "dependencies": {
-    "@ssrx/renderer": "^0.5.0"
+    "@ssrx/renderer": "^0.5.0",
+    "vite-env-only": "3.0.3"
   },
   "devDependencies": {
     "react-router-dom": "6.26.2"

packages/plugin-react-router/src/plugin.tsx

@@ -2,6 +2,7 @@ import { defineRenderPlugin } from '@ssrx/renderer';
 import type { RouteObject, RouterProviderProps } from 'react-router-dom';
 import { createBrowserRouter, matchRoutes, RouterProvider } from 'react-router-dom';
 import { createStaticHandler, createStaticRouter, StaticRouterProvider } from 'react-router-dom/server.js';
+import { clientOnly$, serverOnly$ } from 'vite-env-only/macros';
 
 export const PLUGIN_ID = 'reactRouter' as const;
 
@@ -15,6 +16,38 @@ declare global {
   }
 }
 
+const renderOnServer = serverOnly$(async ({ routes, basename, req }: SSRx.RenderProps & { req: Request }) => {
+  const { query, dataRoutes } = createStaticHandler(routes, { basename });
+  const context = await query(req);
+
+  if (context instanceof Response) {
+    throw context;
+  }
+
+  const router = createStaticRouter(dataRoutes, context);
+
+  return () => <StaticRouterProvider router={router} context={context} />;
+});
+
+const renderOnClient = clientOnly$(async ({ routes, basename, client }: SSRx.RenderProps) => {
+  const lazyMatches = matchRoutes(routes, window.location)?.filter(m => m.route.lazy);
+
+  // Load the lazy matches and update the routes before creating your router
+  // so we can hydrate the SSR-rendered content synchronously
+  if (lazyMatches && lazyMatches?.length > 0) {
+    await Promise.all(
+      lazyMatches.map(async m => {
+        const routeModule = await m.route.lazy!();
+        Object.assign(m.route, { ...routeModule, lazy: undefined });
+      }),
+    );
+  }
+
+  const router = createBrowserRouter(routes, { basename });
+
+  return () => <RouterProvider {...client?.providerProps} router={router} />;
+});
+
 export const reactRouterPlugin = () =>
   defineRenderPlugin({
     id: PLUGIN_ID,
@@ -29,37 +62,9 @@ export const reactRouterPlugin = () =>
              * SERVER
              */
             if (import.meta.env.SSR) {
-              const { query, dataRoutes } = createStaticHandler(routes, { basename });
-              const context = await query(req);
-
-              if (context instanceof Response) {
-                throw context;
-              }
-
-              const router = createStaticRouter(dataRoutes, context);
-
-              return () => <StaticRouterProvider router={router} context={context} />;
+              return renderOnServer!({ routes, basename, client, req });
             } else {
-              /**
-               * CLIENT
-               */
-
-              const lazyMatches = matchRoutes(routes, window.location)?.filter(m => m.route.lazy);
-
-              // Load the lazy matches and update the routes before creating your router
-              // so we can hydrate the SSR-rendered content synchronously
-              if (lazyMatches && lazyMatches?.length > 0) {
-                await Promise.all(
-                  lazyMatches.map(async m => {
-                    const routeModule = await m.route.lazy!();
-                    Object.assign(m.route, { ...routeModule, lazy: undefined });
-                  }),
-                );
-              }
-
-              const router = createBrowserRouter(routes, { basename });
-
-              return () => <RouterProvider {...client?.providerProps} router={router} />;
+              return renderOnClient!({ routes, basename, client });
             }
           },
         },

packages/plugin-tanstack-router/package.json

@@ -44,14 +44,14 @@
     "@ssrx/renderer": "^0.5.0",
     "@tanstack/react-cross-context": "1.57.6",
     "jsesc": "3.0.2",
-    "tiny-invariant": "1.3.3"
+    "tiny-invariant": "1.3.3",
+    "vite-env-only": "3.0.3"
   },
   "devDependencies": {
     "@ssrx/vite": "^0.7.0",
     "@tanstack/react-router": "1.57.13",
     "@types/jsesc": "3.0.3",
     "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "vite-env-only": "3.0.3"
+    "react-dom": "18.3.1"
   }
 }

packages/plugin-tanstack-router/tsup.config.ts

@@ -4,6 +4,6 @@ export default defineConfig({
   format: 'esm',
   sourcemap: true,
   clean: true,
-  external: ['vite-env-only', 'virtual:ssrx-manifest'],
+  external: ['virtual:ssrx-manifest'],
   entry: ['src/index.ts', 'src/adapter.ts'],
 });

packages/react/package.json

@@ -45,14 +45,14 @@
     "@ssrx/renderer": "^0.5.0",
     "@ssrx/streaming": "^0.3.0",
     "@ssrx/vite": "^0.7.0",
-    "isbot-fast": "1.2.0"
+    "isbot-fast": "1.2.0",
+    "vite-env-only": "3.0.3"
   },
   "devDependencies": {
     "esbuild": "0.23.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rollup": "4.22.5",
-    "rollup-plugin-esbuild": "6.1.1",
-    "vite-env-only": "3.0.3"
+    "rollup-plugin-esbuild": "6.1.1"
   }
 }

packages/react/rollup.config.mjs

@@ -15,6 +15,7 @@ export default [
         format: 'es',
         exports: 'named',
         preserveModules: true, // Keep directory structure and files
+        sourcemap: true,
       },
     ],
   }),

packages/react/src/server/stream.ts

@@ -30,7 +30,6 @@ export const renderToStreamServer: RenderToStreamFn<RenderToReadableStreamOption
     signal: req.signal,
     ...opts,
     onError(error, errorInfo) {
-      console.error('Error while rendering the app shell', error);
       status = 500;
 
       if (opts?.onError) {

packages/remix/package.json

@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "@ssrx/react": "^0.4.0",
-    "@ssrx/renderer": "^0.5.0"
+    "@ssrx/renderer": "^0.5.0",
+    "vite-env-only": "3.0.3"
   },
   "devDependencies": {
     "@remix-run/react": "2.12.0",
     "esbuild": "0.23.1",
     "rollup": "4.22.5",
-    "rollup-plugin-esbuild": "6.1.1",
-    "vite-env-only": "3.0.3"
+    "rollup-plugin-esbuild": "6.1.1"
   }
 }

packages/remix/rollup.config.mjs

@@ -15,6 +15,7 @@ export default [
         format: 'es',
         exports: 'named',
         preserveModules: true, // Keep directory structure and files
+        sourcemap: true,
       },
     ],
   }),

packages/renderer/package.json

@@ -48,14 +48,14 @@
   "dependencies": {
     "@ssrx/streaming": "^0.3.0",
     "@ssrx/vite": "^0.7.0",
-    "deepmerge": "4.3.1"
+    "deepmerge": "4.3.1",
+    "vite-env-only": "3.0.3"
   },
   "devDependencies": {
     "@types/node": "22.7.4",
     "esbuild": "0.23.1",
     "rollup": "4.22.5",
     "rollup-plugin-esbuild": "6.1.1",
-    "type-fest": "4.26.1",
-    "vite-env-only": "3.0.3"
+    "type-fest": "4.26.1"
   }
 }

packages/renderer/rollup.config.mjs

@@ -15,6 +15,7 @@ export default [
         format: 'es',
         exports: 'named',
         preserveModules: true, // Keep directory structure and files
+        sourcemap: true,
       },
     ],
   }),

packages/solid/src/client/handler.ts

@@ -1,9 +1,5 @@
-import {
-  type ClientHandlerOpts,
-  createApp as baseCreateApp,
-  type RenderPlugin,
-  type SetOptional,
-} from '@ssrx/renderer/client';
+import type { ClientHandlerOpts, RenderPlugin, SetOptional } from '@ssrx/renderer';
+import { createApp as baseCreateApp } from '@ssrx/renderer/client';
 
 import { RootLayout } from '../default-root.tsx';
 

packages/solid/src/server/handler.ts

@@ -1,9 +1,5 @@
-import {
-  createApp as baseCreateApp,
-  type RenderPlugin,
-  type ServerHandlerOpts,
-  type SetOptional,
-} from '@ssrx/renderer/server';
+import type { RenderPlugin, ServerHandlerOpts, SetOptional } from '@ssrx/renderer';
+import { createApp as baseCreateApp } from '@ssrx/renderer/server';
 
 import { RootLayout } from '../default-root.tsx';
 import { renderToStream } from './stream.ts';

packages/solid/src/server/stream.ts

@@ -1,7 +1,6 @@
-import type { RenderToStreamFn } from '@ssrx/renderer/server';
+import type { RenderToStreamFn } from '@ssrx/renderer';
 import { injectIntoStream } from '@ssrx/streaming';
 import { renderToStream as renderToSolidStream } from 'solid-js/web';
-/* @ts-expect-error no types */
 import { provideRequestEvent } from 'solid-js/web/storage';
 
 export const renderToStream: RenderToStreamFn<{
@@ -10,14 +9,18 @@ export const renderToStream: RenderToStreamFn<{
   onCompleteShell?: (info: { write: (v: string) => void }) => void;
   onCompleteAll?: (info: { write: (v: string) => void }) => void;
 }> = async ({ req, app, injectToStream, opts }) => {
-  return provideRequestEvent(req, () => {
-    const stream = renderToSolidStream(() => app(), opts);
-    const { readable, writable } = new TransformStream();
-    stream.pipeTo(writable);
+  return provideRequestEvent(
+    // @ts-expect-error ignore
+    req,
+    () => {
+      const stream = renderToSolidStream(() => app(), opts);
+      const { readable, writable } = new TransformStream();
+      stream.pipeTo(writable);
 
-    return {
-      stream: injectToStream ? injectIntoStream(req, readable, injectToStream) : readable,
-      statusCode: () => 200,
-    };
-  });
+      return {
+        stream: injectToStream ? injectIntoStream(req, readable, injectToStream) : readable,
+        statusCode: () => 200,
+      };
+    },
+  );
 };

packages/vite/rollup.config.mjs

@@ -15,6 +15,7 @@ export default [
         format: 'es',
         exports: 'named',
         preserveModules: true, // Keep directory structure and files
+        sourcemap: true,
       },
     ],
   }),