AWS SDK V2와 Vite를 함께 사용할 때 생기는 에러 해결기(feat. Sourcemap)

로컬에선 되는데 배포 환경에선 왜 안되죠..??

1. 배포 환경에서만 발생하는 에러를 발견하다

로컬에서는 잘 보이던 화면이 배포 환경에서 안보인다.
이렇게 당황스러울 수가 없다.

일단 콘솔을 보니...

콘솔화면

"Uncaught TypeError: e is not a constructor" 라는 에러를 확인할 수 있었다.

그런데 e를 도대체 어떻게 확인한단 말인가...

이미 배포 환경에서는 리액트 프로젝트가 Vite로 빌드되면서 하나의 js파일로 컴파일된 후였다.

로그가 가리키는 변환된 소스

따라서 에러가 발생한 js 파일을 확인해봐도 b,e와 같은 알 수 없는 변수로 코드들이 변경되어 있다.

로컬에서도 같은 에러가 발생한다면 어떤 파일에서 발생한 에러인지 쉽게 확인할 수 있겠지만, 지금과 같이 배포 환경에서만 발생하는 에러는 출처를 확인할 수 없다.

막막하던 차에, 빌드 과정에서 사용하는 sourcemap이라는 빌드 옵션을 발견하였다.

2. 디버깅을 위한 sourcemap의 활용

소스맵은 빌드 과정에서 변환된 소스와 원본 소스를 연결하여 디버깅을 돕는 파일이다

리액트 프로젝트를 빌드하면 그 과정에서 코드가 최적화되면서 변환된 HTML, CSS, JS 파일로 변환된다.
그 과정에서 변수명도 변환되는데, 이로 인해 어디서 에러가 발생한 것인지 확인하기 어렵다.
변환 후에도 에러가 발생한 부분을 확인하기 위해 sourcemap이라는 옵션이 존재한다.

vite.config.ts

import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), svgr(), tsconfigPaths()],
  optimizeDeps: {
    exclude: ['js-big-decimal'],
  },
  define: { _global: {} },
  build: {
    sourcemap: true, // 소스맵을 설정하는 부분
  },
});

sourcemap은 빌드 과정에서 변환된 소스와 원본 소스를 연결하여 디버깅을 돕는 파일이다.
이 옵션을 켜면 배포 후에도 로그에서 원본 파일의 위치를 확인할 수 있다.
(이전에 발생한 에러를 재현하려 했으나 이전 위치와 100% 일치하는 에러가 발생하지는 않았다. 하지만 여전히 에러 코드는 AWS SDK를 가리키고 있다.)

소스맵을 켠 뒤의 콘솔화면

로그가 가리키는 원본 소스

📌 주의 : 소스맵은 실제 배포 서버에서는 사용해선 안된다! 소스맵을 켜두면 원본 소스가 모두 노출될 것이다.

3. Vite와 AWS SDK V2는 왜 궁합이 안 좋을까?

위에서 생긴 문제를 해결하기 위해 AWS SDK와 Vite로 생기는 문제에 대해서 검색해보았다.
구글에서 링크가 딱 하나 나왔는데 stackoverflow에 나온 글이었다.

https://stackoverflow.com/questions/75426770/aws-sdk-contributes-to-build-error-uncaught-typeerror-e-is-not-a-constructor

빌드 과정에서 AWS SDK V2 모듈을 인식하지 못해서 생기는 문제인 것으로 보인다.
이는 Vite가 로컬 환경에서 빌드하는 방식과 배포 환경에서 빌드하는 방식이 다른 것이 원인이 아닐까 싶다.
Vite에 대해 조금 더 공부하면 정확한 원인을 찾을 수 있을 것 같다.

결과적으로 아래 코드로 변경함으로써 에러를 해결했다.

vite.config.ts

import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr(), tsconfigPaths()],
  optimizeDeps: {
    exclude: ['js-big-decimal'],
  },
  define: { _global: {} },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser', // 모듈의 실제 위치를 브라우저 번들러에게 알려줌
    },
  },
  build: {
    commonjsOptions: {
      include: [/node_modules/], // 번들에 포함시킬 모듈의 경로
      extensions: ['.js', '.cjs'], // CommonJS 모듈로 간주할 파일의 확장자
      strictRequires: true, // require 구문에 해당 모듈이 없을 경우 에러 발생
      transformMixedEsModules: true, // import와 require문을 함께 사용하는 경우 이를 번들에 포함시키기 위함
    },
  },
});

4. 결론

1. AWS SDK V2와 Vite를 함께 사용중이라면 위 코드를 참고해보세요!

2. 로컬에서는 되는데 배포환경에서 안된다면 소스맵을 활용해보세요.

3. 배포환경에서는 반드시 소스맵을 꺼주세요.