fair-rose

[vite] Error when evaluating SSR module /app/routes/__root.tsx: failed to import...

I'm still having some issues trying to get Start running. With my own UI lib and css-in-js lib. The problem seems to be vinxi:

16:06:04 [vite] Error when evaluating SSR module /app/routes/__root.tsx: failed to import "@raikou/emotion"
|- Error: @stylefusion/react: You were trying to call "css" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @stylefusion/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.
    at css (file:///Users/paul/development/src/github/tanstack-start/node_modules/@stylefusion/react/build/chunk-QPZK2EXO.mjs:15:9)
    at file:///Users/paul/development/src/github/tanstack-start/node_modules/@raikou/core/esm/components/ScrollArea/ScrollArea.css.mjs:3:29
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///Users/paul/development/src/github/tanstack-start/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:53056:15)
    at async ssrImport (file:///Users/paul/development/src/github/tanstack-start/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52914:16)
    at async eval (/Users/paul/development/src/github/tanstack-start/app/routes/__root.tsx:7:31)
    at async instantiateModule (file:///Users/paul/development/src/github/tanstack-start/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

16:06:04 [vite] Error when evaluating SSR module /app/routes/__root.tsx: failed to import "@raikou/emotion"
|- Error: @stylefusion/react: You were trying to call "css" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @stylefusion/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.
    at css (file:///Users/paul/development/src/github/tanstack-start/node_modules/@stylefusion/react/build/chunk-QPZK2EXO.mjs:15:9)
    at file:///Users/paul/development/src/github/tanstack-start/node_modules/@raikou/core/esm/components/ScrollArea/ScrollArea.css.mjs:3:29
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///Users/paul/development/src/github/tanstack-start/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:53056:15)
    at async ssrImport (file:///Users/paul/development/src/github/tanstack-start/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52914:16)
    at async eval (/Users/paul/development/src/github/tanstack-start/app/routes/__root.tsx:7:31)
    at async instantiateModule (file:///Users/paul/development/src/github/tanstack-start/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

Works fine with Router:

https://github.com/paulm17/tanstack-router

You can clone and run using npm. The result is a badge showing. No issues. Here is Start:

https://github.com/paulm17/tanstack-start

Shows the errors above. Can someone please shed some light on this. Thanks!

21 Replies

fair-roseOP•10mo ago

Added Vinxi:

https://github.com/paulm17/vinxi

Works fine. Looks like this is an issue with Start. 😔

quickest-silver•10mo ago

is this really a minimal example? i mean do we need all of the vite config to trigger it? e.g. optimizeDeps and resolve?

fair-roseOP•10mo ago

Without those params, I get a whole bunch of errors. What would a minimal example look like? How can I make this easier for you?

quickest-silver•10mo ago

I am just wondering if you can remove more of those deps/configs to still produce the above error

fair-roseOP•10mo ago

If I remove the optimizeDeps and Resolve from Router. I get:

Uncaught SyntaxError: The requested module '/node_modules/prop-types/index.js?v=b7ab91ea' does not provide an export named 'default'

Uncaught SyntaxError: The requested module '/node_modules/prop-types/index.js?v=b7ab91ea' does not provide an export named 'default'

The problem is, upstream there are issues with prop-types. The maintainers have said that the "released" version will not have this issue. But that's going to be maybe end of the year? Sometimes early next?

fair-roseOP•10mo ago

fair-roseOP•10mo ago

Do you think the issue with Start is down to the prop-types issue? If so. I'll just have to wait until it's resolved upstream. 😄

quickest-silver•10mo ago

I have no idea as I have not closely. I just want to focus as much as possible

fair-roseOP•10mo ago

Is there a doc on how to get Start working as the dev repo? I don't mind pulling down the Router repo and getting it to work and then going through the code and seeing where this falls down.

quickest-silver•10mo ago

just clone the repo, pnpm install and pnpm build

fair-roseOP•10mo ago

Thanks! I will give that a go tomorrow and if I find anything. I'll report back here. 😄 I thought I'd quickly get something working.

paul@Pauls-MBP-2 router % pnpm build

> root@ build /Users/paul/development/src/github/router
> nx affected --target=build --exclude=e2e/** --exclude=examples/**


 NX   Affected criteria defaulted to --base=main --head=HEAD

 NX   No tasks were run

View logs and run details at https://nx.app/runs/c0FTqZdd2R

paul@Pauls-MBP-2 router % pnpm build

> root@ build /Users/paul/development/src/github/router
> nx affected --target=build --exclude=e2e/** --exclude=examples/**


 NX   Affected criteria defaulted to --base=main --head=HEAD

 NX   No tasks were run

View logs and run details at https://nx.app/runs/c0FTqZdd2R

Is this the right response? As when I run example/start-basic I get a lot of errors I tried also to build packages/start and get errors as well. This is the right repo? https://github.com/TanStack/router

quickest-silver•10mo ago

yes which node version? which pnpm version? this should just work

fair-roseOP•10mo ago

node: v20.13.1 pnpm: 9.12.0

quickest-silver•10mo ago

running on which os?

fair-roseOP•10mo ago

mac 12.6

quickest-silver•10mo ago

sounds like it should just work

fair-roseOP•10mo ago

Sometimes the universe likes to have other ideas 😅 . Let me upgrade pnpm and node and see what happens then. node: v22.11.0 pnpm: v9.13.1 This is what I keep getting:

paul@Pauls-MBP-2 start-basic % pnpm dev

> tanstack-start-example-basic@ dev /Users/paul/development/src/github/router/examples/react/start-basic
> vinxi dev

vinxi v0.4.3
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/paul/development/src/github/router/examples/react/start-basic/node_modules/@tanstack/start/dist/esm/config/index.js' imported from /Users/paul/development/src/github/router/examples/react/start-basic/app.config.timestamp_1731610101540.js
    at finalizeResolution (node:internal/modules/esm/resolve:257:11)
    at moduleResolve (node:internal/modules/esm/resolve:913:10)
    at defaultResolve (node:internal/modules/esm/resolve:1037:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:132:49) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///Users/paul/development/src/github/router/examples/react/start-basic/node_modules/@tanstack/start/dist/esm/config/index.js'
}
vinxi starting dev server
vinxi change detected in change
vinxi reloading app

paul@Pauls-MBP-2 start-basic % pnpm dev

> tanstack-start-example-basic@ dev /Users/paul/development/src/github/router/examples/react/start-basic
> vinxi dev

vinxi v0.4.3
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/paul/development/src/github/router/examples/react/start-basic/node_modules/@tanstack/start/dist/esm/config/index.js' imported from /Users/paul/development/src/github/router/examples/react/start-basic/app.config.timestamp_1731610101540.js
    at finalizeResolution (node:internal/modules/esm/resolve:257:11)
    at moduleResolve (node:internal/modules/esm/resolve:913:10)
    at defaultResolve (node:internal/modules/esm/resolve:1037:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:132:49) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///Users/paul/development/src/github/router/examples/react/start-basic/node_modules/@tanstack/start/dist/esm/config/index.js'
}
vinxi starting dev server
vinxi change detected in change
vinxi reloading app

quickest-silver•10mo ago

you need to build the repo first so in root, pnpm build should work

fair-roseOP•10mo ago

I did https://discord.com/channels/719702312431386674/1306653669525028864/1306690390862069800 Here is the run details after the upgrades: https://cloud.nx.app/runs/1bmZm1Jbky

paul@Pauls-MBP-2 router % pnpm build

> root@ build /Users/paul/development/src/github/router
> nx affected --target=build --exclude=e2e/** --exclude=examples/**


 NX   Affected criteria defaulted to --base=main --head=HEAD

 NX   No tasks were run

View logs and run details at https://nx.app/runs/1bmZm1Jbky

paul@Pauls-MBP-2 router % pnpm build

> root@ build /Users/paul/development/src/github/router
> nx affected --target=build --exclude=e2e/** --exclude=examples/**


 NX   Affected criteria defaulted to --base=main --head=HEAD

 NX   No tasks were run

View logs and run details at https://nx.app/runs/1bmZm1Jbky

This is why I'm asking whether this is the correct output. Doesn't seem like it's doing anything.

quickest-silver•10mo ago

no it should build all packages

fair-roseOP•10mo ago

Got it building by running: npx nx run-many -t build It says 77 packages being built, but who cares at this point 😄 Success. I have no idea why pnpm build does not work for me 🤷‍♂️ I've managed to get a smaller version of my UI lib running with start.

export default defineConfig({
  vite: {
    plugins: [
      pigment({
        theme,
        transformLibraries: ['@charizardxx/core'],
      }),
    ],
    optimizeDeps: {
      include: ['prop-types', 'react-is'],
    },
    ssr: {
      noExternal: ['@charizardxx/core']
    }, 
  }
});

export default defineConfig({
  vite: {
    plugins: [
      pigment({
        theme,
        transformLibraries: ['@charizardxx/core'],
      }),
    ],
    optimizeDeps: {
      include: ['prop-types', 'react-is'],
    },
    ssr: {
      noExternal: ['@charizardxx/core']
    }, 
  }
});

But now it knocks out my global styles. I think I'm going to revert back to Router and wait till you guys are in GA. @Manuel Schiller Thanks for your help though. Much appreciated!

Gaming

Programming

[vite] Error when evaluating SSR module /app/routes/__root.tsx: failed to import...

Did you find this page helpful?