1. 현상

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

  1. 누가 : Mac M1 Pro, Chrome

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

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

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

    image.png

    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. 파악한 원인으로 인한 다른 문제는 없는가?