gatsby: Gatsby's Use Of Polyfills and the 'Missing Resources for x' error
Description
I’ve just been through the incredibly painful process of getting a Gatsby site working in IE 11 and thought it was worth writing up the problems I faced due to Gatsby’s current architecture.
We were receiving an error for every page in IE:
Can’t find resource for …
There was no other error. The pages loaded fine in all the other browsers we tested, so my hunch was that Gatsby was swallowing some kind of IE-specific error.
After a lot of digging I eventually tracked the point of failure to Gatsby’s loader, specifically, this line.
.catch(() => {
failed = true
})
Inspecting the value passed to the catch I could see that the error was related to something that needed to be polyfilled. The problem here being that Gatsby was swallowing this useful error and giving me nothing to help me pinpoint the issue. The resource wasn’t missing - it was just erroring when the Loader tried to fetch it. It would make a lot of sense to error here with a more useful message, passing on the specific error that the loader had encountered.
This leads me on to the second issue. Gatsby uses babel-preset-env to handle polyfills, and by default useBuiltIns is set to usage. This sounds great on the surface, but masks what I would consider to be a big problem. If any third-party modules need polyfilling, it seems that Gatsby will not add the Polyfills they need. It will add polyfill imports to project-based code, but will not add imports to non-project-based code. This means if a third-part module was published with useBuiltIns set to entry, it appears that Gatsby will not include the expected babel-polyfill import and replace with the necessary polyfill imports. This means that if a third-party library needs a polyfill that hasn’t been supplied due usage within the gatsby project, then this polyfill will not be included. In my case it was a dependency of another dependency.
Combined with the first issue, this was nightmarishly hard to debug.
I’d also suggest adding a section to the browser support docs that makes it clear that Gatsby’s declared browser support is only for production builds. I spent a good deal of time trying to debug IE locally before realising that Gatsby doesn’t support IE11 when running in development. I eventually found the docs for Gatsby’s default babel preset which explained this, but I think these need to be much more prominent. To anyone encountering a similar issue, the only fix I’ve found is to manually include the entire babel-polyfill using:
// gatsby-browser.js
require('babel-polyfill')
exports.onClientEntry = () => {
// Without this function body the import will not be picked up.
}
This is far from ideal as this includes a tonne of extra polyfills we don’t need, but it at least fixes the problem in the short term.
I guess another option would be to switch Gatsby from using usage to entry so that the import will be replaced by only required polyfills. That appears to be possible by overriding Gatsby’s default babel config.
The above is true as of "gatsby": "2.1.22"
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 9
- Comments: 45 (34 by maintainers)
https://github.com/gatsbyjs/gatsby/pull/14111 should fix polyfills for all dependencies so you don’t need gatsby-plugin-compile-es6-packages anymore. I appreciate if you could test this and let me know of any bugs.
@dustinhorton and others that come across this thread:
I have created a gist where I share my experiences when getting Gatsby to work with IE. https://gist.github.com/arnars/2bb1d81fc0955d57fe88a8348695f594
If you have any solutions that are not mentioned already, please feel free to share them.
@jackhair I haven’t deployed yet—I’ll report back when I can.
@arnars You’re my hero. I needed to do this https://gist.github.com/arnars/2bb1d81fc0955d57fe88a8348695f594#include-babelpolyfill-in-your-webpackconfig but I thought it wasn’t possible anymore. Thanks a lot.
I originally fixed this issue with https://github.com/gatsbyjs/gatsby/issues/12399#issuecomment-473231797 but the ‘Missing resources’ errors popped back up after pulling in react-spring. Ultimately what worked for me was not needing to setup my own local plugin, but just adding a dependency to gatsby-plugin-compile-es6-packages and listing the modules needing transpiling there:
@jackhair that would work, but you’d be including every polyfill provided by core-js in your build. With this approach you’re only including the ones for your supported browsers which can be a big saving.
@Undistraction Does this solution not work just importing
core-jsas a whole?For anyone needing a quick fix, I found that the only solution that worked in all cases was to create a local plugin that adds all polyfills manually in its
gatsby-browser.js. I then added that plugin as the very first plugin ingatsby-config.js.This is pretty ugly, but it works in multiple cases where this error occurs and other solutions fail.
Note that it is not enough to put this in your project’s
gatsby-browser.jsas that is loaded after any of your plugin’sgatsby-browser.jsfiles. There are some very confusing cases where loading polyfills after the import of a library that needs them can be problematic (react and react-dom I’m looking at you).Also note that your local plugins are not transpiled by Gatsby so using
entryas a way of autopopulating your polyfills won’t work (unless you set up your own build step).Here is my
gatsby-browser.jsfor the default settings, obviously yours will need to be specific to your browser matrix. You can togglebabel-preset-envintodebugmode and set it toentry, and it will output all the polyfills it is adding to the console.Workaround: https://github.com/gatsbyjs/gatsby/issues/13410#issuecomment-486306784