compile `.ts` to `.js` in `public` and use in `<head>`

Unanswered

piscopancer posted this in #help-forum

2024-02-10T13:01:40.000Z

I am sorry for being ignorant, but I do not quite understand how to tackle this issue:
I had theme.js file in public folder with the following content

const dark = localStorage.getItem('theme') === 'dark' ?? undefined
if (dark) {
  document.documentElement.classList.add('dark')
}

I could easily embed it as a script tag source too

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <head>
        <script src={'theme.js'}></script>
      </head>
      <body className={`${inter.className} dark:bg-zinc-900`}>{children}</body>
    </html>
  )
}

Do not ask why, but now I want this file as a .ts script, and have it compiled, let's say, right into public folder automatically as I save my project. I believed it would happen on its own, but it does not seem working meanwhile the rest of my app's ts scripts compile behind the scene.

As the result i get a 404 error in the console.

What should I do to fix it and what do I not understand? Does it have to do with TypeScript or next's compiler?

1 Reply

Cuvier’s Dwarf Caiman

2024-02-10T16:49:54.000Z

Why donâ€™t you just do it without an â€œexternalâ€ script? You can achieve the same functionality with just Next.js.