IE11 개발서버에서 attachShadow 이슈

이슈

attachShadow가 웹컴포넌트와 관련된 키워드인데, IE에서 작동하지 않는다.(개발 서버만)

 

 

해결 방법

1) @webcomponents/shadydom 설치

2) src/polyfills.js

import "@webcomponents/shadydom";

3) next.config.js

  webpack(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;
  },