htmlstreamofficial
Request to correct Preline integration with Astro
The docs are wrong about how the Preline javascript should be included in an Astro project. The fault is in the last step of the integration. Specifically this line:
<script is:inline src="./assets/vendor/preline/dist/preline.js"></script>
This is from docs
Using is:inline here is the first issue. is:inline means that Astro will not bundle preline.js when building, which means that preline.js will only exist in the dev environment. This import as is will never resolve as mentioned in the Astro docs.
To avoid bundling the script, you can use the is:inline directive.
The second issue is the path to preline.js. In my case, the path didn't work even in dev mode. The path to preline.js was ../../node_modules/preline/dist/preline.js.
An elegant solution tested in production is:
<script>import "preline/dist/preline.js";</script>
I'd like to thank @MoustaphaDev for suggesting this solution.
<script>import "preline/dist/preline.js";</script>
This fix also error with Cloudflare pages not correctly working since no script can be found.
Thanks ! @krankos
This error troubled me for 3 hours last night.
However, this post saved 3 products.
Thank you very much.
see the astro documentation here https://docs.astro.build/en/guides/client-side-scripts/#client-side-scripts
in my file src/layouts/Layout.astro
---
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" />
</head>
<body class="bg-black-800 font-[Poppins] light">
<slot />
</body>
</html>
<script src="../../node_modules/preline/preline.js"></script>
Hey @krankos - thanks for sharing workaround, we've added a backlink to our docs for this workaround solution.
Cheers!
Has anyone managed to get this working with View Transitions?
Im looking for this too
Has anyone managed to get this working with View Transitions?
yes was trying to acheive the same , fortunately there is a work around
<script>
document.addEventListener('astro:page-load', async () => {
const preline = await import('preline/dist/preline.js')
preline.HSStaticMethods.autoInit()
})
</script>
the autoInit method reinitializes preline as mentioned here for svelte
Why not just update the docs instead of including a workaround at the bottom of the page?
https://preline.co/docs/frameworks-astro.html
Why not just update the docs instead of including a workaround at the bottom of the page?
https://preline.co/docs/frameworks-astro.html
Hahaha ciao Zank sono Glad[I]a[T]or 7, guarda dove ti trovo
The issue should be re-opened and the documentation should be updated instead of linking to a workaround. Are there any concerns?
