Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Astro fails to output a hoisted .js file in dist #7146

Closed
1 task
kamoshi opened this issue May 19, 2023 · 7 comments
Closed
1 task

Astro fails to output a hoisted .js file in dist #7146

kamoshi opened this issue May 19, 2023 · 7 comments

Comments

@kamoshi
Copy link

kamoshi commented May 19, 2023

What version of astro are you using?

2.5.0

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

None

What package manager are you using?

pnpm

What operating system are you using?

Kubuntu 23.04

What browser are you using?

Firefox

Describe the Bug

Given a file src/utils/test.ts in src:

export function bindSubtitle() {
  const target = document.getElementById("subtitle");
  target && (target.innerText = "hello");
}

When I try to import and use it in an .astro file like this:

<body>
	<slot />
	<script>
		import { bindSubtitle } from "../utils/test";

		bindSubtitle();
	</script>
</body>

The resulting bundle contains a script which tries to import JS code from a nonexistent file, e.g import"./hoisted.8cca6103.js", which effectively breaks many minified scripts across the website.
image

This problem only occurs in the build output, not when running dev mode. I've provided a stackblitz link with an example configuration that results in a broken build.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ksnujv?file=dist%2F_astro%2Fhoisted.97534249.js

Participation

  • I am willing to submit a pull request for this issue.
@edoardofelici
Copy link

edoardofelici commented May 20, 2023 •
edited
Loading

The same is happening to me, even though I fixed all astro-related package versions.
My lazy loaded images don't load at all because the hoisted file that astro is skipping probably contained code handling the lazy loading logic.

Luckily I was able to rollback to the last previously-working live version of the website that was built on the 8th of May. So the bug must have been introduced after that date.

I attempted to find a regression version, but I failed so far. This is what I tried:

I had everything fixed down to astro@2.2.3 and other related packages too.

So, I tried force-installing the packages used by astro@2.2.3/package.json.

2.2.3
"@astrojs/compiler": "1.3.1",
"@astrojs/language-server": "0.28.3",
"@astrojs/markdown-remark": "2.1.3",
"@astrojs/telemetry": "2.1.0",
"@astrojs/webapi": "2.1.0",

Hoisted file still got skipped.

I also tried force-installing vite to version 4.2.1 (down from version 4.3.8).
Still the problem persisted during the build.

astro-hoisted

@edoardofelici
Copy link

edoardofelici commented May 20, 2023 •
edited
Loading

Another note, I think the missing hoisted code is related to
<SomeComponent client:visible />.

Stuff that should be loaded on 'client:visible' directive is also not working on my site, which makes me think that the required code is in that missing hoisted file.

Hope this helps narrow things down.

@srflp
Copy link

srflp commented May 20, 2023 •
edited
Loading

Reproduction

on a working commit, bumping rollup via resolutions in my package.json:

  "resolutions": {
    "rollup": "3.22.0"
  }

caused the same problem.

I tried to bump every single package from my package-lock, and it seems that rollup breaks it.

Temporary fix

With rollup 3.21.8, hoisted .js files are getting outputted

So as a temporary fix, you can add:

  "resolutions": {
    "rollup": "3.21.8"
  }

to your package.json and do pnpm/npm/yarn install.

Intermediate cause

Vite has in it's dependencies:

    "rollup": "^3.21.0",

which means, that 3.22.0 gets installed automatically for everyone because of vite.

@kamoshi
Copy link
Author

kamoshi commented May 20, 2023

It seems it might be caused by this particular pull request in Rollup

rollup/rollup#4989

@jonatanklosko jonatanklosko mentioned this issue May 22, 2023
Open
@edoardofelici
Copy link

Thanks @srflp . Had to use "overrides" instead of "resolutions" for npm if anyone else is reading this.

@kamoshi
Copy link
Author

kamoshi commented May 23, 2023

This seems to be fixed in 2.5.2, so closing 🙂

@kamoshi kamoshi closed this as completed May 23, 2023
binjamil added a commit to binjamil/mbinjamil.dev that referenced this issue May 26, 2023
@binjamil
Bump astro version to fix astro build bug
d7e5bf2 
withastro/astro#7146
@matiboux matiboux mentioned this issue Sep 7, 2023
Merged
@isimmons
Copy link

isimmons commented Jan 8, 2024

I have this issue in latest astro 4 which is using rollup version 4.9.2, astro 4.10 and astro/vercel integration 6.1.2

Failed to load resource: the server responded with a status of 404 () hoisted.j4pK5_uY.js:1

It didn't seem to affect anything until I tried adding a svelte component and now I also get
Uncaught (in promise) TypeError: Failed to fetch dynamically imported module) ComponentName.dlfhdlfjlsl.js

It's a static import but I guess the dynamic part comes from the way Astro loads it because of the client:load directive?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@isimmons @srflp @kamoshi @edoardofelici