search

sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.43k stars 1.88k forks source link

500: Failed to fetch dynamically imported module #3308

Closed jakobsturm closed 2 years ago

jakobsturm commented 2 years ago

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 commented 2 years ago

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

benmccann commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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. :(

mawoka-myblock commented 2 years ago

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

ManuelDeLeon commented 2 years ago

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 commented 2 years ago

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

nikosgpet commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 https://github.com/sveltejs/kit/pull/3412. Can folks report whether this issue is fixed by 1.0.0-next.254 or still occuring?

netaisllc commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 - https://github.com/ThatConference/that.us/pull/1177

mawoka-myblock commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

jycouet commented 2 years ago

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 commented 2 years ago

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

RomanistHere commented 2 years ago

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 commented 2 years ago

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

offeex commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 6 months ago

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.