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
Thank you @amigolargo and @tomdohnal.
I just fixed this problem with your solution in Next.js 9.5.5.
package.json
next.config.js
./src/polyfills.js
@altruisticsoftware in
src/polyfills.js
,import '@webcomponents/shadydom';
It is configured in
next.config.js
within the webpack config like so: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
^ Above code fixes for me too, I recommend this further optimization to keep that dependency out of prod:
./src/polyfills.js:
We fixed this in our application using the
@webcomponents/shadydom
polyfill, +1 to @tomdohnalsame error error here with next@9.4 on IE11 in dev mode. this make IE11 debugging impossible in dev mode
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.
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?
thanks @amigolargo and @tomdohnal ur solution worked
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:
I believe this has been resolved in https://github.com/vercel/next.js/pull/13704? That PR does fix this issue for me.