Next.js: Polyfills necessary/Browser support?

[sfrieson-tm]

In testing in IE11, errors throw because there is no support in that browser for Array.prototype.find, Array.prototype.includes, or Object.assign. I was adding polyfills one-by-one as the error messages popped up, so it could go beyond these three. I just gave up at that point.

Alternatively, I haven't seen any browser support list, so I don't know for a fact that this is a bug, but I'm assuming you want to support at least IE11.

[c0b41]

same problem #1754

use this example with-custom-babel-config and this babel-preset-env

[apotek]

@sfrieson-tm Would you agree this is a dupe of #1754? Looks like they have fixed this though in their comment, they didn't link to the change set.

[timneutkens]

@c0b41 https://github.com/zeit/next.js/blob/master/server/build/babel/preset.js#L16-L18 we already include that preset. https://github.com/babel/babel-preset-env#usage mentions it should work like babel-preset-latest

[eezing]

@sfrieson-tm brings up a good point

I haven't seen any browser support list

A supported browser list would be very helpful.

[arunoda]

@eezing That's a good point.
We need to mention that we only support IE9+

[timneutkens]

That is, all versions above IE9. Not including IE9. So support starts at IE10 (which is deprecated by MS btw: https://www.microsoft.com/en-us/windowsforbusiness/end-of-ie-support)

[sfrieson-tm]

I was able to upgrade the app to the v2.3.1 and came across the Object.assign error, but I'm still trying to figure out if it came from Next.js or elsewhere. A new IE11 error that I'm pretty sure is coming from Next is this String.prototype.startsWith.

[arunoda]

@sfrieson-tm try to create a sample Next.js project and use these array methods.
See if it's throws any errors? If so, send us that repo. Let's fix it.
Otherwise, it could be a module.

Please re-open this issue after that.

[morajabi]

Any news on this? IE11 users, visiting https://graphql-europe.org which is a NextJS app, are experiencing these errors.

[chhuang]

Same problem.

[sfrieson-tm]

Considering recent comments here I decided to make a repo of the issues reference so far in this ticket.
https://github.com/sfrieson-tm/next-ie11

@arunoda, if I've followed your suggestion above appropriately, could you please reopen this ticket.

@morajabi, @chhuang do you have any cases that you'd add to the repo?

[timneutkens]

Just merged https://github.com/zeit/next.js/pull/3758, will be released soon.

[renet]

@sfrieson-tm Did any configuration (webpack or .babelrc) work for you to fix your problem? I'm using the following .babelrc and am still running into this issue on IE11 (Object doesn't support propery or method 'includes'), even though I just updated to the latest version of next.js:

{
  "presets": [
    ["env", { "forceAllTransforms": true }],
    "next/babel",
  ],
}

Could you please post your solution configuration, if it exists?

[oliviertassinari]

I can confirm, IE 11 support in development is broken in next-5.1.0.

It should be fixed once https://github.com/gaearon/react-hot-loader/commit/87ad586a01d76585eba492d27f235a66650acb2b is deployed cc @neoziro

[gregberge]

@oliviertassinari probably this week-end

[sfrieson-tm]

@renet At the time of posting we needed to fix the issue right away so we just moved forward with polyfilling 🙁 .

[timneutkens]

You can use https://github.com/zeit/next.js/tree/canary/examples/with-polyfills for now.

[renet]

@sfrieson-tm @timneutkens Thanks, that worked for me. I had to change the code a little bit, though:

entries['main.js'].unshift(path.join(__dirname, 'polyfill.js'));

Looking forward to the new release that fixes the IE11 support.

[Vadorequest]

@timneutkens Can we get a list of polyfills needed by Next.js app?

So far I came up with this:

import 'core-js/fn/object/assign'
import 'core-js/fn/string/ends-with'// unsure if needed
import 'core-js/fn/string/starts-with'
import 'core-js/fn/string/includes'
import 'core-js/fn/array/includes'
import 'core-js/fn/array/find'

Are there more? It would be nice to just enable Next.js polyfills when starting the app somehow. Like, having an option to enable it, it doesn't add too much code if it's just a few polyfills like this, and having them included by default would probably be a good thing, most people want to support IE11 for instance.

[Vadorequest]

Finally, I dynamically injected a polyfill when the browser was IE.

I couldn't use the with-polyfills example for some reasons, also I don't like increasing my bundle size since I'm limited to 50Mb and I'm already at 32/50Mb used (AWS Lambda limit)

In _document.js I detected the browser and then dynamically injected the polyfill if useragent.family is IE.

import useragent from 'useragent';

...

static getInitialProps(props) {
    const { req, res, renderPage, isServer = false } = props;
    const { html, head, errorHtml, chunks } = renderPage();
    const styles = flush();
    const ua = useragent.parse(req.headers['user-agent']); // here

    return { html, head, errorHtml, chunks, styles, isServer, useragent: ua };
  }

render() {
    const { styles, useragent } = this.props;

    return (
      <html>
        <Head>
          <style>{styles}</style>

          {
            useragent.family === 'IE' && ( // IE only, not Edge or others
              <script
                src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js'
              />
            )
          }
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }

Since the polyfill is 100kb, I prefered to load it only for IE, and it's the only browser lacking Array.find/startsWith/includes or Object.assign as far as I can tell.

[gregberge]

React Hot Loader v4.0.1 is released, should fix includes.

[ChennyBaBy]

is there a way to make next.js 5.1.0 to use React Hot Loader v4.0.1 ? once i install next 5.1.0 it auto makes it use v4.0.0 i m currently manually editing the shrinkwrap file to make it use 4.0.1

[morajabi]

@ChennyBaBy Why don't you upgrade to Next v6? It's using 4.1.1!

[oliviertassinari]

Why don't you upgrade to Next v6

@morajabi babel@7-beta isn't well supported by all the ecosystem yet. Unless I'm missing something, babel 6 and 7 can't easily be used together.

[mansdahlstrom1]

Is this fixed in [email protected]? Don't see this issue mentioned in the Release notes. Just updated to Next 6 and stil have the same issue, using the following .babelrc

EDIT: to be clear, we are having problems with Object.assign in IE 11 specifically

{
  "presets": [
    ["next/babel", {
      "targets": {
         "browsers": ["last 2 versions", "safari >= 7"],
         "node": true
      }
    }]
  ],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
    "transform-object-assign"
  ]
}

[eezing]

@mansdahlstrom1 The polyfill solution by @Vadorequest gets the job done. It’s not the most elegant, but is perfectly sound. It allowed my team to move forward.

[mansdahlstrom1]

@eezing Yes, we also went with @Vadorequest solution, i really hope we can get a cleaner fix for it later down the line thou, but it works for now!

Thanks

[xyyjk]

Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser. Tailor the response based on the features you're using in your app.

Just the polyfills you need for your site, tailored to each browser. Copy the code to unleash the magic:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js" />

[Vadorequest]

There are pro and cons about using Polyfill.io
One of the most concerning cons, is our inability to know when something's wrong on the CDN side (like any CDN actually), we have no control over it and it's a critical issue since everything could go wrong anytime, without any warning.

I like to host my own dependencies on my own CDN, because mistakes happen. But this is likely a script dynamically generated by a server based on the User-Agent, so it's not self-hostable.

Don't get me wrong, it's awesome for getting started and poking around, but for a production website that is business critical, it's probably not the way to go, even if it's reliable, because mistakes happen.