Using createRootRoute, Scripts, and HeadContent components adds same script multiple times #4585

Activity

1. max-programming

   changed the title [-]Using Scripts component and createRootRoute adds same script twice[/-] [+]Using Scripts component and createRootRoute adds same script multiple times[/+] on Jul 7, 2025
2. max-programming

   changed the title [-]Using Scripts component and createRootRoute adds same script multiple times[/-] [+]Using `createRootRoute`, `Scripts`, and `HeadContent` components adds same script multiple times[/+] on Jul 7, 2025
3. max-programming commented on Jul 7, 2025

   

   max-programming

   on Jul 7, 2025

   ContributorAuthor

   More actions

   Okay, so the problem is more complex than I thought.

   1. If the page with scripts is directly loaded, 2 script tags get added, and both execute
   2. If the page was navigated to, 2 script tags get added, and only one executes
4. razfriman commented on Jul 10, 2025

   

   razfriman

   on Jul 10, 2025

   More actions

   Im seeing this too, it is breaking my Google SEO JSON LD support.

   https://search.google.com/test/rich-results/result/r%2Freview-snippet?id=Qqz7QsPkCrUBLvXl2m9r2Q

   

   👍React with 👍3Reacted by Florian Ludot, Jan Poth and Jason
5. max-programming commented on Jul 10, 2025

   

   max-programming

   on Jul 10, 2025

   ContributorAuthor

   More actions

   @razfriman for the time being I recommend manually putting the script tag inside the head tag. Anywhere below or above the HeadContent component

   👍React with 👍1Reacted by Florian Ludot
6. florianldt commented on Jul 12, 2025

   

   florianldt

   on Jul 12, 2025

   More actions

   +1, maybe some added info here is that it doesn't come from tanstack start in my opinion as it is easily replicable with just the basic example of router/basic-file-based which isn't using start.

   Just replace export const Route = createFileRoute("/")({ ... }) by

   export const Route = createFileRoute("/")({
     component: Home,
     scripts: () => {
       return [
         {
           id: "homeFaq",
           type: "application/ld+json",
           children: JSON.stringify({
             "@context": "https://schema.org",
             "@type": "FAQPage",
             mainEntity: [
               {
                 "@type": "Question",
                 name: "What is the best way to learn React?",
                 acceptedAnswer: {
                   "@type": "Answer",
                   text: "The best way to learn React is to start with the basics and work your way up.",
                 },
               },
             ],
           }),
         },
       ];
     },
   });

   and you will see the duplication of <script id="homeFaq" type="application/ld+json" /> in the inspector.
7. max-programming commented on Jul 13, 2025

   

   max-programming

   on Jul 13, 2025

   ContributorAuthor

   More actions

   @florianldt yeah and this scripts will be added to the <body> tag (through <Scripts /> component). If scripts is inside head it will be put in the <head> tag (through <HeadContent /> component)
8. mbauchet commented on Jul 31, 2025

   

   mbauchet

   on Jul 31, 2025

   More actions

   Same issue here, Any updates on this?
9. razfriman commented on Jul 31, 2025

   

   razfriman

   on Jul 31, 2025

   More actions

   I was able to replicate it in: https://github.com/razfriman/tanstack-head-dupe

   Also managed to replicate it with a singular ROOT route: https://github.com/razfriman/tanstack-head-dupe/blob/root-route/src/routes/__root.tsx

   Discord thread: https://discord.com/channels/719702312431386674/1393343640524292166/1393413635807772745

   ❤️React with ❤️2Reacted by mbauchet and Raz Friman
10. ianjmacintosh commented on Aug 13, 2025

    

    ianjmacintosh

    on Aug 13, 2025

    Contributor

    More actions

    Ran into this issue today, thanks for documenting!

    👍React with 👍1Reacted by Brian Kimball
11. abielzulio commented on Aug 29, 2025

    

    abielzulio

    on Aug 29, 2025

    More actions

    facing the same issues, any update?
12. bskimball commented on Aug 29, 2025

    

    bskimball

    on Aug 29, 2025

    More actions

    facing the same issues, any update?

    I just manually insert the script tags as a work around for now

    https://github.com/bskimball/tanstack-hono/blob/master/src/routes/__root.tsx
13. lotap commented on Sep 4, 2025

    

    lotap

    on Sep 4, 2025

    More actions

    I also ran into this issue.

    As others have suggested, putting the script tag in the head directly works as a temporary workaround.

    If you can't use the head tag for some reason, adding the script to a child component with async={true} also seems to be an effective solution due to React's special rendering behavior for <script >
14. schiller-manuel

    closed this as completedin #5095on Sep 18, 2025