Hi @brave fiber. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Confusing Asset 404
burnt horizonBOT
Astro uses a code fence (---) to identify the component script in your Astro component. The script tag (<script src='./wistia.ts' />) you're using to import the wistia.ts file is not recognized by Astro in this context.
Instead, you should import your wistia.ts file at the top of your Astro component, within the component script identified by the code fence. Here's an example of how you can do this:
---
import './wistia.ts';
import type { WistiaVideoProps as Props } from "@definitions/atoms";
import styles from "./WistiaVideo.module.scss";
// rest of your code
---
If you're still facing issues, it might be due to the path you're using to import the wistia.ts file. Make sure the path is correct. If the wistia.ts file is in the same directory as your Astro component, the path you've used should work. If it's not, you'll need to adjust the path accordingly.
Also, ensure that your wistia.ts file is correctly formatted and doesn't contain any errors, as this could also cause issues when trying to import it.
If you're still having trouble, consider checking the Astro troubleshooting guide (https://docs.astro.build/en/guides/troubleshooting) for more information.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
Yes, it's possible to conditionally load scripts in Astro based on component props. You can use the client:load directive to control when a script is loaded. However, the client:load directive is not conditional and will load the script as soon as possible.
To conditionally load a script based on a prop value, you can use a conditional (ternary) operator within your Astro component. Here's an example of how you can do this:
---
import type { WistiaVideoProps as Props } from "@definitions/atoms";
import styles from "./WistiaVideo.module.scss";
const { props } = Astro;
// rest of your code
---
{props.lazyLoad === "enabled" && (
<>
<script src='./wistia.ts'></script>
<div
id={props.id ? props.id : undefined}
class={`${props.classList} ${styles.video} ${
props.roundedEdges ? "" : styles.noRoundedEdges
}`}
>
{/* rest of your code */}
</div>
</>
)}
In this example, the wistia.ts script and the rest of your component will only be rendered if props.lazyLoad is equal to "enabled".
Please note that this approach will not load the script asynchronously. The script will be loaded and executed as soon as it's encountered in the HTML. If you need to load the script asynchronously, you might need to use a different approach, such as dynamically importing the script using JavaScript.