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.

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

500: Failed to fetch dynamically imported module #3308

Closed
jakobsturm opened this issue Jan 12, 2022 · 36 comments
Closed

500: Failed to fetch dynamically imported module #3308

jakobsturm opened this issue Jan 12, 2022 · 36 comments
Labels
p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc.
Milestone

Comments

@jakobsturm
Copy link

Describe the bug

I am encountering some issues when deploying my project to vercel using the vercel-adapter. The project builds but then the deployed site I receive 500 Failed to fetch dynamically imported module: https://xxx.vercel.app/_app/undefined

The vercel build is triggered by a new Gitlab commit.

Does someone have an idea what could cause this issue? The weird thing is that it works with npm run build but not on the deployed vercel site...

Reproduction

This should be reproducable by using the same sveltekit + adapter versions

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 13.49 GB / 31.91 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.71
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.55)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.10
    @sveltejs/adapter-vercel: next => 1.0.0-next.36
    @sveltejs/kit: ^1.0.0-next.225 => 1.0.0-next.225
    svelte: ^3.46.0 => 3.46.0

Severity

blocking all usage of SvelteKit

Additional Information

No response

@mawoka-myblock
Copy link

Having the same issue with cloudflare adapter, but just on reload.

@benmccann
Copy link
Member

This should be reproducable by using the same sveltekit + adapter versions

I don't think this happens with all projects or we'd probably be getting a whole lot more bug reports. Can you make it happen with a brand new project? If not, can you provide a project that reproduces it?

@jakobsturm
Copy link
Author

jakobsturm commented Jan 13, 2022

Thanks, @benmccann! Yes, you are probably right - sorry for my assumption.
I am trying to work out how to reproduce it and will update you further.

Additionally I have noticed, the first error I receive when loading the page is: 500: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of URL. Received undefined and after that reload it is the error mentioned above.

But of course I understand that it is hard for you to reproduce it like that. I was just hoping that someone has already experienced the same issue and has a solution. I will keep you updated. Thank you!

@mawoka-myblock
Copy link

Here is the repo: https://github.com/mawoka-myblock/svelte-cf-error
And I deployed it for testing reasons here (ofc with cf-pages): https://svelte-cf-error.pages.dev/blog/test
If you visit the link directly, you'll get a 500 document undefined (Any tips here are really appreciated), but if you go to https://svelte-cf-error.pages.dev/blog and then open the blog-post, it works until you reload. The first reload will produce a 500 document not defined error and the 2nd reload the error this issue is about.

@netaisllc
Copy link
Contributor

netaisllc commented Jan 13, 2022

Just for a small bit of added context, we are deployed to our own VMs on Digital Ocean (plain old node adapter) and see this error in the logs approximately 1-2 per week. Still trying to gather enough of the situation to share. :(

@benmccann benmccann added pkg:adapter-vercel Pertaining to the Vercel adapter and removed pending clarification labels Jan 13, 2022
@mawoka-myblock
Copy link

@benmccann It also happens on/with the clodflare-pages adapter

@ManuelDeLeon
Copy link

Getting the same error on a hello world app: https://github.com/ManuelDeLeon/sveltekit-firebase-ssr

It works as expected locally in dev and preview.

The problem is that when deployed to Vercel (https://sveltekit-firebase-ssr.vercel.app/) SSR doesn't work (page source isn't what's expected), an error flashes, and the console shows another error.

Error on page:

Failed to fetch dynamically imported module: https://sveltekit-firebase-ssr.vercel.app/_app/undefined

Error in console

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

@mawoka-myblock
Copy link

Vercel works for me fine, but Cloudflare-Pages doesn't

@benmccann benmccann added p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc. and removed p3-edge-case SvelteKit cannot be used in an uncommon way labels Jan 18, 2022
@benmccann benmccann changed the title 500: Failed to fetch dynamically imported module (vercel-adapter) 500: Failed to fetch dynamically imported module Jan 18, 2022
@benmccann benmccann added this to the 1.0 milestone Jan 18, 2022
@nikosgpet
Copy link

Just hit the same error with Cloudflare pages. If you visit the link directly, you get a 500: Failed to fetch dynamically imported module: https://fef7dft46.*********.pages.dev/_app/undefined. It only happens with some pages though, not all.

@nikosgpet
Copy link

nikosgpet commented Jan 20, 2022

It turns out that in my case, it was because I had to dynamically load certain modules that are only for browsers inside onMount.

@theClarkSell
Copy link

This is actually something we see daily and it's been driving me nuts because I can't seem to find the root cause. In one user session just a bit ago this happened.

TypeError: Failed to fetch dynamically imported module: https://that.us/_app/pages/activities/__layout.svelte-f2da0de0.js

then

TypeError: Failed to fetch dynamically imported module: https://that.us/_app/pages/activities/create/__layout.svelte-64778a6f.js

then

TypeError: Failed to fetch dynamically imported module: https://that.us/_app/pages/activities/create/cfp.svelte-11144fe2.js

Which lead to the 500. I've long thought it was vercel just not rendering those files or an ad tracker but I would love to fix it. Any ideas on how to hunt down the why on this?

@mawoka-myblock
Copy link

This is actually something we see daily and it's been driving me nuts because I can't seem to find the root cause. In one user session just a bit ago this happened.

TypeError: Failed to fetch dynamically imported module: https://that.us/_app/pages/activities/__layout.svelte-f2da0de0.js

then

TypeError: Failed to fetch dynamically imported module: https://that.us/_app/pages/activities/create/__layout.svelte-64778a6f.js

then

TypeError: Failed to fetch dynamically imported module: https://that.us/_app/pages/activities/create/cfp.svelte-11144fe2.js

Which lead to the 500. I've long thought it was vercel just not rendering those files or an ad tracker but I would love to fix it. Any ideas on how to hunt down the why on this?

Change to another adapter! The problem may occur only with the vercel adapter, or just with the cloudflare adapter

@theClarkSell
Copy link

Change to another adapter! The problem may occur only with the vercel adapter, or just with the cloudflare adapter

Well, I've used both the auto adapter and the vercel one. I'm not picking up and moving off of vercel, unless that's really the issue which means a huge infrastructure change. Now our vercel setup is behind cloudflare and set up the way they recommend.

@mawoka-myblock
Copy link

You can just deploy it as a test to cloudflare, shouldn't take long and if the issue is still there, it's probably in your code and if not, this issue is the right place!

@theClarkSell
Copy link

You can just deploy it as a test to Cloudflare, shouldn't take long and if the issue is still there, it's probably in your code and if not, this issue is the right place!

I can't even consistently reproduce it, without being able to do that moving it doesn't make any sense. If I could repo or knew how to, I would know where to start looking.

On top of that, it's never "just" a just and our site isn't small http://github.com/ThatConference/that.us

@nikosgpet
Copy link

I think that this error might arise whenever you push a new update to the site, which causes a re-built of all modules. In the rebuilt, all files get a new name. If the user was already on the website and doesn't hit rephresh, navigating in the website will eventually try to load a module that is no longer there, causing an error.

@mawoka-myblock
Copy link

I think that this error might arise whenever you push a new update to the site, which causes a re-built of all modules. In the rebuilt, all files get a new name. If the user was already on the website and doesn't hit rephresh, navigating in the website will eventually try to load a module that is no longer there, causing an error.

Good point! I think we are having many different issues in this issue, which all lead to the sane error. For me, I fixed my website, by switching to vercel, away from cloudflare.

@benmccann
Copy link
Member

I think that this error might arise whenever you push a new update to the site, which causes a re-built of all modules. In the rebuilt, all files get a new name. If the user was already on the website and doesn't hit rephresh, navigating in the website will eventually try to load a module that is no longer there, causing an error.

Yes, I think that's likely and could cause this error. That should be fixed by #3412. Can folks report whether this issue is fixed by 1.0.0-next.254 or still occuring?

@netaisllc
Copy link
Contributor

I think that this error might arise whenever you push a new update to the site, which causes a re-built of all modules. In the rebuilt, all files get a new name. If the user was already on the website and doesn't hit rephresh, navigating in the website will eventually try to load a module that is no longer there, causing an error.

That sounds plausible, but could be refuted by our experience. We see this error type ~ one a week and our sessions are incredibly short-lived, certainly much shorter than our deploy cycle. Also, we are using the node adaptor.

We will try to report findings once upgraded to 254. Thanks!

@theClarkSell
Copy link

Yes, I think that's likely and could cause this error. That should be fixed by #3412. Can folks report whether this issue is fixed by 1.0.0-next.254 or still occurring?

@benmccann looks like I am on 204

having said that I am working through updating 254. Just trying to make my way through some of the breaking changes. Hoping to get that out maybe this morning.

@ManuelDeLeon
Copy link

@benmccann - I don't have the problem with the latest @sveltejs/kit (1.0.0-next.260) + @sveltejs/adapter-vercel (1.0.0-next.40). Don't get any errors and SSR works like it does locally.

@theClarkSell
Copy link

@benmccann and bumped to 260. Took me a bit longer to work through the breaking changes than I thought. We did see it a few times when testing, but things were in a crazy state of chaos. We will see what happens in the next 24.

just for reference for others that might be looking to see what changes we had to make - ThatConference/that.us#1177

@mawoka-myblock
Copy link

I think that this error might arise whenever you push a new update to the site, which causes a re-built of all modules. In the rebuilt, all files get a new name. If the user was already on the website and doesn't hit rephresh, navigating in the website will eventually try to load a module that is no longer there, causing an error.

Yes, I think that's likely and could cause this error. That should be fixed by #3412. Can folks report whether this issue is fixed by 1.0.0-next.254 or still occuring?

It didn't fix it for me...

@theClarkSell
Copy link

Unfortunately it happened again last night, and our night traffic is light.

Only happened for one user and it appears to have happened a few times for them.

We will see what happens today.

@nikosgpet
Copy link

nikosgpet commented Feb 4, 2022

It may still happen for a few days, if users had left their tab open with a previous version of your app. Some users leave tabs open for days or weeks and this can sometimes be the case even for short lived pages such as forms or login pages.

A way to verify this sort of bugs in the future, would be to include a variable containing the version of the app in the Sentry report. This will allow to check if the error occurred with a client version that was pushed before the bug fix.

@theClarkSell
Copy link

I'm sorry for the delay here, but I'm happy to report I haven't seen this error surface again. Over the past 72 hours, we've seen 8k page views and 47k requests.

@nikosgpet that was an excellent suggestion and one of which I will get added.

@benmccann
Copy link
Member

Thanks for the update! I think I'm going to consider this issue closed. If anyone's still running into it, please file an issue with steps to reproduce the error

@benmccann benmccann removed pkg:adapter-vercel Pertaining to the Vercel adapter pkg:adapter-cloudflare labels Feb 8, 2022
jycouet added a commit to jycouet/kitql-with-graphcms that referenced this issue Feb 22, 2022
jycouet added a commit to jycouet/kitql-with-graphcms that referenced this issue Feb 22, 2022
@jycouet
Copy link
Contributor

jycouet commented Feb 22, 2022

Sorry, that was not intentional to spam here.
I had an issue with that title.

It turns out that it was the usage of pino-pretty with vercel.

{
  "adapter-vercel@next": "1.0.0-next.44",
  "@sveltejs/kit@next": "1.0.0-next.282"
}

After reading their doc, it's not recommended to use in production.
No problem then.

I put it here as it might help others.

@bitdom8
Copy link

bitdom8 commented Mar 3, 2022

Hi got the latest sveltekit, got this error Failed to fetch dynamically imported module:

@RomanistHere
Copy link
Contributor

RomanistHere commented May 6, 2022

Hi got the latest sveltekit, got this error Failed to fetch dynamically imported module:

Me too. After bump from 175 to 326 I got this error. Page (that is in error path) works only if I remove most of the imports (see the screenshot). Uncommenting any single string throws the error:

500
Failed to fetch dynamically imported module: http://localhost:8080/src/routes/[lang]/index.svelte
TypeError: Failed to fetch dynamically imported module: http://localhost:8080/src/routes/[lang]/index.svelte

image

@lazharichir
Copy link

For me, it was an adblocker blocking some resources (i.e., there was an "ads" somewhere in the URI).

@offeex
Copy link

offeex commented May 12, 2023

same issue. It occurs randomly in prod environment in Chrome-based browsers, and on few couple of quick "reload" presses in firefox
image

@marius-jopen
Copy link

For me, it was an adblocker blocking some resources (i.e., there was an "ads" somewhere in the URI).

HOLY MOLY! That was it!

@vettloffah
Copy link

For us, the issue was that we have the deployment hosted on vercel, and the proxy option turned on in our Cloudflare DNS, and Cloudflare wasn't aware when there was a new deployment. This was causing intermittent issues that resulted in errors described in this post.

This was really hard to narrow down, but once we turned off the proxy option in Cloudflare the issues immediately cleared up.

This Cloudflare issue is actually described right in the vercel docs here: https://vercel.com/guides/using-cloudflare-with-vercel

@Arro
Copy link

Arro commented Aug 9, 2023

For me, it was an adblocker blocking some resources (i.e., there was an "ads" somewhere in the URI).

HOLY MOLY! That was it!

For me, it was "metrics" in the filename. Thank god I figured this out!

@elucidsoft
Copy link

elucidsoft commented Mar 6, 2024

I tracked this down to a Cloudflare Firewall rule, if you set the WAF to "Essentially Off", give it a couple. Test it out it all seems to start working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p1-important SvelteKit cannot be used by a large number of people, basic functionality is missing, etc.
Projects
None yet
Development

No branches or pull requests