On NextJS 14.1.3 I am seeing some strange behavior I do not understand. When I am visiting a page that loads JS from a file the application does not pull the JS every time. I am thinking it is some race condition on the script loading vs hydration but I cannot seem to figure it out. I have tried every <Script strategy="beforeInteractive | afterInteractive | lazyOnload" /> and I also tried using next/dynamic to load the specific component and it still wouldn’t work. Any ideas?
Layout.tsx
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<Script strategy="afterInteractive" src="https://cdn.jsdelivr.net/npm/apexcharts" />
<Script strategy="afterInteractive" src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" />
<Script strategy="afterInteractive" src="/hs-apexcharts-helpers.js" />
<body>
...
</body>
</html>
);
}
Chart.tsx
export default function NetWorthChart() {
useEffect(() => {
if (typeof window !== "undefined") {
buildChart('#hs-sales-line-chart');
}
}, []);
return ();
}
public/hs-apexcharts-helpers.js
function buildChart(...) {...}
I tried swapping the script strategies. I tried next/dynamic loading the component.