Using the fetch polyfill

[steverob]

I'm trying to use the fetch polyfill - https://github.com/github/fetch. Their documentation mentions that to use with webpack, one needs to add it to the entries.

entry: ['whatwg-fetch', ...]

How do I do this with webpacker. I'm a total newbie to webpack :)

[rossta]

While you could edit the entry like the docs suggest, it's a little tricky to do this in Webpacker with the way it abstracts Webpack configuration. It's not really necessary either. I would just import the package near the top of app/javascript/packs/application.js file (or whatever is the main bundle). I already do this for the babel-polyfill package that Webpacker installs on our behalf, so this would be a similar concern.

$ yarn install whatwg-fetch

// application.js
import 'babel-polyfill'
import 'whatwg-fetch'

// rest of the bundle below ...

[javan]

+1

Thanks @rossta!

[steverob]

Thanks @rossta I’ll try that. Btw. I thought babel-polyfills are required by default out of the box. Do I need to do this require for that to work also?

…

-- Regards Steve Robinson

On 06-Dec-2017, at 3:44 AM, Javan Makhmali ***@***.***> wrote: +1 Thanks @rossta! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[gauravtiwari]

Yes, and then when babel compiles it will replace this import with appropriate polyfills specific to required browsers.

[gauravtiwari]

If you are using multiple packs/pages i.e. application.js isn't only the main bundle, then consider creating a polyfills.js with suggested import from @rossta and,

// packs/polyfills.js

import 'babel-polyfill'
import 'whatwg-fetch'

//... rest of the polyfills if any

add it in your layout application.html.erb, in head:

<%= javascript_pack_tag 'polyfills' %>
# ... other packs

[steverob]

@gauravtiwari Thanks... I tried this..

But, still my exception tracker is seeing ReferenceError: Can't find variable: fetch errors in number of browsers including - Safari 7, 8 & 9, Chrome 28, etc..

My .babelrc presets are these -

"presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["iOS >= 7", "> 0.5%", "ie >= 9"],
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ]

Does this have anything to do with this? how do I reliably test something like this.

[gauravtiwari]

Did you include that bundle in the view?

[steverob]

Yes I do..<%= javascript_pack_tag 'browse-event-bundle' %>

[gauravtiwari]

Ahh right I see, so that's one bundle you are trying to render. Could you share more info on how you are rendering your components? Don't know how react on rails works currently.

[gauravtiwari]

How about if you make one polyfill pack just for polyfills and do the component registry in separate component?

[steverob]

<%= react_component("BrowseEvent", 
      props: {
        ...
      }, 
      prerender: false) 
%>

Like this..

[steverob]

How about if you make one polyfill pack just for polyfills and do the component registry in separate component?

I'll try that. Thanks for your quick response @gauravtiwari :)

[gauravtiwari]

No worries, make sure it's placed in the head (application layout file) before other JS packs/react components.

[steverob]

@gauravtiwari I have my JavaScript requires at the bottom of my layout, but the polyfill pack has been required above the rest. That should be fine right?