Some server-side modules incorrectly bundled into the client?

[wobsoriano]

Which project does this relate to?

Start

Describe the bug

Starting with @tanstack/[email protected], 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 https://github.com/TanStack/router/issues/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
[email protected]
  └─ @clerk/[email protected] (requires 2.3.4)
     ├─ @clerk/[email protected] (requires ^3.31.0)
     │  └─ @clerk/[email protected] (requires ^2.19.3)

If I understand https://github.com/TanStack/router/pull/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 [email protected] └─ @clerk/[email protected] (requires 2.3.4) ├─ @clerk/[email protected] (requires ^3.31.0) │ └─ @clerk/[email protected] (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 [email protected] └─ @clerk/[email protected] (requires 2.3.4) ├─ @clerk/[email protected] (requires ^3.31.0) │ └─ @clerk/[email protected] (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 [email protected] └─ @clerk/[email protected] (requires 2.3.4) ├─ @clerk/[email protected] (requires ^3.31.0) │ └─ @clerk/[email protected] (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 [email protected] └─ @clerk/[email protected] (requires 2.3.4) ├─ @clerk/[email protected] (requires ^3.31.0) │ └─ @clerk/[email protected] (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 [email protected] └─ @clerk/[email protected] (requires 2.3.4) ├─ @clerk/[email protected] (requires ^3.31.0) │ └─ @clerk/[email protected] (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

[leonfs]

has this been finally solved upstream?

[athammer]

Downgrading hasn't helped in my case, sadly. I've downgraded all the way down to 1.125.0 for Tanstack and 0.26.0 for Clerk. This appears to have happened when I introduced Clerk into Tanstack Start application.

However, after following a bunch of advice for both this and the other thread, I managed to get a bandaid fix working.

For my vite.config.ts file I added:

  resolve: {
    alias: [
      {
        find: "use-sync-external-store/shim/index.js",
        replacement: "react",
      },
      {
        find: "cookie",
        replacement: "cookie-es",
      },
    ],
  },

For my package.json file I added: "cookie-es": "^2.0.0",

My versions are: (I've tested a lot of different versions and doesn't appear to matter tmk)

  # TanStack
  "@tanstack/react-form": ^1.27.1
  "@tanstack/react-query": ^5.90.12
  "@tanstack/react-query-devtools": ^5.91.1
  "@tanstack/react-router": ^1.140.0
  "@tanstack/react-router-devtools": ^1.140.0
  "@tanstack/react-router-ssr-query": ^1.140.0
  "@tanstack/react-start": ^1.140.0
  "@tanstack/react-table": ^8.21.3

  # Auth
  "@clerk/tanstack-react-start": ^0.27.8

No other code changes needed on my end, and this seems to be the maximum changes needed, remove any of this (at least for me) and it seems to break sadly. Hope this helps someone!