FOUC with history.replaceState introduced in @tanstack/solid-router@1.168.1

[vladmiller]

Which project does this relate to?

Router

Describe the bug

I'm using history.replaceState({}) to update state in URL each time I navigate the gallery. I want to preserve the ID of the currently visible slide, so I can show the same slide on page refresh.

With the latest release router release it introduced FOUC for history.replaceState(...). In Chrome (Chromium) and also confirmed in Arc and Chrome on MacOS. In the logs I'm seeing app reloading .css files every time when history.replaceState is executed.

It also only happens with the built application, not in dev mode.

Your Example Website or App

https://github.com/vladmiller/tanstack-solid-router-fouc-reproduction

Steps to Reproduce the Bug or Issue

1. pnpm build && pnpm serve
2. Navigate to serve URL in Chromium based browser
3. Click on the button to see an effect
   4

Expected behavior

Well, it should not reload css styles.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.168.1
• OS: Linux
• Browser: Chromium
• Browser Version: 146.0.7680.80
• Bundler: vite
• Bundler Version: 8.01

Additional context

The previous versions did not have this bug, you can see it with these dev dependencies.

  "dependencies": {
    "@tanstack/solid-router": "1.167.5",
    "@tanstack/solid-start": "1.166.18",
    "solid-js": "^1.9.11"
  },
  "devDependencies": {
    "@tanstack/router-plugin": "1.167.1",
    "typescript": "^5.9.3",
    "vite": "^8.0.1",
    "vite-plugin-solid": "^2.11.11"
  }

[vladmiller]

In fact this also seems to be happening when clicking on <Link />. I have updated the repo (added a 2nd page) and I can clearly see the fouc.

[vladmiller]

@Sheraff the same issue could also possibly affect react as well. Maybe worth checking.

[Sheraff]

@Sheraff the same issue could also possibly affect react as well. Maybe worth checking.

Yep, already on it, and Vue as well. Could you test the PR packages on your end to see if that fixes the issue? #6998 (comment)

[vladmiller]

@Sheraff yes, will do in a bit and report back.

[vladmiller]

@Sheraff nope, now it crashes in the browser. The styles are not applied.

pnpm build && pnpm serve, I've also removed dist and node_modules

(index):1 Uncaught ReferenceError: _$HY is not defined
    at (index):1:442
(anonymous)	@	(index):1

{
  "name": "tanstack-headcontent-fouc-repro",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@tanstack/solid-router": "https://pkg.pr.new/@tanstack/solid-router@6998",
    "@tanstack/solid-start": "https://pkg.pr.new/@tanstack/solid-start@6998",
    "solid-js": "^1.9.11"
  },
  "devDependencies": {
    "@tanstack/router-plugin": "https://pkg.pr.new/@tanstack/router-plugin@6998",
    "typescript": "^5.9.3",
    "vite": "^8.0.1",
    "vite-plugin-solid": "^2.11.11"
  }
}

[vladmiller]

<script>
    self.$R = self.$R || [];
    _$HY.r["0000000010000"] = $R[0] = Object.assign(new TypeError("Cannot read properties of null (reading 'options')"), {
        stack: "TypeError: Cannot read properties of null (reading 'options')\n    at useTags (file:///home/john/Projects/tanstack-bug/dist/server/assets/router-DO6xzFsh.js:1109:23)\n    at HeadContent (file:///home/john/Projects/tanstack-bug/dist/server/assets/router-DO6xzFsh.js:1242:15)\n    at createComponent (file:///home/john/Projects/tanstack-bug/node_modules/.pnpm/solid-js@1.9.11/node_modules/solid-js/dist/server.js:398:15)\n    at RootComponent (file:///home/john/Projects/tanstack-bug/dist/server/assets/router-DO6xzFsh.js:1322:15)\n    at createComponent (file:///home/john/Projects/tanstack-bug/node_modules/.pnpm/solid-js@1.9.11/node_modules/solid-js/dist/server.js:398:15)\n    at out (file:///home/john/Projects/tanstack-bug/dist/server/server.js:5554:22)\n    at children (file:///home/john/Projects/tanstack-bug/dist/server/server.js:5562:25)\n    at Show (file:///home/john/Projects/tanstack-bug/node_modules/.pnpm/solid-js@1.9.11/node_modules/solid-js/dist/server.js:464:68)\n    at createComponent (file:///home/john/Projects/tanstack-bug/node_modules/.pnpm/solid-js@1.9.11/node_modules/solid-js/dist/server.js:398:15)\n    at keyedOut (file:///home/john/Projects/tanstack-bug/dist/server/server.js:5557:27)"
    });
</script>

[Sheraff]

That's a mixed dependency issue. When trying pre-release stuff like that from pkg.new, I usually go full override to make sure it's not pulling it different versions of the same dep

  "pnpm": {
    "overrides": {
      "@tanstack/router-core": "https://pkg.pr.new/@tanstack/router-core@6998",
      "@tanstack/solid-router": "https://pkg.pr.new/@tanstack/solid-router@6998",
      "@tanstack/solid-start": "https://pkg.pr.new/@tanstack/solid-start@6998"
    }
  }

Using this, the FOUC seems gone on my end using your repo

[vladmiller]

@Sheraff yes, the issue is gone. Can't reproduce it anymore.