HMR issue with imported js File (within src) into Astro component upon saving

[moritzlaube]

What version of astro are you using?

1.0.0-rc.3

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Inside my BaseLayout.astro file, I am using this syntax to import a js file that lives in the src folder: <script>import '../assets/js/my-js-file.js'</script>

It works fine and dandy when starting up the dev environment. But as soon as I am working inside my-js-file.js and the Vite 3 HMR kicks in, I am getting an error that looks like this:

  Plugin: vite:esbuild
  File: /Users/moritzlaube/Projekte/kay-organics/bumwell-frontend/src/layouts/BaseLayout.astro?astro&type=script&index=0&lang.ts
  
  Unexpected "export"
  1  |  ---
     |      ^
  2  |  export interface Props {
     |  ^
  3  |    title: string

It's just a random error. When I am deleting the type-checking within the component's fences, I am getting new random error.

Please check my Stackblitz. The Layout component is importing a test.js file. When running npm run dev the website launches as expected.

But try to change 'test' in the test.js file to, let's say, 'test2' and save. The HMR breaks and you get this weird esbuild error...

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-odzn4v?file=src/layouts/Layout.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[ColinEspinas]

I have the same issue, this also happens on Linux and Windows with WSL2 on rc.8.