Url import will not work if the project root is set to srcDirectory

[mo36924]

Which project does this relate to?

Start

Describe the bug

If the project root is set to srcDirectory, url importing css files at build time will fail to load the files.

If you do not set a value for srcDirectory (src) or set it to app and move the routes or styles directory to that directory, the build will succeed.

% npm run build

> build
> vite build

vite v6.3.5 building for production...
Generated route tree in 38ms
✓ 123 modules transformed.
.tanstack/start/build/client-dist/.vite/manifest.json        0.42 kB │ gzip:  0.22 kB
.tanstack/start/build/client-dist/assets/app-tn0RQdqM.css    0.00 kB │ gzip:  0.02 kB
.tanstack/start/build/client-dist/assets/main-CNPeYpeZ.js  262.25 kB │ gzip: 83.62 kB
✓ built in 702ms
vite v6.3.5 building SSR bundle for production...
"H3Error", "MIMES", "callNodeListener", "createApp", "createAppEventHandler", "createError", "createEvent", "createRouter", "defineLazyEventHandler", "defineNodeListener", "defineNodeMiddleware", "defineRequestMiddleware", "defineResponseMiddleware", "defineWebSocket", "dynamicEventHandler", "fromNodeMiddleware", "fromPlainHandler", "fromWebHandler", "isCorsOriginAllowed", "isError", "isEventHandler", "isStream", "isWebResponse", "lazyEventHandler", "promisifyNodeListener", "sanitizeStatusCode", "sanitizeStatusMessage", "serveStatic", "splitCookiesString", "toEventHandler", "toNodeListener", "toPlainHandler", "toWebHandler" and "useBase" are imported from external module "h3" but never used in "node_modules/@tanstack/start-server-core/dist/esm/h3.js" and "node_modules/@tanstack/start-server-core/dist/esm/index.js".
✓ 37 modules transformed.
[plugin vite:css-post] Sourcemap is likely to be incorrect: a plugin (vite:css-post) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
✓ built in 99ms
✔ Generated public .output/public                                                                                                                                            nitro 9:29:23
ℹ Building Nitro Server (preset: node-server, compatibility date: 2024-11-19)                                                                                                nitro 9:29:23

[nitro 9:29:24]  ERROR  Error: Could not load /workspace/styles/app.css?url (imported by routes/__root.tsx): ENOENT: no such file or directory, open '/workspace/styles/app.css?url'


undefined

error during build:
Error: Could not load /workspace/styles/app.css?url (imported by routes/__root.tsx): ENOENT: no such file or directory, open '/workspace/styles/app.css?url'
    at async open (node:internal/fs/promises:638:25)
    at async Module.readFile (node:internal/fs/promises:1238:14)
    at async file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:21159:25
    at async Queue.work (file:///workspace/node_modules/rollup/dist/es/shared/node-entry.js:22379:32)

package.json

{
  "type": "module",
  "scripts": {
    "build": "vite build"
  },
  "devDependencies": {
    "@tanstack/react-router": "1.121.2",
    "@tanstack/react-start": "1.121.4",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "vite": "6.3.5"
  }
}

vite.config.ts

/// <reference types="vite/client" />

import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";

export default defineConfig({
  plugins: [tanstackStart({ tsr: { srcDirectory: "." } })],
});

routes/__root.tsx

import { Outlet, createRootRoute } from "@tanstack/react-router";
import cssUrl from "../styles/app.css?url";

export const Route = createRootRoute({
  head: () => ({
    links: [
      { rel: "stylesheet", href: cssUrl },
    ]
  }),
  component: () => <Outlet />,
});

styles/app.css

html {
  padding: 0;
}

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-2b7fypxs?file=package.json

Steps to Reproduce the Bug or Issue

1. Run npm run build with the above file configuration

Expected behavior

Build succeeds.

Screenshots or Videos

No response

Platform

• OS: macOS(15.5)
• Node.js: v22.12.0

Additional context

No response

[Kamleshpaul]

i put added

/// <reference types="vite/client" />

to routes/__root.tsx

like

/// <reference types="vite/client" />
import { Outlet, createRootRoute } from "@tanstack/react-router";
import cssUrl from "../styles/app.css?url";

export const Route = createRootRoute({
  head: () => ({
    links: [
      { rel: "stylesheet", href: cssUrl },
    ]
  }),
  component: () => <Outlet />,
});

and it did fix

[mo36924]

Thank you for your comment.

/// <reference types="vite/client" />

The above is written in vite.config.ts. There is no type checking error.

I will write the URL of stackblitz so that you can check the operation.

I get an error when I run npm run build. https://stackblitz.com/edit/tanstack-router-2b7fypxs?file=package.json

There are no errors when I run npm run build. https://stackblitz.com/edit/tanstack-router-fatn9mo1?file=package.json

[schiller-manuel]

does this issue still exist on the latest version?

[mo36924]

I just tried it and there was no problem with the latest version, so I will close the issue.