1. 현상

1-1. 누가, 어디서, 어떤 문제 현상을 겪었는가?

1. 누가 : Mac M1 Pro, Chrome

2. 어디서 : PosePicker 프로젝트, Next.js

3. 언제 : toss/es-toolkit을 설치하여 delay함수를 사용하다가

4. 어떤 : 컴파일 과정에서 에러가 뜬다.

   

   error ./node_modules/es-toolkit/src/array/chunk.ts
   Module parse failed: Unexpected token (24:21)
   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
   |  * // Returns: [['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]
   |  */
   > export function chunk<T>(arr: readonly T[], size: number): T[][] {
   |   if (!Number.isInteger(size) || size <= 0) {
   |     throw new Error('Size must be an integer greater than zero.');
   
   Import trace for requested module:
   ./node_modules/es-toolkit/src/array/chunk.ts
   ./node_modules/es-toolkit/src/array/index.ts
   ./node_modules/es-toolkit/src/index.ts
   ./src/app/(Main)/pick/PickComponent.tsx

1-2. 현상이 발생하는 조건은 무엇인가?

1. delay를 import해올 때는 에러가 뜨지 않는다.
2. delay를 사용하면 에러가 뜬다.

2. 문제 원인

2-1. 코드상에서 문제를 일으키는 부분이 어디인가?

1. 이벤트 핸들러 함수 내부

2-2. 그 코드가, 그 조건에서, 왜 의도대로 동작하지 않았는가?

1. 모듈을 가져와 사용하는 과정에서 에러가 발생하는 듯하다.

2-3. 파악한 원인으로 인한 다른 문제는 없는가?

1. range같은 다른 함수를 가져와도 에러가 발생한다.

2-4. 에러 정독

Module parse failed: Unexpected token (24:21) 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

모듈 파싱을 실패했다. : 알수 없는 토큰 이 파일 타입을 다루기 위해서는 적절한 로더가 필요한데, 현재 이 파일의 로더를 찾을 수가 없다.

2-5. 상황 재연

1. Next.js 프로젝트를 만들어서 es-toolkit을 사용하니 잘 실행된다.

2-6. 소거

1. next.config.js의 withPWA 소거 ⇒ X
2. node_modules, pacakge-lock.json 재설치 ⇒ X

2-7. 재설치

1. package.json의 es-toolkit을 살펴보는데 뭔가 이상하다

   

   설치 방법이 잘못되었던 것이었다.

   

   34분 전, toss/es-toolkit으로 설치한 나..

3. 해결책

3-1. 앱을 의도대로 동작시키기 위한 방법은 무엇이 있는가?

1. es-toolkit의 delay를 사용하지 않는 것
2. es-toolkit을 제대로 된 경로에서 설치하여 해결

4. 환경 개선

4-1. 현상의 재현조건을 더 쉽게 찾아내려면?

1. 설치에 앞서서, 꼭 공식문서의 설치방법을 체크하자. 다른 패키지를 설치할 수 있다.
   • 전에도 비슷한 경험이 있다. react query가 tanstack query로 바뀐 것을 모르고 잘못 설치한 경우였다. 앞으로는, 꼭 설치에 앞서 ‘최신’ 공식문서의 설치 방법을 체크하자.