Shopify Hydrogen useLoadScript() loads, but code is not working

I'm using flowbite in my Shopify Hydrogen build. This works: export default function App() { const nonce = useNonce(); /** @type {LoaderReturnData} */ const data = useLoaderData(); const location = useLocation(); const isHomePage = location.pathname === '/'; return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <Meta /> <Links /> </head> <body className="font-rcc"> <Layout isHomePage={isHomePage} {...data}> <Outlet /> </Layout> <ScrollRestoration nonce={nonce} /> <Scripts nonce={nonce} /> <LiveReload nonce={nonce} /> <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js" defer></script> </body> </html> ); } but this does not. I'm using the proper useLoadScript in this case, and I do see in the DOM export default function App() { const nonce = useNonce(); /** @type {LoaderReturnData} */ const data = useLoaderData(); const location = useLocation(); const isHomePage = location.pathname === '/'; const scriptStatus = useLoadScript('https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js'); useEffect(() => { if (scriptStatus === 'done') { // do something } }, [scriptStatus]); return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <Meta /> <Links /> </head> <body className="font-rcc"> <Layout isHomePage={isHomePage} {...data}> <Outlet /> </Layout> <ScrollRestoration nonce={nonce} /> <Scripts nonce={nonce} /> <LiveReload nonce={nonce} /> </body> </html> ); } When I view inspector, I see it in the DOM and there is an 'event' tag next to it. Clicking that, I see 'error' and 'load' error: () => { reject(false); } load: () => { resolve(true); } It seems like a timing thing? Struggling on this one!

Comment (0)

You’ll be in good company