next.js: 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:

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

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

Open localhost:3000 in Internet Explorer 11.
The page flashes the actual content before going white.
Open the console (F12) and the attachShadow message flashes indefinitely.
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…

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 43
Comments: 23 (9 by maintainers)

Commits related to this issue

Add shadow dom polyfill https://github.com/vercel/next.js/issues/13231 — committed to haydnhkim/next-pack by haydnhkim 4 years ago

Most upvoted comments

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";

+14

jtakahashi64 on Oct 19, 2020

@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;
    };

+14

amigolargo on Jun 3, 2020

I think this could be solved by using webcomponents polyfill (https://github.com/webcomponents/polyfills) in the packages/react-dev-overlay/lib/internal/components/ShadowPortal.tsx file.

I could try to make a PR if you’d be interested

+10

tomdohnal on Jun 3, 2020

^ Above code fixes for me too, I recommend this further optimization to keep that dependency out of prod:

./src/polyfills.js:

if (process.env.NODE_ENV === 'development') {
    require('@webcomponents/shadydom');
}

mliq on Oct 28, 2020

We fixed this in our application using the @webcomponents/shadydom polyfill, +1 to @tomdohnal

amigolargo on Jun 3, 2020

same error error here with next@9.4 on IE11 in dev mode. this make IE11 debugging impossible in dev mode

revolunet on Jun 2, 2020

Would someone be willing to setup an IE 11 development test suite for us?

It’d be great to fix this and prevent future regressions with CI.

Timer on Jun 6, 2020

Small update - I couldn’t immediately recreate the error without an express server, but I didn’t pour my soul into it. Would it be an easy fix to add an if-test for attachShadow in the specific place I pointed to?

aorsten on May 27, 2020

thanks @amigolargo and @tomdohnal ur solution worked

riazXrazor on Sep 23, 2020

I am still getting this error on next 9.5.3 - is there anything else I need to do to fix it? Production mode works. This is my .browserlistrc in root:

# Supported browser list.
# See https://github.com/browserslist/browserslist for more details.

last 2 chrome versions
last 2 ChromeAndroid versions
last 2 edge versions
last 2 firefox versions
last 2 ios_saf versions
last 2 safari versions
ie 11
node 12

mliq on Sep 2, 2020

I believe this has been resolved in https://github.com/vercel/next.js/pull/13704? That PR does fix this issue for me.

bolatovumar on Aug 19, 2020