fix(start): fix script initialization order (#3215)

packages/react-router/src/ScriptOnce.tsx

@@ -1,14 +1,40 @@
+import jsesc from 'jsesc'
 import { useRouter } from './useRouter'
 
 export function ScriptOnce({
   children,
   log,
+  sync,
 }: {
   children: string
   log?: boolean
+  sync?: boolean
 }) {
   const router = useRouter()
+  if (typeof document !== 'undefined') {
+    return null
+  }
 
-  router.injectScript(children, { logScript: log })
-  return null
+  if (!sync) {
+    router.injectScript(children, { logScript: log })
+    return null
+  }
+
+  return (
+    <script
+      className="tsr-once"
+      dangerouslySetInnerHTML={{
+        __html: [
+          children,
+          (log ?? true) && process.env.NODE_ENV === 'development'
+            ? `console.info(\`Injected From Server:
+${jsesc(children.toString(), { quotes: 'backtick' })}\`)`
+            : '',
+          'if (typeof __TSR__ !== "undefined") __TSR__.cleanScripts()',
+        ]
+          .filter(Boolean)
+          .join('\n'),
+      }}
+    />
+  )
 }

packages/start-client/src/Meta.tsx

@@ -121,8 +121,9 @@ export const useMetaElements = () => {
         <Asset {...asset} key={`tsr-meta-${JSON.stringify(asset)}`} />
       ))}
       <>
-        <ScriptOnce log={false} children={minifiedScript} />
+        <ScriptOnce log={false} children={minifiedScript} sync={true} />
         <ScriptOnce
+          sync={true}
           children={`__TSR__.dehydrated = ${jsesc(
             router.options.transformer.stringify(dehydratedCtx),
             {

packages/start-router-manifest/src/index.ts

@@ -32,7 +32,6 @@ export function getFullRouterManifest() {
     attrs: {
       src: vinxiClientManifest.inputs[vinxiClientManifest.handler]?.output.path,
       type: 'module',
-      async: true,
       suppressHydrationWarning: true,
     },
   })