Skip to content

Start: SSR fails on CSS import #5447

@simonihmig

Description

@simonihmig

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

#5070

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions