Closed krankos closed 7 months ago
<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?
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?
Why not just update the docs instead of including a workaround at the bottom of the page?
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?
I have this error in my console when i tried add any component with JS like a Advanced Select or File Uploader. I'm Preline Pro adquired
VM45:14 Uncaught SyntaxError: Expected ',' or '}' after property value in JSON at position 529 (line 14 column 50) at JSON.parse (<anonymous>) at new e3 (preline_dist_preline__js.js?v=703cbe16:1841:80) at preline_dist_preline__js.js?v=703cbe16:1916:21 at NodeList.forEach (<anonymous>) at e3.autoInit (preline_dist_preline__js.js?v=703cbe16:1912:166) at preline_dist_preline__js.js?v=703cbe16:1921:397
package.json:
"dependencies": { "@astrojs/netlify": "^5.5.2", "@astrojs/react": "^3.6.2", "@astrojs/tailwind": "^5.0.4", "@popperjs/core": "^2.11.8", "@preline/select": "^2.4.1", "@supabase/supabase-js": "^2.39.1", "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", "astro": "^4.15.4", "dropzone": "^6.0.0-beta.2", "lodash": "^4.17.21", "micromatch": "^4.0.5", "preline": "^2.4.1", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwindcss": "^3.4.0" }, "devDependencies": { "@tailwindcss/forms": "^0.5.9", "@types/micromatch": "^4.0.6", "prettier": "^3.1.1", "prettier-plugin-astro": "^0.12.2" }
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:
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:
I'd like to thank @MoustaphaDev for suggesting this solution.