Next.js: IE11 not working after v9.2.1-canary.2 update

[devbrains-com]

Bug report

Describe the bug

First of all: sorry for posting a boring IE11 issue 😭

After Updating to v9.2.1 our project stoped working on IE11. The pages didnt load as expected and the css wasn't applied correctly. So we went through the canary releases and got to the point, that the changes in v9.2.1-canary.2 cause the behaviour. More specificly the pullrequest "Fix hydration with custom _app and granular chunks #10144" file "packages/next/build/entries.ts" line 129.

To Reproduce

1. Go to with-polyfills example
2. Open examples\with-polyfills\client\polyfills.js and add the following imports before the other imports:

import 'core-js/es7/object'
import 'core-js/es7/map'
import 'core-js/es7/array'
import 'core-js/es6'
import 'core-js/es7/symbol'

1. In the package.json use Version "9.2.1-canary.1" first (it works) and then "9.2.1-canary.2" (its broken)
2. yarn
3. yarn build
4. yarn start
5. open Page in IE 11

We have a rather complicated project with next-css etc. But to reproduce we used a local production build and opened the page in IE11. Before the described Change, everything worked as expected but didn't after the change. The first thing to notice was the css, that wasn't applied correctly and the parsing error on the console.

We changed the following code:

client[bundlePath] =
        page === '/_app'
          ? [pageLoader, require.resolve('../client/router')]
          : pageLoader

to:

client[bundlePath] = pageLoader

and the page worked again but I assume something else doesn't :). It looks like the require.resolve() could be the problem on IE11?

Expected behavior

The page is displayed correctly as with the previous versions.

Screenshots

Before (good):

After (broken):

System information

• OS: Windows 10
• Browser (if applies) IE 11 (11.592.18362.0)
• Version of Next.js: v9.2.1-canary.2 and newer

[timneutkens]

Please provide a full reproducible demo of the issue so that we can take a look. We run all Next.js production tests against multiple browsers including IE11.

[devbrains-com]

just added the steps to reproduce 👍

[devbrains-com]

It seems to be the following import: import 'core-js/es6'

[RossMcMillan92]

I've experienced this too with the v9.2.1 update. Sometimes in IE11 we'll see objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})., whereas other times it works fine.

Pinning the Next version to 9.2.0 fixes the issue.

[chrigu-ebert]

+1 Having the same issue and stuck with Next 9.2.0

[WillSelway]

We are also having the same issue after upgrading to 9.2.1.

Below is full reproducible demo, including an image of the issue (can only been seen in console in the demo)
https://github.com/WillSelway/nextjs-ie11-issue
https://github.com/WillSelway/nextjs-ie11-issue/blob/master/nextjsIssue.PNG

Thank you for taking a look

[timneutkens]

@chrigu-ebert please don't spam the thread with +1. If you want to +1 an issue you can use GitHub emoji reactions and 👍 on the initial issue.

[niamleeson]

Any update on this issue? Polyfills not working with 9.2 is the only thing keeping us from upgrading. We would love to use the catch-all routes without a custom express server.

[Timer]

IE11 is supported out of the box, no polyfills required in next@canary. Any polyfills that are required for app-features should be imported first thing in pages/_app.js.

[nsmith7989]

FWIW our issue was styled components, [email protected] and IE11.

https://github.com/styled-components/styled-components/issues/2190#issuecomment-569069439

We need the Symbol polyfill to load before React itself.

In 9.1 we can add polyfills before main.js with-polyfills and that would load it before react. 9.2 onwards there is no guarantee that code runs before React.

@Timer Is there a path forward in 9.2 to load polyfills required for app-features before React loads?

[vjekofalco]

FWIW our issue was styled components, [email protected] and IE11.

styled-components/styled-components#2190 (comment)

We need the Symbol polyfill to load before React itself.

In 9.1 we can add polyfills before main.js with-polyfills and that would load it before react. 9.2 onwards there is no guarantee that code runs before React.

@Timer Is there a path forward in 9.2 to load polyfills required for app-features before React loads?

Correct, in our case issue is in custom Webpack entries configured in next.config.js . Investigating solution.

[Timer]

Next.js 9.3 (next@canary) will load all polyfills for IE11 before any other code executes.

[vitorhsb]

Next.js 9.3 (next@canary) will load all polyfills for IE11 before any other code executes.

Will this still require custom next.config.js code to load polyfills or it will load out of the box?

[Timer]

This happens out of the box.

[Timer]

Closing as stale. Please let us know if anyone is still having issues.