[DApp] Typescript Failed to parse source map 에러

프로젝트 실행

yarn install
yarn start

DApp superswap DEX 프로젝트 환경설정 중 실행 과정에서 다음과 같은 오류가 발생했다.

에러 발생

source-map-loader

source-map-loader는 Webpack과 같은 번들러에서 사용되는 로더(loader) 중 하나로, 소스 맵(Source Map) 파일을 로드하고 처리하는 역할을 합니다. 번들링된 JavaScript 코드와 원본 TypeScript 또는 JavaScript 코드 간의 매핑 정보를 제공하는 도구입니다.

sourmap 이란?

소스 맵(Source Map)을 생성하여 번들링된 JavaScript 코드와 원본 TypeScript 또는 JavaScript 코드 간의 매핑 정보를 제공합니다. 이는 개발 환경에서 디버깅을 용이하게 해주는 중요한 기능입니다.

해결

구글링 검색으로 해당 에러 처리 방법에 대한 몇가지 방법을 찾았다. 이 중 다음과 같이, 개발 환경에서 sourceMap 생성을 하지 않도록 하여 에러를 없앨 수 있다고 한다.

// package.json
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
    ...
  },

GENERATE_SOURCEMAP=false는 소스 맵 생성을 비활성화하는 환경 변수를 설정한다는 의미이다.

하지만, Windows 환경에서 다음과 같이 환경 변수를 생성해서 설정하지 못한다. 따라서, 다음과 같이 cross-env를 설치한다.

npn i -D cross-env

cross-env는 환경 변수를 설정하고 사용하기 위한 도구로, 여러 플랫폼에서 환경 변수를 일관되게 다룰 수 있게 도와준다.

// package.json
  "scripts": {
    "start": "cross-env GENERATE_SOURCEMAP=false react-app-rewired start",
    ...
  },

cross-env를 사용해서 Windows 환경에 GENERATE_SOURCEMAP 환경 변수를 생성하여 실행한다.

yarn start 명령어에서 개발 환경에 sourceMap을 사용하지 않도록 설정해서 에러를 해결했다. 근본적인 해결법은 아닌 것 같지만 위와 같이 임시 해결 방법으로 정도로 사용할 수 있다.

참고자료:
https://github.com/MetaMask/detect-provider/issues/42
https://github.com/mswjs/msw/issues/1030#issuecomment-1009253387