TanStackT
TanStack•10mo ago•
10 replies
ugliest-pink

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>
  );
};


// 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";`,
        },
      },
    },
  },
})
Was this page helpful?