#unable to import store in script that is supposed to go into the head tag

4 messages · Page 1 of 1 (latest)

subtle patrol
#

so I have script tag as <script slot="head-script" type="module"> wrapper in my layout component , which looks like <head>....<slot name="head-script" />....</head>
I am trying to import a nanostore in it, and it tries to look for it in {app_url}/store/stores and it then returns a 404

this is what the code looks like

<Layout title="simple portfolio">
    <script slot="head-script" type="module">
        import { $sphereTranslateProps } from "../stores/store";
        console.log($sphereTranslateProps.get());
    </script>
....

if i dont include type=module then it tells me that import statements are only allowed in modules

and this is what the html of the layout file looks like:

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="description"
            content="Portfolio site for Meher gill, a frontend / fullstack web dev"
        />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <slot name="head-script" />
    </head>
    <body>
        <slot />
    </body>
</html>

The path of nanostore is definitely correct, infact i am using that nanostore again in the same file in another script tag

<script>
    import { $sphereTranslateProps } from "../stores/store";
    console.log($sphereTranslateProps.get())
</script>

and it works just fine

I can also just directly insert the script tag in the Layout.astro file's head tag , without using it as a named slot , that also works but for some reason I just cant seem to import it in that script

plucky plinth
#

If you remove the slot and type attributes it should work fine. Script tags in Astro are hoisted to the head tag as a module by default so there is no need to use a slot or type attribute

subtle patrol
plucky plinth