-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Description
Which project does this relate to?
Start
Describe the bug
In @responsive-image/react
I have a React component that is importing a CSS file. This is also preserved in the dist
output, with the expectation that the consuming app will be able to handle this properly, as most bundlers do (Vite, webpack).
This has been working fine, including in plain TanStack Router (see reproduction below), but also with other frameworks leveraging SSR (e.g. SolidStart, SvelteKit).
When consuming this in a TanStack Start app, it seems during SSR node is seeing that CSS import, as if the bundler has not compiled this away yet:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/simonihmig/Projects/oss/tanstack/router/node_modules/.pnpm/@responsive-image+react@1.1.4_blurhash@2.0.5_react-dom@19.0.0_react@19.0.0__react@19.0.0_thumbhash@0.1.1/node_modules/@responsive-image/react/dist/responsive-image.css
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:185:9)
... 6 lines matching cause stack trace ...
at process.processImmediate (node:internal/timers:505:21) {
cause: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/simonihmig/Projects/oss/tanstack/router/node_modules/.pnpm/@responsive-image+react@1.1.4_blurhash@2.0.5_react-dom@19.0.0_react@19.0.0__react@19.0.0_thumbhash@0.1.1/node_modules/@responsive-image/react/dist/responsive-image.css
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:185:9)
at defaultGetFormat (node:internal/modules/esm/get_format:211:36)
at defaultLoad (node:internal/modules/esm/load:94:16)
at nextLoad (node:internal/modules/esm/hooks:748:28)
at Hooks.load (node:internal/modules/esm/hooks:385:26)
at handleMessage (node:internal/modules/esm/worker:201:24)
at Immediate.checkForMessages (node:internal/modules/esm/worker:143:28)
at process.processImmediate (node:internal/timers:505:21) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
},
status: 500,
statusText: undefined,
headers: undefined,
data: undefined,
body: undefined,
unhandled: true
}
Your Example Website or App
Steps to Reproduce the Bug or Issue
Reproduction available in #5070.
First commit has a demo app based on client-side only TanStack Router, where this works fine. Second commit migrates to Start, where this is failing.
Run pnpm dev
inside of examples/react/with-responsive-image
.
Expected behavior
SSR is not seeing the CSS import, it should have been compiled to proper JS by Vite before hitting the node runtime.
Screenshots or Videos
No response
Platform
- Router / Start Version: latest main
- OS: Mac
Additional context
No response