IE11 not working after v9.2.1-canary.2 update

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

[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.

[Timer]

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