remix ssr에서 esmodule 패키지 사용하기 (ex: swiper)

현재 Swiper 8버전처럼 esmodule로만 되어있는 패키지는 remix에서 사용시

Error [ERR_REQUIRE_ESM]: require() of ES Module 
/Users/hj/study/keylogee/node_modules/.pnpm/swiper@8.2.4/node_modules/swiper/swiper.esm.js
from /Users/hj/study/keylogee/api/index.js not supported.

와 같이 ERR_REQUIRE_ESM 에러가 나는데 이는 서버사이드에서 esmodule 방식을 컴파일을 하는 방법을 알지 못하기 때문이다.

이런 경우 config에 serverDependenciesToBundle 속성에 미리 의존성 번들을 추가해주어야 한다.

 

remix.config.js

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  server: './server.js',
  ignoredRouteFiles: ['**/.*'],
  serverDependenciesToBundle: ["swiper", 'swiper/react', 'ssr-window', 'dom7']
}

위와 같이 패키지에서 사용되는 번들들을 전부 추가해주어야한다.