IE11, development, HMR: Object doesn't support property or method 'attachShadow'.

Bug report

Describe the bug

Basically the nextjs page bugs in IE11 development with the following message.

Object doesn't support property or method 'attachShadow'

It seems related to development hot module reloading. Somehow the /_next/webpack-hmr route is caught by express. I have by the way seen similar bugs when using custom routes in pure nextjs pages previously. Unsure if this is related.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Install the custom-server-express example.
2. Add this snippet in server.js:

  server.get('/:one/:two', (req, res) => {
    console.log("Parameters", req.params)
    return res.redirect('/a')
  })

1. Open localhost:3000 in Internet Explorer 11.
2. The page flashes the actual content before going white.
3. Open the console (F12) and the attachShadow message flashes indefinitely.
4. In the command window, read the message Parameters { one: '_next', two: 'webpack-hmr' }

Expected behavior

I expected to see my content. I would have also expected that attachShadow was either added as a built-in polyfill in nextjs, or that the function was avoided. I believe it can be traced to this location: @next\react-dev-overlay\lib\internal\components\ShadowPortal.js. In other locations in the next package you have an if-test to avoid this - it seems to me.

Screenshots

System information

• OS: Windows 10
• Browser: IE 11
• Version of Next.js: latest (as per today, using the custom-server-express example)
• Version of Node.js: 10.16.0

Additional context

I came across this while updating a production package. I wanted to debug the polyfills and find out whether I still need to add polyfills for IE11 after next 9.3. This was a major roadblock.

The real problem here is probably using attachShadow in IE11.

I will try to recreate it without an express server…

[jtakahashi64]

Thank you @amigolargo and @tomdohnal.

I just fixed this problem with your solution in Next.js 9.5.5.

package.json

"@webcomponents/shadydom": "^1.7.4"

next.config.js

module.exports = {
  webpack: function (config) {
    const originalEntry = config.entry;

    config.entry = async () => {
      const entries = await originalEntry();

      if (
        entries["main.js"] &&
        !entries["main.js"].includes("./src/polyfills.js")
      ) {
        entries["main.js"].unshift("./src/polyfills.js");
      }
      return entries;
    };

    return config;
  },
};

./src/polyfills.js

import "@webcomponents/shadydom";

[amigolargo]

@altruisticsoftware in src/polyfills.js, import '@webcomponents/shadydom';

It is configured in next.config.js within the webpack config like so:

const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();

      if (
        entries['main.js'] &&
        !entries['main.js'].includes('./src/polyfills.js')
      ) {
        entries['main.js'].unshift('./src/polyfills.js');
      }

      return entries;
    };