T
TanStack•3mo ago
other-emerald

Css loading problem

Hey, guys I`m having some problem bundling my tanstack starter build Build completes successfully but showing the following warning: 
ℹ Building Nitro Server (preset: node-server, compatibility date: 2024-11-19)                                                      nitro 9:34:53 PM
"@/styles/app.css?url" is imported by "src/routes/__root.tsx", but could not be resolved – treating it as an external dependency.
ℹ Building Nitro Server (preset: node-server, compatibility date: 2024-11-19)                                                      nitro 9:34:53 PM
"@/styles/app.css?url" is imported by "src/routes/__root.tsx", but could not be resolved – treating it as an external dependency.
then on npm start 
> node .output/server/index.mjs

node:internal/modules/package_json_reader:256
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
        ^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@/styles' imported from /home/coder/projects/laranjito-core/.output/server/index.mjs
}

Node.js v22.17.0
> node .output/server/index.mjs

node:internal/modules/package_json_reader:256
  throw new ERR_MODULE_NOT_FOUND(packageName, fileURLToPath(base), null);
        ^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@/styles' imported from /home/coder/projects/laranjito-core/.output/server/index.mjs
}

Node.js v22.17.0
Installed following shadcn quickstart, dev server is running normal root.tsx 
import {
  HeadContent,
  Outlet,
  createRootRouteWithContext,
  useRouteContext,
} from '@tanstack/react-router'
import { Meta, Scripts, createServerFn } from '@tanstack/react-start'
import { QueryClient } from '@tanstack/react-query'
import * as React from 'react'
import appCss from '@/styles/app.css?url'
import { ConvexProviderWithClerk } from 'convex/react-clerk'
import { ConvexReactClient } from 'convex/react'
import { ConvexQueryClient } from '@convex-dev/react-query'
import { getWebRequest } from '@tanstack/react-start/server'
import { getAuth } from '@clerk/tanstack-react-start/server'
import { ClerkProvider, useAuth, } from '@clerk/tanstack-react-start'

// Get auth information for SSR using available cookies
const fetchAuth = createServerFn({ method: 'GET' }).handler(async () => {
  const auth = await getAuth(getWebRequest())
  const token = await auth.getToken({ template: 'convex' })

  return {
    userId: auth.userId,
    token,
  }
})

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient
  convexClient: ConvexReactClient
  convexQueryClient: ConvexQueryClient
}>()({
  head: () => ({
    //...meta stuff
    links: [
      { rel: 'stylesheet', href: appCss },
      { rel: 'icon', href: '/favicon.ico' },
    ],
  }),
  component: RootComponent,
})

function RootComponent() {
  const context = useRouteContext({ from: Route.id })
  return (
    <ClerkProvider>
      <ConvexProviderWithClerk client={context.convexClient} useAuth={useAuth}>
        <RootDocument>
          <Outlet />
        </RootDocument>
      </ConvexProviderWithClerk>
    </ClerkProvider>
  )
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="dark">
      <head>
        <HeadContent />
      </head>
      <body className="bg-neutral-950 text-neutral-50">
        {children}
        <Scripts />
      </body>
    </html>
  )
}
import {
  HeadContent,
  Outlet,
  createRootRouteWithContext,
  useRouteContext,
} from '@tanstack/react-router'
import { Meta, Scripts, createServerFn } from '@tanstack/react-start'
import { QueryClient } from '@tanstack/react-query'
import * as React from 'react'
import appCss from '@/styles/app.css?url'
import { ConvexProviderWithClerk } from 'convex/react-clerk'
import { ConvexReactClient } from 'convex/react'
import { ConvexQueryClient } from '@convex-dev/react-query'
import { getWebRequest } from '@tanstack/react-start/server'
import { getAuth } from '@clerk/tanstack-react-start/server'
import { ClerkProvider, useAuth, } from '@clerk/tanstack-react-start'

// Get auth information for SSR using available cookies
const fetchAuth = createServerFn({ method: 'GET' }).handler(async () => {
  const auth = await getAuth(getWebRequest())
  const token = await auth.getToken({ template: 'convex' })

  return {
    userId: auth.userId,
    token,
  }
})

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient
  convexClient: ConvexReactClient
  convexQueryClient: ConvexQueryClient
}>()({
  head: () => ({
    //...meta stuff
    links: [
      { rel: 'stylesheet', href: appCss },
      { rel: 'icon', href: '/favicon.ico' },
    ],
  }),
  component: RootComponent,
})

function RootComponent() {
  const context = useRouteContext({ from: Route.id })
  return (
    <ClerkProvider>
      <ConvexProviderWithClerk client={context.convexClient} useAuth={useAuth}>
        <RootDocument>
          <Outlet />
        </RootDocument>
      </ConvexProviderWithClerk>
    </ClerkProvider>
  )
}

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="dark">
      <head>
        <HeadContent />
      </head>
      <body className="bg-neutral-950 text-neutral-50">
        {children}
        <Scripts />
      </body>
    </html>
  )
}
vite.config.ts ```ts import { tanstackStart } from '@tanstack/react-start/plugin/vite' import { defineConfig } from 'vite' import tsConfigPaths from 'vite-tsconfig-paths' import react from '@vitejs/plugin-react' import path from 'path' export default defineConfig({ plugins: [ tsConfigPaths({ projects: ['./tsconfig.json'], }), tanstackStart({ customViteReactPlugin: true, }), react(), ], resolve: { alias: { '@': path.resolve(dirname, './src'), }, }, }) 
tsconfig
tsconfig
ts { "include": [ "/*.ts", "/.tsx" ], "compilerOptions": { "strict": true, "esModuleInterop": true, "jsx": "react-jsx", "module": "ESNext", "moduleResolution": "Bundler", "lib": [ "DOM", "DOM.Iterable", "ES2022" ], "isolatedModules": true, "resolveJsonModule": true, "skipLibCheck": true, "target": "ES2022", "allowJs": true, "forceConsistentCasingInFileNames": true, "baseUrl": ".", "paths": { "@/": [ "./src/" ], "@convex/": [ "./convex/*" ] }, "noEmit": true } } ```
1 Reply
other-emerald
other-emeraldOP•3mo ago
Found the problem, i was with the legacy app.config.ts in my structure (probably following convex doc n/or clerk)

Did you find this page helpful?