fix(react-router, solid-router): make head function scripts load properly

[w00khyung]

#3687

Scripts returned from the head function in createFileRoute only get properly inserted and loaded when they have an async attribute. Scripts without the async attribute are not inserted at all.

Fixed the issue by modifying the ScriptAsset component in Asset.tsx to properly handle script loading through direct DOM manipulation.

[schiller-manuel]

but now this wont work during SSR anymore. so we need two different paths, one for SSR and one for client side rendering.
we also need the same solution for solid-router
cc @birkskyum

[w00khyung]

@schiller-manuel I’ve updated the PR based on your feedback.

During SSR, it renders a <script> tag as before. On the client side, it dynamically appends the script via useEffect.
I also applied the same fix to solid-router to keep both implementations consistent.

Let me know if there’s anything else I should improve.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4d535f5.

Command	Status	Duration	Result
nx run-many --targets=test:eslint,test:unit,tes...	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-06-17 18:16:18 UTC

[pkg-pr-new]

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsc
• tanstack-start-example-basic-static
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-solid-start-example-bare
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-static

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@4323

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@4323

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@4323

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@4323

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@4323

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@4323

@tanstack/react-router-with-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-with-query@4323

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@4323

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@4323

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@4323

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@4323

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@4323

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@4323

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@4323

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@4323

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@4323

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@4323

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@4323

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@4323

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@4323

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@4323

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@4323

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@4323

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@4323

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@4323

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@4323

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@4323

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@4323

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@4323

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@4323

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@4323

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@4323

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@4323

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@4323

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@4323

commit: 4d535f5

[brenelz]

Do we have e2e tests for this at all?

[schiller-manuel]

yeah we need e2e tests for this. not necessarily in this PR. @brenelz can you add some in a different PR (that would fail now)?

[schiller-manuel]

@w00khyung can you please add an e2e test for both react and solid?

could be a route next to e2e/solid-start/basic/src/routes/scripts.tsx
first check if the script executes when SSRed, then do a client side navigation to that route and also check if the script executed

[brenelz]

So a couple notes on this pr. It looks like the Solid version still fails the e2e test when client side navigating. The react one passes but the e2e tests seem to be doing a full page refresh. I'm not 100% sure why.

We can very simply add a e2e test in solid-start and react-start as follows.

// e2e/solid-start/basic/tests/navigation.spec.ts
test('client side navigating to a route with scripts', async ({ page }) => {
  await page.goto('/')
  await page.getByRole('link', { name: 'Scripts' }).click()
  expect(await page.evaluate('window.SCRIPT_1')).toBe(true)
  expect(await page.evaluate('window.SCRIPT_2')).toBe(undefined)
})

[w00khyung]

I’ll add e2e tests and look into the issue in Solid.

[birkskyum]

The " client side navigating to a route with scripts " appear to be failing for both solid and react

[schiller-manuel]

should we use this for solid? https://primitives.solidjs.community/package/script-loader/

[schiller-manuel]

thanks a lot for your contribution!