-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
How to add babel-polyfill #3314
Comments
Are you trying to require For the 1st, require it in your layouts/index.js file or gatsby-browser.js. For the later, add it to a .babelrc in the root of your site. |
I had already imported
The relevant parts of my final
.babelrc:
|
In the very top of my gatsby-browser.js file i have import 'babel-polyfill' is the very first line in that file. Then in gatsby-node.js I added 'transform-regenerator' exports.modifyBabelrc = ({ babelrc }) => ({
...babelrc,
plugins: babelrc.plugins.concat(['transform-decorators-legacy', 'transform-regenerator']),
}) The 'transform-decorators-legacy' is not needed. Just showing you the exact working copy I use. IE 11 and Edge work fine with Redux-Saga now, Saga uses generators for their side-effects. Hope this helps. |
@Kalcode thanks for this. I think the additional complexity for me comes from using a Incidentally, I ended up adding the |
@Kalcode your setup seems to be working for me, however I get a redux hot-reloading error message in the console
Is this happening for you as well? |
@rongierlach That shouldn't have anything to do with the polyfills. But yah redux needs a way to reload it's reducers. Gatsby is firing off a re-render higher up and redux is saying it doesn't do it auto-magically anymore. Typically we'd use hot module replacement somewhere and have the reducers passed in again via dynamic import. I don't think Gatsby is using hot module replacement so I don't think module.hot is available. But when you are making changes that you need to reinitiate the state of your stores you just need to refresh or you can watch for componentWillUpdate on the ones your are testing and reset stuff yourself. https://github.com/reactjs/react-redux/releases/tag/v2.0.0 Edit: Actually it does use HMRin theory you can use module.hot to reload your reducers. I thought I tried it and it didn't seem to work. YMMV |
@Kalcode so is the error a symptom of using redux with gatsby and changing certain files -- or something being messed up in my redux integration? |
It's a symptom of using the Redux 2.0. Not gatsby. The link above describe the change redux did. You need to manually handle the hot reloading of redux now. How you do that is up to you. The error is only relevant during development. It's not breaking it just doesn't understand hot reloading during development. I've developed different redux connected components with no issues. If your store reducers changes just refresh the browser and continue developing. You only need to refresh when you.change your actual reducers code or you need to reset to an initial state inside the reducers. This isn't a gatsbyjs issue. |
Closing this as there's no further action to be taken here. Please re-open or create a new issue if I'm wrong! |
I had a hard time getting the // Intersection Observer polyfill
if (typeof window !== `undefined` && !window.IntersectionObserver) {
require('intersection-observer');
} Didn't seem to work inside |
I'm using
redux-saga
in my gatsby app and therefore generator functions. These are causing errors in IE11 and it seems like babel isn't polyfilling them. I've been trying different techniques for includingbabel-polyfill
but none seem to work, both of these seem relevant but don't solve my issue:#341
#2177
I'm trying to do the following, but still having the same error in IE. Is there a preferred approach for solving this?
The text was updated successfully, but these errors were encountered: