JavaScript script won't run in PRD | Astro Lounge | Page 1

velvet canopy May 22, 2024, 3:55 AM

#

When I run my site in dev, my TypeItJS script runs no problem. When it's built, it doesn't. Any ideas why? I can't figure it out.

https://github.com/0niSec/astro-security-blog/blob/master/src%2Fpages%2Findex.astro

GitHub

astro-security-blog/src/pages/index.astro at master · 0niSec/astro-...

Contribute to 0niSec/astro-security-blog development by creating an account on GitHub.

runic tundra May 22, 2024, 3:58 AM

#

`<script is:inline src="https://identity.netlify.com/v1/netlify-identity-widget.js"

</script>`

#

x D

#

without it astro is hoisting ( moving it all into one file if the file isnt too big )

#

and its creating an error which basically stopping the whole script

#

in dev the script tags raent optimized yet

velvet canopy May 22, 2024, 4:02 AM

#

Not that one 😄

#

oh wait

#

what?

#

that isnt the script im talking about tho?

runic tundra May 22, 2024, 4:02 AM

#

in basehead

#

try adding the is:inline

#

then to see the production build locally you can pnpm build && pnpm preview

velvet canopy May 22, 2024, 4:03 AM

#

that stops running it in dev now lol

runic tundra May 22, 2024, 4:04 AM

#

well thats crazy

velvet canopy May 22, 2024, 4:05 AM

#

        <script is:inline>
            import TypeIt from "typeit";

            new TypeIt("#header", {
                strings: "鬼 0niSec",
                loop: true,
            })
                .go()
                .pause(1500);
        </script>

#

this script

#

Just so im clear lol

runic tundra May 22, 2024, 4:05 AM

#

noo

#

in basehead put it on line 18

#

you can import from nodemodules in an inline script because astro wont process it btw

#

cant***

velvet canopy May 22, 2024, 4:07 AM

#

oooooooooooooooooo

#

yeah that did it

runic tundra May 22, 2024, 4:08 AM

#

🎉

velvet canopy May 22, 2024, 4:08 AM

#

Lol is it a 🐛 if I'm just an idiot?

#

Asking for a friend >.>

runic tundra May 22, 2024, 4:09 AM

#

haha nah that is a very niche error

#

not an idiot at all that wouldve stumped a lot of people

#

the error in console about the widget was a hint though

velvet canopy May 22, 2024, 4:10 AM

#

The resource at “http://localhost:4321/fonts/firacode-regular.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

#

what mean this

#

downloadable font: no supported format found (font-family: "Fira Code" style:normal weight:400 stretch:100 src index:1) source: (end of source list)

#

and that

severe prism May 22, 2024, 4:15 AM

#

There's a CORS error originating from the hoisted.js file. Pretty sure that's the file containing the TypeIt code. My guess would be that's the reason

runic tundra May 22, 2024, 4:15 AM

#

velvet canopy The resource at “http://localhost:4321/fonts/firacode-regular.ttf” preloaded wit...

ive not seen these errors but just going by the error text im assuming youre not actually using that font

velvet canopy May 22, 2024, 4:16 AM

#

It's being used and rendered so it def is

runic tundra May 22, 2024, 4:16 AM

#

should make a new support thread tbh lol

velvet canopy May 22, 2024, 4:16 AM

#

severe prism There's a CORS error originating from the hoisted.js file. Pretty sure that's th...

I'm just figuring out CORS and XSS and whatnot -- any idea how to fix?

runic tundra May 22, 2024, 4:16 AM

#

so others can help there because ive never used fonts

velvet canopy May 22, 2024, 4:16 AM

#

for SSG

runic tundra May 22, 2024, 4:16 AM

#

that error was coming from not having is:inline

velvet canopy May 22, 2024, 4:16 AM

#

ahhhh

runic tundra May 22, 2024, 4:17 AM

#

identity widget needed to be coming from the root page not from a different file

severe prism May 22, 2024, 4:19 AM

#

Sorry, I just noticed you were already discussing the cors error 😅

#

first hit on google is Astro related haha. Oliver's solution is suggested there as well https://answers.netlify.com/t/cors-error-with-identity-widget-on-deployed-website/75484

Netlify Support Forums

CORS error with Identity Widget on deployed website

Hi there, I’ve recently built a portfolio website with Astro and I’ve implemented Netlify CMS using the custom configuration mentioned on the docs and it works as intented. However, I’m running into an issue where the identity widget is displaying a CORS issue in the console: Access to script at 'https://identity.netlify.com/v1/netlify-identit...

severe prism May 22, 2024, 4:21 AM

#

velvet canopy The resource at “http://localhost:4321/fonts/firacode-regular.ttf” preloaded wit...

This warning is just a reminder that you shouldn't preload everything on your page, just the necessary stuff. In this case the font wasn't used immediately so the browser is warning you that you might not want to preload it

velvet canopy May 22, 2024, 4:22 AM

#

That's prefetch right?

severe prism May 22, 2024, 4:24 AM

#

It's called preload on the link tag, but same thing

velvet canopy May 22, 2024, 4:24 AM

#

hm, still getting it after setting prefetch to just hover

#

weird

#

ill fix it later

#

not doing that on this branch

severe prism May 22, 2024, 4:25 AM

#

Oh sorry, it's not the astro prefetching

velvet canopy May 22, 2024, 4:25 AM

#

ohhhh

#

what is it lol

severe prism May 22, 2024, 4:25 AM

#

It's this tag in your head <link rel="preload" href="/fonts/firacode-regular.ttf" as="font" type="font/ttf" crossorigin="">

velvet canopy May 22, 2024, 4:25 AM

#

ooooooooooo

#

duh

severe prism May 22, 2024, 4:26 AM

#

That being said I'm not sure why it's complaining because it seems to be used in the style tag in the head 🤷‍♂️ These warnings can be a bit mysterious sometimes

velvet canopy May 22, 2024, 11:24 PM

#

runic tundra you can import from nodemodules in an inline script because astro wont process i...

Okay maybe I didn't fix it lmao

#

Do I import the module in BaseHead in the script?

runic tundra May 22, 2024, 11:25 PM

#

wym sorry

velvet canopy May 22, 2024, 11:25 PM

#

It still won't work in prd when built lol

#

The TypeIt script

#

https://github.com/0niSec/astro-security-blog/blob/master/src%2Fcomponents%2FBaseHead.astro

GitHub

astro-security-blog/src/components/BaseHead.astro at master · 0niSe...

Contribute to 0niSec/astro-security-blog development by creating an account on GitHub.

runic tundra May 22, 2024, 11:27 PM

#

https://github.com/0niSec/astro-security-blog/blob/653365cd37542239df7f040c120987dd7c8728d6/src/components/BaseHead.astro#L30

#

needs to be is inline

velvet canopy May 22, 2024, 11:33 PM

#

So I did that just now (didn't push) and it still isn't working lol

runic tundra May 22, 2024, 11:35 PM

#

i pulled and tried it

#

seems working

#

im saying the netlify indeitfy script on line 30

#

the line i linked

#

velvet canopy May 22, 2024, 11:44 PM

#

No not that one haha

#

The TypeIt JS

runic tundra May 22, 2024, 11:45 PM

#

yes i know

#

remember because when that one doesnt have is inline

#

it creates an error in browser

velvet canopy May 22, 2024, 11:45 PM

#

Import declarations may only occur at top level in browser

#

So where do I import lol

runic tundra May 22, 2024, 11:46 PM

#

no

#

on line 30

#

add is:inline

#

just like in the picture

#

to the netlify indentify script

velvet canopy May 22, 2024, 11:46 PM

#

Yep isn't working locally

runic tundra May 22, 2024, 11:46 PM

#

and that will fix the typeit script

#

can you copy paste your basehead file

velvet canopy May 22, 2024, 11:47 PM

#

---
// Import the global.css file here so that it is included on
// all pages through the use of the <BaseHead /> component.
import "../styles/global.css";

interface Props {
    title: string;
    description: string;
    image?: string;
}

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
---

<!-- TypeIt JS -->
<script is:inline>
    import TypeIt from "typeit";

    new TypeIt("#header", {
        strings: "鬼 0niSec",
        loop: true,
    })
        .go()
        .pause(1500);
</script>

<!-- Netlify Identify -->
<script
    src="https://identity.netlify.com/v1/netlify-identity-widget.js"
    is:inline></script>

<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />

<!-- Font preloads -->
<link
    rel="preload"
    href="/fonts/firacode-regular.ttf"
    as="font"
    type="font/ttf"
    crossorigin
/>

<!-- Canonical URL -->
<link rel="canonical" href={canonicalURL} />

<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, Astro.url)} />

runic tundra May 22, 2024, 11:47 PM

#

yes

#

do not add is:inline to the typeit

velvet canopy May 22, 2024, 11:47 PM

#

ohhhh

runic tundra May 22, 2024, 11:47 PM

#

only add it do netlify identify

#

because when it is inline it cannot bundle from node modules

velvet canopy May 22, 2024, 11:51 PM

#

Oooookay, that did it lmao

#

ty again sir

#JavaScript script won't run in PRD