SPA Mode: how to handle vanilla js scripts when moving away from template file? #10032

GabenGar · 2024-09-26T17:21:57Z

GabenGar
Sep 26, 2024

I have a vanilla index.html + a bunch of javascript files it loads like this:

<!DOCTYPE html>
<html>
  <head>
     <script defer src="script1.js"></script>
     <script defer src="script2.js"></script>
     <script defer src="script3.js"></script>
  </head>
  
  <body>
    ...
  </body>
</html>

The scripts are doing a lot of gnarly vanilla javascript things, including referencing each other's symbols from global scope. They are not ESM-ready at all and rewriting them along with introducing build step with bundling is quite an undertaking.

The first step I took is making it a template file with the root rendering nothing and being hidden, while all other assets are in public folder:

   <body>
       <div id="remix-root" hidden><!-- Remix SPA --></>
       ...
  </body>

Now it builds and works as before, however I need the html as a jsx file in order to split into components, so its markup has to be moved into remix rendering tree.
After some fiddling I get these files:

root.tsx

import { useEffect } from "react";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import { init } from "#legacy";

import "./styles/global.scss";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script defer src="script1.js"></script>
        <script defer src="script2.js"></script>
        <script defer src="script3.js"></script>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

export function HydrateFallback() {
  return <p>Loading...</p>;
}

routes/_index.tsx

export default function Index() {
   return <>...</>
}

However, the scripts crash due to trying access document object and getting null on its methods.
I assume because they run during fallback or before the first react render, but how do I make them run after first render without making them a part of the bundler tree?

GabenGar · 2024-09-29T12:50:57Z

GabenGar
Sep 29, 2024
Author

So I kinda progressed on the issue by moving all the markup to the root instead of the page, which I assumed means, in SPA mode context, that an entirety of the page is rendered on server first. But then I get a bunch of hydration errors, which is expected, since the offending scripts modify the markup before the first react render.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

SPA Mode: how to handle vanilla js scripts when moving away from template file? #10032

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

SPA Mode: how to handle vanilla js scripts when moving away from template file? #10032

Uh oh!

GabenGar Sep 26, 2024

Replies: 1 comment

Uh oh!

GabenGar Sep 29, 2024 Author

GabenGar
Sep 26, 2024

GabenGar
Sep 29, 2024
Author