모노레포에서 NEXT.js 사용 시 Module parse failed: Unexpected token 에러 발생

증상

../common-styles/src/index.ts
Module parse failed: Unexpected token (37:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   backgroundSkeleton,
| };
> export type { DesignColorSystem, ButtonTheme, ButtonThemes, Theme };
|

모노레포를 구성하였고 그 중 Next.js를 기반으로 동작하는 A라는 패키지가 있고

해당 패키지는 common-styles 라는 package를 dependencies 하고 있다.

common-styles라는 패키지를 A 패키지에 포함되어있었으나 분리한 뒤로 위와 같은 메세지가 발생하고 있다.

 

원인

common-styles 라는 패키지로 분리되기 전에는 next 내부에서 transpiling을 하였으나

common-styles 외부 패키지로 분리된 뒤로 따로 transpiling 하지 않아 발생하였다.

A 패키지의 next에서 common-styles 패키지를 로딩하기 위해서는 사전에 transpiling을 해줘야한다.

 

조치

next js에서 file을 로딩하기 전에 원하는 패키지를 사전에 transpiling 시켜주는 패키지를 추가해주면 된다.

https://www.npmjs.com/package/next-transpile-modules

/**
 * 만약 다른 Plugin 같이 사용해야되는 경우 next-compose-plugins 사용하여 충돌 방지
 * 
 * 아래는 @common/utils과 @common/styles라는 패키지를 사전에 transpiling 한다.
 */
const withTM = require('next-transpile-modules')(['@common/utils', '@common/styles']);

module.exports = withTM({
	// 여기에 next config json을 넣어준다.
});

만약 기존에 다른 Plugin을 사용하고 있었다면 next-compose-plugins를 사용해주자

https://www.npmjs.com/package/next-compose-plugins