서론

./node_modules/coffeescript/bin/coffee:4:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/coffeescript/lib/coffee-script/register.js
./node_modules/coffeescript/lib/coffee-script/coffee-script.js
./node_modules/cson-parser/lib/parse.js
./node_modules/cson-parser/lib/cson-parser.js
./node_modules/i18next-node-fs-backend/lib/index.js
./node_modules/i18next-node-fs-backend/index.js
./server.js
./components/Saving/Filter/Management/ui/component/ResultAlert.tsx
./components/Saving/Filter/Management/ui/component/index.ts
./components/Saving/Filter/Management/ui/Modal.tsx
./components/Saving/Filter/Management/ui/index.tsx
./components/Saving/Filter/Management/index.tsx
./components/Saving/Filter/index.js
./components/Saving/index.js
./pages/saving.js

https://nextjs.org/docs/messages/module-not-found

개발 작업을 하다보면 가끔씩 위와 같은 에러를 마주할 때가 있는데,
최근에도 마주쳐서 이번 기회에 원인과 해결 방법을 기록하기로 했다.

본론

원인

파일 디렉터리 구조

/components
  - index.ts
  - ResultAlert.tsx
  - TransitionProvider.tsx

index.ts

export { TransitionProvider } from './TransitionProvider';
export { ResultAlert } from './ResultAlert';

나의 프로젝트는 FSD 패턴 구조를 기반으로 만들었기 때문에 위와 같은 파일 구조로 이루어져 있었다.

여기서, ResultAlert.tsx 라는 컴포넌트에서 같은 경로의 index.ts 에서 export 하는 TransitionProvider.tsx 컴포넌트를 import 하려다가 다음과 같이 자동완성으로 작성이 되었다.

// ResultAlert.tsx

import { TransitionProvider } from '.';

export const ResultAlert = () => {
  ...
}

이론상으로는 index.* 파일은 경로 상에서 생략될 수 있으므로 . 가 실행될 것 같았지만 이 부분에서 에러가 발생하는 것이었다.

해결 방법

따라서, 해당 import path 를 . 에서 ./ 으로 바꿔주니 정상적으로 해결되었다.

// ResultAlert.tsx

import { TransitionProvider } from './';

export const ResultAlert = () => {
  ...
}