optimistic-gold

MUI & Tanstack Start

I've been looking at moving one of my projects to tanstack start but the project is based on MUI which isn't ESM compatible and it also uses CSS-in-JS (emotion) for it's styling. Are there any examples of SSR using MUI?

12 Replies

optimistic-goldOP•10mo ago

with either Vinxi or TS Start

fascinating-indigo•10mo ago

not aware of any you would need to try this out

optimistic-goldOP•10mo ago

I've been playing around with it but emotion is a tricky problem to solve. In addition vite and nodejs detests non-esm packages on the server

fascinating-indigo•10mo ago

you would need to put those packages into vite.ssr.noExternal

optimistic-goldOP•10mo ago

hmm, okay. I'll have to do a bit more exploration today. Thanks @Manuel Schiller for your help 👍

environmental-rose•9mo ago

This is how it works for us:

import { defineConfig } from '@tanstack/start/config';
import svgr from 'vite-plugin-svgr';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  server: {
    preset: 'node-server',
  },

  vite: {
    ...(process.env.NODE_ENV === 'production' && {
      ssr: {
        noExternal: ['dayjs', '@mui/*'],
      },
    }),

    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
      svgr(),
    ],
  },
});

import { defineConfig } from '@tanstack/start/config';
import svgr from 'vite-plugin-svgr';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  server: {
    preset: 'node-server',
  },

  vite: {
    ...(process.env.NODE_ENV === 'production' && {
      ssr: {
        noExternal: ['dayjs', '@mui/*'],
      },
    }),

    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
      svgr(),
    ],
  },
});

And since newer versions, also the CacheProvider is necessary, see this issue: https://github.com/TanStack/router/issues/2867#issuecomment-2541019127.

fascinating-indigo•9mo ago

how do other frameworks (remix, nextjs ) handle this? do they also require the CacheProvider?

environmental-rose•9mo ago

Yes kinda: - Next: https://mui.com/material-ui/integrations/nextjs/ - Remix: https://github.com/mui/material-ui/blob/master/examples/material-ui-remix-ts/app/entry.client.tsx It just feeled super lightweight previously, to not have to do anything special for MUI support. If keeping that out-of-the-box support is not possibly longterm, having an example around could be nice? I'm also not sure whose "responsibility" it is, both parties (Start and MUI) should be interested in to be functional with the other. But MUIs support towards Remix is also not great. From my point of view adding some docs or an example will definitely help adoption.

fascinating-indigo•9mo ago

the important thing here is that not everyone needed the portal, so we'd rather have you opt in into something specific for your needs an example project would be a nice addition to our existing examples. PRs welcome! we should also add documentation for often used libraries such as MUI (and then point to the example for details)

optimistic-goldOP•9mo ago

Could you share an example of this code, I am getting hydration errors even with the cacheprovider https://github.com/Team3132/AttendanceSystem/blob/start-refactor/packages/frontend/app/routes/__root.tsx

environmental-rose•9mo ago

I don’t have more to share than this right now: https://github.com/TanStack/router/issues/2867#issuecomment-2541019127 it’s not perfect but at least working.

GitHub

New Meta behavior without portal breaks emotion/@mui/material...

Which project does this relate to? Start Describe the bug SSR with @mui/material/@mui/joy worked flawlessly without any special setup for @tanstack/start <= 1.81.11. Starting with 1.81.12 hydrat...

fair-rose•8mo ago

Hey @SebasPtsch, I am curious about this problem. What kind of css problems that are visible to both devs and users are in here? Is this different from MUI not compatible with react server components that is why MUI team is developing the pigment css?

Gaming

Programming

MUI & Tanstack Start

Did you find this page helpful?