#Using document/window

42 messages · Page 1 of 1 (latest)

tulip steeple
#

I encountered this error during the build: document is not defined
I understand that it has to do with what's explained on this page: https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined
However, I'm not sure how I can deal with it in my case. Here is a minimal reproducible example.
src/pages/example/index.astro

---
---

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
    <h1>Test</h1>
    <div id="output"></div>

    <script src="./script.js"></script>
</body>
</html>

src/pages/example/script.js

document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM fully loaded and parsed');
    
    const outputDiv = document.getElementById('output');
    if (outputDiv) {
        outputDiv.textContent = 'This text was added by JavaScript!';
    }

    alert('Window width: ' + window.innerWidth);
});
Docs
Troubleshooting

Need help? Stuck on something? We've got you covered.

#

Is it the fact that my script lives under src/pages that causes the problem?

obtuse lodge
tulip steeple
obtuse lodge
#

I think the absolute simplest solution would be to just inline the code into the script tag

tulip steeple
#

What if I move the submodule into the components dir, would there be a way to hack together a solution to make everything work?

obtuse lodge
#

I'm still trying to understand why there is a submodule involved in the first place 😅

#

but if your page is in the example folder and it is coming from a submodule that is meant to be an astro page, then the git submodule contains invalid astro code. If the submodule is meant to be used in the pages directory then having a file in there called script.js is not going to work

#

I think if you could share your file tree and explain which files you can't change I might be able to help

tulip steeple
#

Yeah so basically there is the website I'm working on that's built using Astro, then there is another project completely unrelated that's just a webpage and some scripts. It's a simple dir with an index.html and a bunch of pure JS scripts (script-1.js, script-2.js, etc.). The project is independent, I can just clone it and open index.html in the browser and it works, and I want to keep it that way. Now I want this to be included into my astro website, so I thought I would just add it as a submodule and it would be straightforward, but maybe I thought wrong.

obtuse lodge
#

I see

#

let me think for a sec 😅

tulip steeple
#

Yeah sorry I lied, it's an html file not an astro one that should be in my submodule, but I want to take it step by step lol

obtuse lodge
#

Haha, yeah that makes a difference, but I think you might be lucky. https://stackoverflow.com/a/76466343 (answered by Chris from the core team) It seams that you can import an html file and then just use it like you would use an Astro component 🙂 so put your submodule somewhere in your src directory and then import the html file from there. I would hope that the scripts in the submodule would still work 🤔

Stack Overflow
Inject HTML from file in Astro

Is it possible to inject HTML from file in Astro?
Something like set:html="..." but instead of string, I want to pass file path, for example /icon.svg

tulip steeple
#

I will still give it a try

obtuse lodge
#

Ah yep, that would affect those scripts.

tulip steeple
#

Yeah I just tried it, it doesn't work 🥲

#

What about throwing everything in /public?

obtuse lodge
#

The only thing I can think of is to create symbolic links in the public folder that link to those scripts...but I think you'd still have to change the src location of those script to /script.js. I don't think that would work in your case

#

I don't think that would change anything. Could you inline the scripts in the source of your submodule?

#

This is getting into heavily overengineered territory btw haha

tulip steeple
tulip steeple
tulip steeple
obtuse lodge
#

but that would then break the standalone html page

obtuse lodge
#

I'll keep thinking about this, maybe I can come up with something

tulip steeple
#

So currently I have my submodule in src/components, the scripts symlinked into public and a page importing the html from the submodule under src/pages, but it's still not working and this time idk why

#

the script is imported using <script src="/script.js" type="module"></script>

obtuse lodge
#

🤔 There's a chance the symlink doesn't move the files around. You can run astro build and then you can check the dist folder to see if the scripts are being added to the root of the folder

tulip steeple
#

Yeah, that was it...

obtuse lodge
#

Hmm it could be that the copying of public assets is done by the compiler and not vite, but I'm really not sure

#

Another idea I just had: could you host your html based page somewhere (for example GH pages)? From there you could either fetch the page in your astro app and use set:html to display it somewhere in your code? Or you could just use an iframe?

tulip steeple
#

Yeah I think I will just create a github page for my project and provide a link to it from my website. It's by far the simplest solution 🙂

obtuse lodge
#

Haha, yeah, that's honestly sometimes the best way to go 🙂

tulip steeple
#

Still I learned a lot so everything is not lost

#

Thanks a lot for your help and patience btw