How to export script and execute it with next/script

Question

Salutations!

I am working on a Tailwind-css-Next.js-Typescript project trying to implement a theme toggler. It works fine except for the on-load flicker.

In the past I implemented a solution similar to https://github.com/vercel/next.js/discussions/12533 but now that only next/script is accepted, when using Typescript you can't export a script without export which paradoxically returns an Uncaught SyntaxError: Unexpected token 'export' error.
Also scripts like this won't execute anyway if you add them in the Head instead of inside the body. Which in turn is a problem because tailwind wants the script in the head.

This is my current script (note that I must use export{} and create a module otherwise the Typescript linter doesn't let me save the file):

var theme = localStorage.getItem("dark-theme") || "light";
if (theme === "dark") {
  document.documentElement.classList.add("dark");
}
export {};

And I try to use it like so:

import "./globals.css";
import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      {/*
        <head /> will contain the components returned by the nearest parent
        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
      <body>
        <Script
          type="module"
          strategy="beforeInteractive"
          src="themeScript.tsx"
        />
        {children}
      </body>
    </html>
  );
}

But this causes a Uncaught SyntaxError: Unexpected token 'export' (at themeScript.tsx:1:1)

I have also tried adding the following both in the Head and in the body. It doesn't return an error but doesn't produce a result.

<Script id="find-dark-mode">{localStorage.getItem("dark-theme") === true ? document.documentElement.classList.add('dark') : document.documentElement.classList.remove('dark')}</Script>

This question is similar to Next 13 & Tailwind Darkmode Flickering but I am asking about next 13 scripts in general.

I appreciate your time in advance.

How to export script and execute it with next/script

0 Answers0