"Failed to fetch dynamically imported module" when NODE_ENV=production

[btakita]

I have a deployment that results with the error:

Failed to fetch dynamically imported module: https://esg.censible.co/client/index.ba12ed5c.js

The file in question is downloaded however some of the following chunks result with a 404.

Setting NODE_ENV=staging fixes the error.

[nsivertsen]

I'm getting a similar error. The production site runs fine in most browsers, but when testing older versions of iOS Safari in the Xcode simulator (e.g. iOS 9.3 on iPhone 6), I'm seeing a brief flash of the pre-hydrated site before getting a "500 undefined" error. There seems to be no relevant error logged to the console, only some CSS chunks that are not found for some reason:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (index.dd5d4b26.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (chunk.9e60d83d.css, line 0)

When switching to dev mode, the site loads fine, but doesn't run as an SPA (clicking on links results in the new page being fetched from the server), although this could be due to something else. I'm getting the following logged to the console:

SyntaxError: Unexpected use of reserved word 'import'

[nsivertsen]

I just double-checked, and for me, it's not NODE_ENV that makes the difference, but whether I'm running the app with sapper dev or node __sapper__/build.

[Rich-Harris]

@btakita is there any kind of authentication layer involved? I ask because I hit a situation recently where I couldn't load modules because my app was behind identity-aware proxy. Long shot I know...

@nsivertsen The Unexpected use of reserved word 'import' message is probably a console.error that I erroneously left in (part of the feature detection) and should be gone in 0.22.10. If not it might indicate a bug in the module transformation. The CSS thing is weird. Is it related to whether or not a --legacy build is running?

[btakita]

@Rich-Harris There's no authentication layer to load the app.

[nsivertsen]

@Rich-Harris the Unexpected use of reserved word 'import' message is gone in 0.22.10. The CSS thing and the 500 server error go away when not doing a --legacy build. The site then runs in non-SPA mode in the affected browsers (for example iOS 9.3 Safari), so lazy loaded images and so on are all broken, but at least the content is readable. Any idea as to what might be going on?

[btakita]

One difference that I can think of is the app uses a DNS & CDN (Cloudflare). Perhaps there's some issue with using sapper/rollup & a CDN proxy?

I'm going to go back to webpack, as I'm having some other issues with NODE_ENV=staging.

[nsivertsen]

I've been seeing a lot of

Failed to fetch dynamically imported module

errors lately, and I think I've found the cause:

Sapper sets Cache-control: max-age=600 headers when NODE_ENV=production:

sapper/templates/src/server/middleware/get_page_handler.ts

Line 45 in 4d7d448

res.setHeader('Cache-Control', dev ? 'no-cache' : 'max-age=600');

When an update is pushed to the server, some CDN and client caches still have the old HTML, which refers to hashed assets that no longer exist, causing the error.

@btakita is that consistent with what you're seeing?

So it seems this issue is related to #389, and I guess #415.

I think it would probably be good to have the option of overriding the cache headers.

[mrkishi]

I've actually been thinking about that. Instead of rming the whole build directory on build, wouldn't it be nice to have sapper only delete files older than X time?

We could have both sapper build and sapper rebuild, where build has the optional --keep defaulting to 1 week and rebuild would be an alias to sapper build --keep 0.

[nsivertsen]

@mrkishi sadly, that wouldn't work in environments like Now.sh that build from scratch for every deployment.

[btakita]

@nsivertsen Yes! That is consistent with what I'm seeing, even with Webpack. I had to add a cache-buster query param to fix the problem.

[nsivertsen]

What confuses me is that I'm seeing these errors long past the max-age. In some cases clearing the cache is the only way to fix them.

edit: I'm not sure if maybe this has something to do with Now's CDN?

edit: scratch that last edit, that makes no sense. Now purges the cache on every deployment.

[nsivertsen]

This seems to be related to a Rollup bug where hashes of files are not invalidated for files that depend on files that have changed (rollup/rollup#2435).

This would explain why I'm seeing the errors long past the max-age of the HTML entry points. The JS assets are cached as immutable assets, and the JS entry point doesn't change, even when some of the files that it imports change.

[btakita]

I'm still getting intermittent errors when deploying to production.

500
The requested module './chunk.8d09af4e.js' does not provide an export named 'as'

@nsivertsen , @mrkishi - are either of you seeing any issues?

[nsivertsen]

@btakita as far as I can tell, we're not seeing any issues anymore. The Rollup patch seems to have fixed it for us. The error you've pasted seems like a different error than before, no? Are you back on Rollup?

[btakita]

I am on rollup. I worked around the issue. I'm not sure if a pattern can be deduced from this, but the issue was importing a `_reduce` function, which returns an implementation of `reduce` using the given reducer function. I replaced `_reduce` with a function calling `reduce`. This was wrapped in a store mixin, a function that adds methods & computed properties to a store. It's one of those crazy edge cases that only shows up on production, so I wont be able to make a bug report.

…

On Thu, Jan 17, 2019 at 2:49 AM Nikolai Sivertsen ***@***.***> wrote: @btakita <https://github.com/btakita> as far as I can tell, we're not seeing any issues anymore. The Rollup patch seems to have fixed it for us. The error you've pasted seems like a different error than before, no? Are you back on Rollup? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#464 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAOUJNVZixgy-GbuSvU8_Re6TC7TGquks5vECr1gaJpZM4XHRVL> .

-- Brian Takita briantakita.com about.me/brian_takita