script tag is giving could not import error

[koolkunz]

Just adding a simple script tag which logs Hello to a page gives this error:

 error   Could not import `/src/pages/contact-us.astro?astro&type=script&index=0&lang.ts`.
  Hint:
    This is often caused by a typo in the import path. Please make sure the file exists.
  Stacktrace:
Error: failed to load module for ssr: /src/pages/contact-us.astro?astro&type=script&index=0&lang.ts
    at instantiateModule (file:///D:/DCS%20Projects/Local/astrowind/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:53281:15)

This is the .astro file for the page:

---
import { SITE } from '~/config.mjs';
import { getCanonical, getHomePermalink } from '~/utils/permalinks';
import Layout from '~/layouts/PageLayout.astro';
import Breadcrumbs from '~/components/widgets/Breadcrumbs.astro';
import Title from '~/components/widgets/Title.astro';

const {title = 'Contact Us'} = Astro.props;

const meta = {
	title: title + ' - ' + SITE.title,
	description: SITE.description,
	canonical: getCanonical(getHomePermalink()),
};
---
<Layout {meta}>
	<Breadcrumbs />
	<Title title={title}/>
	<p class="font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">We’re here to help! Tell us what you’re looking for and we’ll get back to you as soon as possible.</p>
</Layout>
<script>
	console.log("Test");
</script>

If I remove the script tag at the end the same page loads fine without any errors

[prototypa]

Hello @koolkunz

I've been testing adding the <script> tag to index.astro using the current version of AstroWind and everything works fine for me. I also tried creating a new contact-us.astro page and pasting your code (except Breadcrumbs and Title) and everything again worked great. I used node v16.16.0.

Perhaps it is your version of Astro that is outdated, or some misreported error in one of the components that you import into your project.

You can try cloning the latest version of AstroWind and add the contact-us.astro page with the <script> tag and see what results it gives you in your environment and so we can know if it is about different development environments or some detail in the code of your project.

[koolkunz]

Hi, thanks for the reply, it seems it is working for me if I build the project first and then run the preview using npm run build and npm run preview. But if I run the dev server directly using npm run dev it gives me the error.

[koolkunz]

And I just tried cloning astrowind as a fresh project, and just added

<script>
	console.log("Test");
</script>

to the end of the index.astro file and the error is still comming in npm run dev:

D:\test astrowind\astrowind>npm run dev

> @onwidget/astrowind@0.8.5 dev
> astro dev

[MDX] Now inheriting remark and rehype plugins from "markdown" config.
If you applied a plugin to both your Markdown and MDX configs, we suggest removing the duplicate MDX entry.
See "extendPlugins" option to configure this behavior.
   astro  v1.6.15 started in 745ms

  ┃ Local    http://127.0.0.1:3000/
  ┃ Network  use --host to expose

11:24:38 am [astro] reload D:/test astrowind/astrowind/src/pages/index.astro
 error   Could not import `/src/pages/index.astro?astro&type=script&index=0&lang.ts`.
  Hint:
    This is often caused by a typo in the import path. Please make sure the file exists.
  Stacktrace:
Error: failed to load module for ssr: /src/pages/index.astro?astro&type=script&index=0&lang.ts
    at instantiateModule (file:///D:/test%20astrowind/astrowind/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:53281:15)

[prototypa]

Thanks @koolkunz, we have made some progress. For me it works both at dev and build time.

I have noticed that you use Windows, that is a difference, I use macOS. Can you please tell me what version of Node are you using? Thanks.

[koolkunz]

My node version is v16.17.1

[delphinas]

I have exactly the same error when importing astro-embed plugin. Mac OS, node is 14

[prototypa]

Hi @delphinas

It would be necessary to see the details of what happens when the astro-embed plugin is included and how it is being used. If you want you can open a discussion thread to better understand the problem. Maybe it's not the same problem.

[koolkunz]

Hi @prototypa did you find anything related to node? any other node version you can recommend that I should try?

[prototypa]

Hello @koolkunz

Sorry for the delay. I've been doing some tests but I still can't find anything (and I haven't had much time to follow either).

You can see a version of AstroWind on CodeSandox working with the following code in index.astro file (using node 16):

---
import { SITE } from '~/config.mjs';
import { getCanonical, getHomePermalink } from '~/utils/permalinks';
import Layout from '~/layouts/PageLayout.astro';

import Hero from '~/components/widgets/Hero.astro';
import Note from '~/components/widgets/Note.astro';
import Features from '~/components/widgets/Features.astro';
import Features2 from '~/components/widgets/Features2.astro';
import Steps from '~/components/widgets/Steps.astro';
import Features3 from '~/components/widgets/Features3.astro';
import HighlightedPosts from '~/components/blog/HighlightedPosts.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';

const meta = {
    title: SITE.title,
    description: SITE.description,
    canonical: getCanonical(getHomePermalink()),
};
---

<Layout {meta}>
    <Hero />
    <Note />
    <Features />
    <Steps />
    <Features2 />
    <Features3 />
    <HighlightedPosts />
    <FAQs />
    <Stats />
    <CallToAction />
</Layout>

<script>
    alert("Hello script!")
</script>

-> https://codesandbox.io/s/busy-austin-z0lgf0?file=/src/pages/index.astro

I really don't know what it will be. At the end of the week I will do new tests to see if I can simulate your environment and check the error because it works for me in my environment.

[koolkunz]

@prototypa I have also tried using a different theme like https://github.com/mhyfritz/astro-landing-page and using script tag works fine with it on my system. So its not a problem with astro in general with my environment.

[prototypa]

@koolkunz there is a different between AstroWind and Astro Landing Page.

Astro Landing Page (https://github.com/mhyfritz/astro-landing-page) don't use Layouts in index.astro. What I don't understand is why the error is manifested in your environment and not in my environment (or in Vercel or in Code Sandbox).

Can you please test the script tag using Astro Ink template? https://github.com/one-aalam/astro-ink. Here in this file: https://github.com/one-aalam/astro-ink/blob/main/src/pages/index.astro

Let me know, thanks.

[koolkunz]

@prototypa You are on the right track, Astro Ink template also gives me a similar problem, the script tag on the BaseHead.astro file https://github.com/one-aalam/astro-ink/blob/main/src/components/BaseHead.astro gives the same error

error   Could not import `/src/components/BaseHead.astro?astro&type=script&index=0&lang.ts`.
  Hint:
    This is often caused by a typo in the import path. Please make sure the file exists.
  Stacktrace:
Error: failed to load module for ssr: /src/components/BaseHead.astro?astro&type=script&index=0&lang.ts
    at instantiateModule (file:///D:/Downloads/test%20astro/astro-ink/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:53281:15)

If I remove the script tag it runs fine, and then if I add a script tag to index.astro the error is back.

[koolkunz]

@prototypa I found the solution on astro official discord, it seems it's an issue caused by vite if we have any spaces in the project repo path, so simply changing my path from 'D:/DCS Projects/Local/astrowind' to 'D:/DCS-Projects/Local/astrowind' fixed the issue (replaced ' ' with '-').

Such a silly issue in the end. Thanks for all your help and support. I am closing the issue.

[prototypa]

Hey, I'm glad it's resolved. Thank you.