[npm] Please add a browserslist key to your package.json.

요즘 회사 내 개인 프로젝트로 .NET Core를 사용한 dApp 만들기를 수행하고 있다.

그런데 좀처럼 마음대로 굴러가는 게 하나도 없다 😂

특히 실행부터 문제가 발생한다. 분명 난 하나도 건들지 않고 빌드 후 실행만 하는 건데도 npm 자체에서 이렇게 오류가 뜨니 난감할 따름이다.

 

react-scripts를 사용하면서 browserslist를 설정하라는데, 난 이미 설정했단 말이다!!

 

Broswerslist란 어떤 브라우저가 프론트엔드로 지원되는지를 명시하는 툴이다. 이를 통해 최신 자바스크립트 features를 사용할 때 더 나은 퍼포먼스를 보여줄 수 있다.

• Legacy Bundle : Contains polyfills, larger bundle size, compatible with old browsers without ES6 support
• Modern Bundle : Smaller bundle size, optimized for modern browsers. 

만약 더 많은 Bundle을 최적화한다면, 이에 대한 대가로 조금 더 느리게 빌드가 된다.

 

정말 갖은 방법을 다 써서 해답을 찾으려고 했으나 잘 먹히지 않는다. 벽과 이야기하는 기분이랄까..

 

그래서 ClientApp 내, 즉 모든 리액트 관련 파일을 지우고 새롭게 npx create-react-app을 통해 파일을 생성했습니다~

자꾸 패키지들이 충돌하는 것을 어떡하나구요~ 그럼 지워야죠~

 

해답같지 않은 해답이지만 속은 너무 편한 걸~

 

참고 문헌

• https://stackoverflow.com/questions/55510405/what-is-the-significance-of-browserslist-in-package-json-created-by-create-react