[Next] dynamic, lazy import 시 발생하는 에러

[Next] dynamic, lazy import 시 발생하는 에러

하고자 한 것

icon을 볼 수 있는 페이지를 구현하려고 했습니다.
로직 순서는 아래와 같습니다.

• [Server] icon이 있는 폴더를 읽는다.
• [Server] .tsx 확장자만 필터링하여 배열로 데이터를 만든다.
• [Front] 서버에서 받은 데이터를 활용하여 렌더링을 한다.

서버에서 데이터를 생성 후 프론트에게 전달하면 프론트에서 lazy import로 렌더링 하는 순간 읽으려고 하였습니다.
그 이유는 icon을 추가할 때마다 ICONS 배열을 변경하는 것은 불필요한 작업이라고 생각했기 때문입니다.

서버에서 만든 데이터 구조

const ICONS = [
    {
        name: "AddIcon",
        src: "../../icon/AddIcon"
    },
    ...
]

에러가 발생하는 프론트 코드

{ICONS.map(icon => {
    const Component = dynamic(() => import(`${icon.src}`), { ssr: false });
    return <div key={icon.src}>{<Component />}</div>
})}

에러가 발생하지 않는 프론트 코드

{ICONS.map(icon => {
    const Component = dynamic(() => import(`../../icon/AddIcon`), { ssr: false });
    return <div key={icon.src}>{<Component />}</div>
})}

위 2개의 차이는 경로를 변수로 할당하는지 아닌지의 차이입니다.
그럼 에러 메시지와 발생 이유를 알아보도록 하겠습니다.

에러 메시지

에러 메시지는 아래와 같습니다.

error - uncaughtException: TypeError: Cannot read properties of null (reading 'match')
at Object.fn (/Users/codiving/test-project/node_modules/next-transpile-modules/src/next-transpile-modules.js:70:40)
at /Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117581:37
at Array.some (<anonymous>)
at Object.fn (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117581:25)
at execRule (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117340:22)
at execRule (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117365:10)
at execRule (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117360:6)
at Object.exec (/Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:117379:6)
at /Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:58350:35
at /Users/codiving/test-project/node_modules/next/dist/compiled/webpack/bundle5.js:57973:11
(node:52267) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating

너무 이상하여 NextJS 공식 홈페이지를 다시 보니 아래처럼 나와있습니다.

애초에 제가 잘못 사용하고 있었습니다.
경로를 명확하게 작성하라고 합니다.

저처럼 쓸모 없는 삽질을 하지 마시라고 에러 코드도 모두 작성해두었습니다.
(검색에 걸리기 위해)