Some server-side modules incorrectly bundled into the client?

[wobsoriano]

Which project does this relate to?

Start

Describe the bug

Starting with @tanstack/react-start@1.134.7, I think server-side modules are being incorrectly bundled into the client bundle. For example, in the Clerk SDK, this error shows up in the browser console when running dev server:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/cookie/dist/index.js?v=d2ee33e7' does not provide an export named 'parse' (at chunk-CEKR2FXD.mjs?v=d2ee33e7:4283:10)Understand this error
client:865 

Likely related to #5717

Your Example Website or App

https://github.com/clerk/clerk-tanstack-react-start-quickstart/pull/6/files

Steps to Reproduce the Bug or Issue

1. Clone the repo attached
2. Switch to the cookie-module-leak branch
3. Run npm run dev, see browser console

Expected behavior

Properly externalize server-side modules in client builds.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.134.9
• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Browser Version: [e.g. 91.1]
• Bundler: Vite
• Bundler Version: [e.g. 7.0.0]

Additional context

No response

[mackattack3k]

I'm getting this error for swr which is a dependency of Clerk.
Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/node_modules/use-sync-external-store/shim/index.js?v=f1295605' doesn't provide an export named: 'useSyncExternalStore'

The index.js is for node_modules/swr/dist/index.mjs. Note that this is not imported by tanstack form but only clerk for me.

$ bun why swr
swr@2.3.4
  └─ @clerk/shared@3.31.0 (requires 2.3.4)
     ├─ @clerk/backend@2.19.3 (requires ^3.31.0)
     │  └─ @clerk/tanstack-react-start@0.26.7 (requires ^2.19.3)

If I understand #5726 correctly it only affects tanstacks internal libraries and not others.

[JamalLyons]

I'm getting this error for swr which is a dependency of Clerk. Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/node_modules/use-sync-external-store/shim/index.js?v=f1295605' doesn't provide an export named: 'useSyncExternalStore'

The index.js is for node_modules/swr/dist/index.mjs. Note that this is not imported by tanstack form but only clerk for me.

$ bun why swr
swr@2.3.4
└─ @clerk/shared@3.31.0 (requires 2.3.4)
├─ @clerk/backend@2.19.3 (requires ^3.31.0)
│ └─ @clerk/tanstack-react-start@0.26.7 (requires ^2.19.3)
If I understand #5726 correctly it only affects tanstacks internal libraries and not others.

I'm getting this same issue, and its coming from clerk. Did you find a fix?

[mackattack3k]

I'm getting this error for swr which is a dependency of Clerk. Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/node_modules/use-sync-external-store/shim/index.js?v=f1295605' doesn't provide an export named: 'useSyncExternalStore'
The index.js is for node_modules/swr/dist/index.mjs. Note that this is not imported by tanstack form but only clerk for me.
$ bun why swr
swr@2.3.4
└─ @clerk/shared@3.31.0 (requires 2.3.4)
├─ @clerk/backend@2.19.3 (requires ^3.31.0)
│ └─ @clerk/tanstack-react-start@0.26.7 (requires ^2.19.3)
If I understand #5726 correctly it only affects tanstacks internal libraries and not others.

I'm getting this same issue, and its coming from clerk. Did you find a fix?

I solved it now by using the same approach with optimizeDeps like the PR I linked.
In my vite.config.ts I added these

optimizeDeps: {
    include: ['@clerk/tanstack-react-start', 'cookie'],
  },

One for the clerk issue with useSyncExternalStore and one for cookie which had an issue with parse import. Hope it works for you ✌️

[RadomirNowak]

I'm getting this error for swr which is a dependency of Clerk. Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/node_modules/use-sync-external-store/shim/index.js?v=f1295605' doesn't provide an export named: 'useSyncExternalStore'

The index.js is for node_modules/swr/dist/index.mjs. Note that this is not imported by tanstack form but only clerk for me.

$ bun why swr
swr@2.3.4
└─ @clerk/shared@3.31.0 (requires 2.3.4)
├─ @clerk/backend@2.19.3 (requires ^3.31.0)
│ └─ @clerk/tanstack-react-start@0.26.7 (requires ^2.19.3)
If I understand #5726 correctly it only affects tanstacks internal libraries and not others.

to me the fix was to rollback @tanstack/react-start to 1.134.6. Any other combinations of optimizeDeps and what not unfortunately did not work at all.

[jjrise]

I can also confirm when using Clerk

[APZelos]

I'm getting this error for swr which is a dependency of Clerk. Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/node_modules/use-sync-external-store/shim/index.js?v=f1295605' doesn't provide an export named: 'useSyncExternalStore'
The index.js is for node_modules/swr/dist/index.mjs. Note that this is not imported by tanstack form but only clerk for me.
$ bun why swr
swr@2.3.4
└─ @clerk/shared@3.31.0 (requires 2.3.4)
├─ @clerk/backend@2.19.3 (requires ^3.31.0)
│ └─ @clerk/tanstack-react-start@0.26.7 (requires ^2.19.3)
If I understand #5726 correctly it only affects tanstacks internal libraries and not others.

to me the fix was to rollback @tanstack/react-start to 1.134.6. Any other combinations of optimizeDeps and what not unfortunately did not work at all.

I have the same problem trying to use work os with start. Rolling back @tanstack/react-start to 1.134.6 fixed the issue also for me

[gbark]

Can also confirm that rolling back to 1.134.6 solved the issue

[DanielSintimbrean]

I'm getting this error for swr which is a dependency of Clerk. Uncaught (in promise) SyntaxError: The requested module 'http://localhost:3000/node_modules/use-sync-external-store/shim/index.js?v=f1295605' doesn't provide an export named: 'useSyncExternalStore'
The index.js is for node_modules/swr/dist/index.mjs. Note that this is not imported by tanstack form but only clerk for me.
$ bun why swr
swr@2.3.4
└─ @clerk/shared@3.31.0 (requires 2.3.4)
├─ @clerk/backend@2.19.3 (requires ^3.31.0)
│ └─ @clerk/tanstack-react-start@0.26.7 (requires ^2.19.3)
If I understand #5726 correctly it only affects tanstacks internal libraries and not others.

I'm getting this same issue, and its coming from clerk. Did you find a fix?

I solved it now by using the same approach with optimizeDeps like the PR I linked. In my vite.config.ts I added these

optimizeDeps: {
    include: ['@clerk/tanstack-react-start', 'cookie'],
  },

One for the clerk issue with useSyncExternalStore and one for cookie which had an issue with parse import. Hope it works for you ✌️

With pnpm, I also had to add public-hoist-pattern[]=cookie to the .npmrc file.
Tested in 1.134.18