I am exploring potentially building a site using the Astro framework. As such I am working through the tutorial. Unfortunately something is not quite working right and its baffling me as to what the cause may be. I'm at the point where it tells you to insert JavaScript into a script tag in one of the components. My understanding of the documentation is the process is supposed to more or less "just work". One creates a script tag and imports the JS file, then Astro builds it. Instead I see the following errors when building the website:
5:52:14 PM: 22:52:14 [ERROR] [vite] x Build failed in 15ms
5:52:14 PM: Could not resolve "../scripts/menu.js" from "src/pages/blog.astro?astro&type=script&index=0&lang.ts"
5:52:14 PM: file: /opt/build/repo/src/pages/blog.astro?astro&type=script&index=0&lang.ts
5:52:14 PM: Stack trace:
5:52:14 PM: at getRollupError (file:///opt/build/repo/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
5:52:14 PM: at ModuleLoader.handleInvalidResolvedId (file:///opt/build/repo/node_modules/rollup/dist/es/shared/node-entry.js:20216:24)
5:52:14 PM:
5:52:14 PM: "buildmand" failed
5:52:14 PM: ────────────────────────────────────────────────────────────────
The above comes from Netlify, but also occurs when I run the build command on my dev server. Here is the Astro/HTML code:
<body>
<Header />
<h1>{pageTitle}</h1>
<p>This is where I will post about my journey learning Astro.</p>
<ul>
<li><a href="/posts/post-1/">Post 1</a></li>
<li><a href="/posts/post-2/">Post 2</a></li>
<li><a href="/posts/post-3/">Post 3</a></li>
</ul>
<Footer />
<script>
import '../scripts/menu.js';
</script>
</body>
And here are the contents of menu.js:
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
});
When I searched Google for answers it led me to add a MIME type to the script tag which prompts Astro to not process the JavaScript. This technically allows the build to complete, but does not help as the JavaScript won't appear in the final web page. Can anyone point me in the direction of what is going wrong?
I am exploring potentially building a site using the Astro framework. As such I am working through the tutorial. Unfortunately something is not quite working right and its baffling me as to what the cause may be. I'm at the point where it tells you to insert JavaScript into a script tag in one of the components. My understanding of the documentation is the process is supposed to more or less "just work". One creates a script tag and imports the JS file, then Astro builds it. Instead I see the following errors when building the website:
5:52:14 PM: 22:52:14 [ERROR] [vite] x Build failed in 15ms
5:52:14 PM: Could not resolve "../scripts/menu.js" from "src/pages/blog.astro?astro&type=script&index=0&lang.ts"
5:52:14 PM: file: /opt/build/repo/src/pages/blog.astro?astro&type=script&index=0&lang.ts
5:52:14 PM: Stack trace:
5:52:14 PM: at getRollupError (file:///opt/build/repo/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
5:52:14 PM: at ModuleLoader.handleInvalidResolvedId (file:///opt/build/repo/node_modules/rollup/dist/es/shared/node-entry.js:20216:24)
5:52:14 PM:
5:52:14 PM: "buildmand" failed
5:52:14 PM: ────────────────────────────────────────────────────────────────
The above comes from Netlify, but also occurs when I run the build command on my dev server. Here is the Astro/HTML code:
<body>
<Header />
<h1>{pageTitle}</h1>
<p>This is where I will post about my journey learning Astro.</p>
<ul>
<li><a href="/posts/post-1/">Post 1</a></li>
<li><a href="/posts/post-2/">Post 2</a></li>
<li><a href="/posts/post-3/">Post 3</a></li>
</ul>
<Footer />
<script>
import '../scripts/menu.js';
</script>
</body>
And here are the contents of menu.js:
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
});
When I searched Google for answers it led me to add a MIME type to the script tag which prompts Astro to not process the JavaScript. This technically allows the build to complete, but does not help as the JavaScript won't appear in the final web page. Can anyone point me in the direction of what is going wrong?
Share Improve this question edited Jan 31 at 21:13 Mike P asked Jan 31 at 17:43 Mike PMike P 518 bronze badges2 Answers
Reset to default 0For Astro to to its thing, the script tag needs to be outside of the HTML-part of the astro component:
</body>
<script>
import '../scripts/menu.js';
</script>
Or you can include the contents of menu.js directly inline. Astro will generate an external file if its long enough (it's using vite under the hood to do the bundling).
The issue turned out to be the file path. I made a post on Reddit about this issue and one user pointed out
<script>
import '../scripts/menu.js';
</script>
Really should be
<script>
import '../assets/scripts/menu.js';
</script>
Once I made the change the page built as expected.