fascinating-indigo

Disable SSR

In a future release will there be a way of disabling SSR and yet still keep bling? I have an SPA which I'm mulling whether to keep or move to an electron app and therefore don't need SSR. In fact, it's more of a hinderance.

38 Replies

continuing-cyan•12mo ago

what does "keep bling" mean? in an electron app, wouldn't you use just router without start?

fascinating-indigoOP•12mo ago

So I've used blitzjs in the past. Where they had the server RPC magic. I think bling is something similar? Even though it's CSR, instead of using fetch and an API route. I would rather leverage something like server actions for NextJS. Hopefully you can see what I'm refering to. Reason for the question, is that I am using pigment-css. It works fine with electron-vite. But fails with start.

fascinating-indigoOP•12mo ago

20:25:03 [vite] Error when evaluating SSR module /app/routes/index.tsx?tsr-split:
|- Error: @pigment-css/react: You were trying to call "css" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.

20:25:03 [vite] Error when evaluating SSR module /app/routes/index.tsx?tsr-split:
|- Error: @pigment-css/react: You were trying to call "css" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.

continuing-cyan•12mo ago

can you try with router instead of start and enable automatic code splitting? it might be caused by that and not start specifically

fascinating-indigoOP•12mo ago

Sure!

[plugin:vite-plugin-zero-runtime] The "path" argument must be of type string. Received an instance of Object /Users/paul/development/src/github/tanstack-router/src/main.tsx

fascinating-indigoOP•12mo ago

message.txt

fascinating-indigoOP•12mo ago

It doesn't render the Welcome Home All I have done is: 1) pnpm create @tanstack/router 2) https://github.com/mui/pigment-css?tab=readme-ov-file#start-with-vite

continuing-cyan•12mo ago

@Andrew Murray did you have similar errors with MUI? I still might not really understand the problem you are facing. however, you can now specify ssr: false in the route options which will prevent this route to render on the server

fascinating-indigoOP•12mo ago

I put ssr:false in about and index. Is there anywhere else I need to put it?

continuing-cyan•12mo ago

whereever your want to disable ssr we don't have a default value for this yet so you need to put it into every route

fascinating-indigoOP•12mo ago

I also put it in __root.tsx, but I still get the same issue as above.

continuing-cyan•12mo ago

are you still in react-router or in start? this only applies for start

fascinating-indigoOP•12mo ago

react-router.

continuing-cyan•12mo ago

fascinating-indigoOP•12mo ago

ooh Ok, let me try start then 😄

continuing-cyan•12mo ago

react-router does not do any SSR no wait can you share your example with react-router please?

fascinating-indigoOP•12mo ago

I'm using tanstack router here. I have an example here: https://stackblitz.com/edit/tanstack-router-usydqx?file=vite.config.js Even with ssr: false, with defineConfig under vite. Still an issue. As a new user, I'm utterly confused by the layout of all this. I don't know whether I'm on Router or Start 😅 I can't even find ssr:false with start

continuing-cyan•12mo ago

this setting is not documented yet, I just added this recently

fascinating-indigoOP•12mo ago

Ah, no worries then. I appreciate this is all in flux atm

continuing-cyan•12mo ago

but i am still confused. is your goal to use start or just router?

fascinating-indigoOP•12mo ago

I want to use start, but without ssr. As I'm under the impression, there's more "stuff" with start.

continuing-cyan•12mo ago

yes, you would be able to use server functions etc

fascinating-indigoOP•12mo ago

Can you let me know where in start, I can set the ssr:false flag? I can then try it locally.

continuing-cyan•12mo ago

export const Route = createFileRoute('/posts/$postId/')({
  component: PostComponent,
  ssr: false
})

export const Route = createFileRoute('/posts/$postId/')({
  component: PostComponent,
  ssr: false
})

like this

fascinating-indigoOP•12mo ago

I tried there but didn't see the option. This must be really new. Is this in master or if I do another new app, will it be there? 1.61.1 ok let me upgrade

continuing-cyan•12mo ago

added in https://github.com/TanStack/router/releases/tag/v1.59.0

GitHub

Release v1.59.0 · TanStack/router

Version 1.59.0 - 10/4/24, 7:55 PM Changes Feat allow to exclude routes from SSR (#2463) (da9b824) by Manuel Schiller Fix react-router: check if strictNullChecks are enabled (#2457) (32ba7ed) by ...

fascinating-indigoOP•12mo ago

Just confirming I'm out of date. You move really quick 😄 Added ssr:false and unfortunately same problem as before: https://discord.com/channels/719702312431386674/1291770206141677578/1291844689263333377

continuing-cyan•12mo ago

can you share a complete example with start as well? better to debug then "ssr: false" would not help in case of bundling errors. it just prevents route components to be rendered on the server

fascinating-indigoOP•12mo ago

there isn't an example that mimics the vite install for StackBlitz, so I will send over a github link in a moment.

continuing-cyan•12mo ago

sure

fascinating-indigoOP•12mo ago

https://github.com/paulm17/tanstack-start npm i npm run dev

continuing-cyan•12mo ago

ok I found the issue 2 things. you must configure the vite plugin in app.config.ts

continuing-cyan•12mo ago

and there is a known issue with babel, see https://github.com/mui/pigment-css/issues/257#issuecomment-2392175633

GitHub

Pigment Css not working with Next js basic setup, causing error for...

Steps to reproduce clone https://github.com/nunesunil/mui-pigmentCss Current behavior gives the error - TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Recei...

continuing-cyan•12mo ago

I added a PR to your example here: https://github.com/paulm17/tanstack-start/pull/1

GitHub

fix pigment usage by schiller-manuel · Pull Request #1 · paulm17/ta...

configure vite plugin in app.config.ts pin babel version to a working one, see Pigment Css not working with Next js basic setup, causing error for 'babelMerge' mui/pigment-css#257 (comment)

continuing-cyan•12mo ago

this works locally for me, please check it out

fascinating-indigoOP•11mo ago

I just saw the email notification and tried it out. I can confirm it works. I really appreciate this, thanks so much! Also, a bit confused about the vite.config.ts -> app.config.ts. But that's fine, I am completely new to the vite ecosystem and how all this works. No doubt I will be learning over the next few months. As I'm moving on from NextJS to Start. Will close this now! Thanks again! So I want to resurrect this thread. As I'm having an SSR issue again. I'm doing:

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultSsr: false
})

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultSsr: false
})

and getting:

16:11:10 [vite] Error when evaluating SSR module /@fs/Users/paul/development/src/github/stylefusion/packages/raikou/core/build/index.mjs: failed to import "react-remove-scroll"
|- /Users/paul/development/src/github/stylefusion/node_modules/.pnpm/react-remove-scroll@2.6.0_@types+react@18.3.11_react@18.3.1/node_modules/react-remove-scroll/dist/es2015/index.js:1
import RemoveScroll from './Combination';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    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/stylefusion/node_modules/.pnpm/vite@5.4.8_@types+node@20.5.1_less@4.2.0_terser@5.30.0/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52999:15)
    at async ssrImport (file:///Users/paul/development/src/github/stylefusion/node_modules/.pnpm/vite@5.4.8_@types+node@20.5.1_less@4.2.0_terser@5.30.0/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52857:16)
    at async eval (/Users/paul/development/src/github/stylefusion/packages/raikou/core/build/index.mjs:10:31)
    at async instantiateModule (file:///Users/paul/development/src/github/stylefusion/node_modules/.pnpm/vite@5.4.8_@types+node@20.5.1_less@4.2.0_terser@5.30.0/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52915:5)

16:11:10 [vite] Error when evaluating SSR module /@fs/Users/paul/development/src/github/stylefusion/packages/raikou/core/build/index.mjs: failed to import "react-remove-scroll"
|- /Users/paul/development/src/github/stylefusion/node_modules/.pnpm/react-remove-scroll@2.6.0_@types+react@18.3.11_react@18.3.1/node_modules/react-remove-scroll/dist/es2015/index.js:1
import RemoveScroll from './Combination';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    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/stylefusion/node_modules/.pnpm/vite@5.4.8_@types+node@20.5.1_less@4.2.0_terser@5.30.0/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52999:15)
    at async ssrImport (file:///Users/paul/development/src/github/stylefusion/node_modules/.pnpm/vite@5.4.8_@types+node@20.5.1_less@4.2.0_terser@5.30.0/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52857:16)
    at async eval (/Users/paul/development/src/github/stylefusion/packages/raikou/core/build/index.mjs:10:31)
    at async instantiateModule (file:///Users/paul/development/src/github/stylefusion/node_modules/.pnpm/vite@5.4.8_@types+node@20.5.1_less@4.2.0_terser@5.30.0/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52915:5)

This works just fine with TanStack Router though. 🤔 doesn't yield a good result either:

ssr: {
  noExternal: ['@raikou/core', 'react-remove-scroll']
},

ssr: {
  noExternal: ['@raikou/core', 'react-remove-scroll']
},

continuing-cyan•11mo ago

can you please provide a minimal example?

fascinating-indigoOP•11mo ago

It's going to be kind of difficult as both these libs are huge. But I suspect it's something to do with react-remove-scroll. I've noticed, if I remove react-remove-scroll and the components which use it. It works just fine. So I'll make a monorepo example duplicating kinda what I have and a component with react-remove-scroll to produce the same effect. Hopefully if that can be fixed, that will fix my complicated setup. Not able to give you a minimal example as it wouldn't be fare for you to go through so much code. I have solved it somewhat and hopefully this gives you a clue: my defineConfig:

export default defineConfig({
  vite: {
    resolve: {
      mainFields: ["main"],
    },
    plugins: [
      // @ts-ignore
      pigment({
        atomic: false,
        theme,
        rawTheme,
      }),
    ],
  },
});

export default defineConfig({
  vite: {
    resolve: {
      mainFields: ["main"],
    },
    plugins: [
      // @ts-ignore
      pigment({
        atomic: false,
        theme,
        rawTheme,
      }),
    ],
  },
});

The npm library is trying to goto:

react-remove-scroll@2.6.0_@types+react@18.3.11_react@18.3.1/node_modules/react-remove-scroll/dist/es2015/index.js

looking at the package.json

"main": "dist/es5/index.js",
"jsnext:main": "dist/es2015/index.js",
"module": "dist/es2015/index.js",
"types": "dist/es5/index.d.ts",
"module:es2019": "dist/es2019/index.js",

"main": "dist/es5/index.js",
"jsnext:main": "dist/es2015/index.js",
"module": "dist/es2015/index.js",
"types": "dist/es5/index.d.ts",
"module:es2019": "dist/es2019/index.js",

The problem is that I now get:

ENOENT: no such file or directory, open '/Users/paul/development/src/github/stylefusion/apps/start/node_modules/.vinxi/cache/client/deps/react-remove-scroll.js'

ENOENT: no such file or directory, open '/Users/paul/development/src/github/stylefusion/apps/start/node_modules/.vinxi/cache/client/deps/react-remove-scroll.js'

If I stop the server and restart then it works. 🤔 To resolve this. I switched from building my packages from tsup to rollup. Now I don't get this error.

Gaming

Programming

Disable SSR

Did you find this page helpful?