Scripts not loading properly (Document Head Management)

[johnyvelho]

Which project does this relate to?

Router

Describe the bug

External scripts are not getting loaded when adding it through scripts/HeadContent/Scripts component. <HeadContent /> and <Scripts /> components are rendered in the __root.tsx.

It only get loaded if the flag sync: true is added to the script. but doing it the script may not be ready when the page loads.

export const Route = createFileRoute('/onboarding/$participant_id/(nostepper)/signature/docusign')({
    component: DocusignSignaturePage,
    preload: false,
    loader: async ({ params, context }) => {
        const response = await signatureMutation(params.participant_id);

        if (response.error) {
            throw new Error('There was an error starting the signature process');
        }

        return {
            docusignUrl: response.data.url,
        };
    },
    head: () => {
        return {
            scripts: [
                {
                    src: 'https://js-d.docusign.com/bundle.js',
                },
            ],
        };
    },
});

minimal example: https://stackblitz.com/edit/tanstack-router-frejwjfz discussion on discord: https://discord.com/channels/719702312431386674/1007702008448426065/threads/1347295057870454804

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-frejwjfz

Steps to Reproduce the Bug or Issue

1. navigate to /about
2. observe in the network events that bundle.js script from docusign is not getting loaded

Expected behavior

external scripts get loaded with/without async flag

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[onionhammer]

I have yet to figure out how to have scripts or head sections of a route/index have any effect

[lo1tuma]

I’ve ran into the same issue.

[dburles]

I'm not having any luck either. The docs also aren't super clear on how to manage inline scripts and the provided example isn't correct.

[GraxMonzo]

Adding async: true resolves the problem for me

// ...
component: RootComponent,
scripts: () => [{ src: '/js/LunaPass.2.0.9.js', async: true }],
// ...

[onionhammer]

The scripts seem to get injected into the head and run, but they dont get loaded before the component loads, which is probably quite important.

If you specify a head or body scripts for a component on a route, they should finish loading before rendering the route's component.

[brenelz]

Is this fixed now that this pr is merged? https://github.com/TanStack/router/pull/4323