Webpacker: 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 [e-mail] 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?

[gauravtiwari]

Yep should be fine but safe to place it in the head since we want browser to parse that first before anything else :)

[steverob]

@gauravtiwari alright :) This is in production now and I'm seeing if there are any occurrences of the issue. So far so good in the last 15 mins :)

[steverob]

@gauravtiwari It does not seem to be fixed man...

UA - Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13A344 Safari/601.1
Error - ReferenceError: Can't find variable: fetch

Haha, this is like a zombie

[gauravtiwari]

@steverob Please place in the head.

[gauravtiwari]

polyfills file

[steverob]

@gauravtiwari okay

[steverob]

@gauravtiwari awesome man. No issues so far :) :) Thanks a ton.

[brentdodell]

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

@gauravtiwari, how would you do this with the new splitChunks and javascript_packs_with_chunks_tag helper? How would I control the ordering so that the polyfills pack is first in the view?

[jakeNiemiec]

How would you do this with the new splitChunks and javascript_packs_with_chunks_tag helper?

@brentdodell What webpackER calls a "pack", vanilla webpack calls an "entry point".

How would I control the ordering so that the polyfills pack is first in the view?

What you would need to do is put import "@babel/polyfill"; at the top of every "pack" that needs it. splitChunks should automatically extract duplicate code to a single shared chunk. (much like how commons/vendor chunks use to work in 3.x)

Ref:

If useBuiltIns: 'entry' is specified in .babelrc then include @babel/polyfill at the top of the entry point to your application via require or import

[brentdodell]

Thanks @jakeNiemiec!