T
TanStack•5mo ago
genetic-orange

Tanstack Start app with css (scss) modules with troubles using defaultNotFoundComponent

Hello! I'm trying out tanstack start for the first time, following a few of the guides and examples. I'm having quite a weird issue now, and it's possibly from misconfiguration, but I'll let you ask before I post to much nonsense about configuration. When I'm importing my <NotFound /> component in router.tsx and using it as defaultNotFoundComponent it does not render it's styles when doing a build. It works perfectly fine in dev mode. I can see, after the build, that the css is in the output folder, but it's not injected on the page. Using this component anywhere else in my application, it works fine, but not when using it as defaultNotFoundComponent. Any ideas? What else can I share to give somewhat decent information? 
// NotFound.tsx
import { Link } from '@tanstack/react-router';

import Image404 from './404.png';
import styles from './NotFound.module.scss';

export const NotFound = () => {
  return (
    <div className={styles.wrapper}>
      <img src={Image404} alt="404" width={300} height={287} />

      <div>
        <h2 className={styles.heading}>Oops, seems like the page has gone missing!</h2>
        <p className={styles.body}>Lorem ipsum dolor...</p>
      </div>

      <Link to="/">Back to start</Link>
    </div>
  );
};
// NotFound.tsx
import { Link } from '@tanstack/react-router';

import Image404 from './404.png';
import styles from './NotFound.module.scss';

export const NotFound = () => {
  return (
    <div className={styles.wrapper}>
      <img src={Image404} alt="404" width={300} height={287} />

      <div>
        <h2 className={styles.heading}>Oops, seems like the page has gone missing!</h2>
        <p className={styles.body}>Lorem ipsum dolor...</p>
      </div>

      <Link to="/">Back to start</Link>
    </div>
  );
};
// router.tsx
import { createRouter as createTanStackRouter } from '@tanstack/react-router';

import { routeTree } from './routeTree.gen';
import { NotFound } from '../components/NotFound/NotFound';

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    defaultNotFoundComponent: () => <NotFound />,
  });

  return router;
}

declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}
// router.tsx
import { createRouter as createTanStackRouter } from '@tanstack/react-router';

import { routeTree } from './routeTree.gen';
import { NotFound } from '../components/NotFound/NotFound';

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    defaultNotFoundComponent: () => <NotFound />,
  });

  return router;
}

declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof createRouter>;
  }
}
// app.config.ts
import { defineConfig } from '@tanstack/react-start/config';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  tsr: {
    appDirectory: 'src/app',
  },
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }) as any, // TODO fix this
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@our-ui-library/styles/all.module.scss";`,
        },
      },
    },
  },
})
// app.config.ts
import { defineConfig } from '@tanstack/react-start/config';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  tsr: {
    appDirectory: 'src/app',
  },
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }) as any, // TODO fix this
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@our-ui-library/styles/all.module.scss";`,
        },
      },
    },
  },
})
7 Replies
genetic-orange
genetic-orangeOP•5mo ago
Perhaps this one is more related to tanstack-router, not sure. 🤷‍♂️
passive-yellow
passive-yellow•5mo ago
can you please try to reproduce with router alone?
genetic-orange
genetic-orangeOP•5mo ago
I can try that. I will give it a try in a few hours I've tried my best now to mimic the application and reproduce the behaviour with router alone, but I'm not able to get that behaviour. All styles are injected as they should with router only, but not with start, using specifically defaultNotFoundComponent. I will gladly share more information or try out different stratagies if it helps solve this one.
passive-yellow
passive-yellow•5mo ago
ok then do you have a minimal reproducer for this in start? is this only happening during SSR?
genetic-orange
genetic-orangeOP•5mo ago
I'll setup a minimal reproducer as soon as I can. Easter now, I will get back to this after this short vacation. Thank you for your patience and help! I did a quick test to disable ssr (if I did this correctly), and it was the same behaviour. I'll share the code where I tried to disable SSR, in case I didn't do it correctly: 
// My test route
export const Route = createFileRoute('/test/')({
  component: RouteComponent,
  ssr: false,
});
// My test route
export const Route = createFileRoute('/test/')({
  component: RouteComponent,
  ssr: false,
});
// in router.tsx
export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    defaultNotFoundComponent: () => <NotFound />,
    defaultSsr: false,
  });

  return router;
}
// in router.tsx
export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
    scrollRestoration: true,
    defaultNotFoundComponent: () => <NotFound />,
    defaultSsr: false,
  });

  return router;
}
passive-yellow
passive-yellow•5mo ago
no I meant does this issue only occur upon hard reload or also when doing client side navigation to that route?
genetic-orange
genetic-orangeOP•5mo ago
Ah, sorry for misunderstanding! It happens on both hard reload and client navigation. I'll get back to it as soon as I can and set up a minimal reproducible.

Did you find this page helpful?