[NextJS] IE script####, syntax error 이슈 해결

현재 프로젝트에 Next.js를 도입하고 환경세팅을 하던 중,

 

IE 11 에서 SCRIPT:#### : Unable to get property 에러와 syntax error를 만났다.

 

이미지는 퍼옴. 대충 이런거.

 

polyfill을 꼼꼼하게 했음에도 불구하고 문제가 생긴 이유가 뭔지 찾아보니, transpile되지 않은 종속성 노드 모듈에서 문제가 생겼다는걸 알았다.(서드파티 문제라는 말)

How to make IE 11 compatible with Next.js ? · Discussion #13922 · vercel/next.js

 

martpie/next-transpile-modules

깃헙 이슈에서 동일한 문제가 발생한 유저를 찾았고, next-transpile-modules 플러그인을 통해 문제를 해결 할 수 있다는걸 알아냈다.

 

IE 에서 에러 로그를 뒤지면서 문제가 생긴 서드파티를 찾았고, 사용법을 찾아 적용했다.

 

 

 

next.config.js

const withImages = require("next-images");
const withTM = require("next-transpile-modules")(["class-transformer"], { debug: false });
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = withTM(withImages({
    plugins:[
        new CompressionPlugin(),
        new BundleAnalyzerPlugin()
    ],
    fileExtensions: ["jpg", "jpeg", "png", "gif"],
    esModule : true ,
    inlineImageLimit: false,
    webpack(config, options) {
        config.module.rules.push({
            test: /\.svg$/,
            use: ["@svgr/webpack"]
        });
        return config
    }
}));

 

다른건 볼 필요 없고, 이 부분을 주의깊게 보면 된다.

 

const withTM = require("next-transpile-modules")(["class-transformer"], { debug: false });

 

withTM에서 인자로 트랜스파일 작업을 할 의존성 모듈을 배열로 정의한다.

나같은 경우는 class-transformer에서 문제가 생겨서 추가했다.

 

module을 withTM으로 감싸주고 재시작하면 문제 해결.

 

 

---

 

현재는 @rooks 시리즈에서도 문제를 발견해서 해당 모듈도 추가되었다.