search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.87k stars 307 forks source link

Request to correct Preline integration with Astro #61

Closed krankos closed 7 months ago

krankos commented 1 year ago

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.

Rush-er commented 1 year 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

lilyplw commented 1 year ago

This error troubled me for 3 hours last night.

However, this post saved 3 products.

Thank you very much.

krismawan4 commented 9 months ago

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>
jahaganiev commented 7 months ago

Hey @krankos - thanks for sharing workaround, we've added a backlink to our docs for this workaround solution.

Cheers!

fr33dr4g0n commented 7 months ago

Has anyone managed to get this working with View Transitions?

matiaspunx commented 5 months ago

Has anyone managed to get this working with View Transitions?

Im looking for this too

anasmohammed361 commented 5 months ago

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

zanhk commented 4 months ago

Why not just update the docs instead of including a workaround at the bottom of the page?

https://preline.co/docs/frameworks-astro.html

Rush-er commented 4 months ago

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

jmartsch commented 3 months ago

The issue should be re-opened and the documentation should be updated instead of linking to a workaround. Are there any concerns?

alberto-gomez-munity commented 2 months ago

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" }