Skip to content

Qvil Blog

Github

[Next.js] Transpile external npm package/Transpile modules inside node_modules

— Next.js, Cross Browsing, IE — 1 min read

외부 라이브러리가 IE를 지원하지 않는 경우 Transpile하지 않으면 크로스 브라우징 문제가 생긴다.

Next.js가 babel로 transpile해줄 거란 기대를 할 수 있는데 Next.js는 기본적으로 외부 패키지를 Transpile하지 않는다.

NextJS ignores node_modules by default

https://stackoverflow.com/questions/60300372/in-nextjs-how-to-build-when-referencing-external-npm-package-that-contains-svgs

But we can't do this now we exclude everything inside node_modules from babel transpiling.

https://github.com/vercel/next.js/issues/706#issue-199471918

이를 해결하기 위해서 next-transpile-modules 사용

  1. 설치 npm install --save next-transpile-modules
  2. Modify next.config.js

next.config.js

1const withTM = require("next-transpile-modules")(["some-module"]);
2
3module.exports = withTM({
4  // ...
5});

다른 플러그인과 함께 사용해야 하는 경우 next-compose-plugins를 이용하여 아래와 같이 사용할 수 있다.

1const withPlugins = require("next-compose-plugins");
2const withTM = require("next-transpile-modules")([
3  "some-module",
4  "and-another",
5]);
6
7module.exports = withPlugins([withTM], {
8  // ...
9});

참고