Skip to content

Dev server SSR do not load ESM version of externalized package #6125

@guyutongxue

Description

@guyutongxue

Which project does this relate to?

Start

Describe the bug

If a package has following package.json and no exports is defined:

{
    "name": "my-lib",
    "main": "src/index.cjs",
    "module": "src/index.mjs"
}

Then if it was externalized in vite.config.ts:

// vite.config.ts
const config = defineConfig({
  ssr: {
    external: true,
  },
  // rest...
});

Then when launch the dev server with vite, the SSR resolution will pick the CJS version of my-lib from main field, although we are importing it.

Your Example Website or App

https://github.com/guyutongxue/vite-ssr-cjs-issue

Steps to Reproduce the Bug or Issue

  1. bun i and cd packages/my-app and bun dev
  2. Launch the App, and you will see the my-lib was imported as CJS and hydrated later to ESM.

The my-lib just export a simple function returning which module type it is; and the app code just import it and render the return value to <App>.

Expected behavior

Expected always ESM with no hydration mistmatch.

Screenshots or Videos

Image

Platform

  • Router / Start Version: 1.141.5
  • OS: Windows, also reproduced on Mac
  • Browser: Edge
  • Browser Version: 143.0.3650.80
  • Bundler: Vite
  • Bundler Version: 7.3.0

Additional context

I'm not sure whether this is a Vite bug because I cannot make a reproducible example code on pure Vite SSR (too low level sorry).

I figured out that TanStack Start run into the code in Vite here:

https://github.com/vitejs/vite/blob/ef3d59648fd9dd3f9b3118d09d216dc0afcb8c33/packages/vite/src/node/ssr/fetchModule.ts#L52

that won't consider ESM module at all.

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