storybook error in nextjs

fs error in storybook

---

발생

npm run storybook 실행 시 Module not found: Error: Can't resolve 'components/SomeComponent' in '/Users/css/Desktop/Project/styles' 등 module 에러 발생

ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/css/Desktop/Project/node_modules/next-i18next/dist/esm/config' - fs module 참조에[러

runtime에 fileSystem 모듈을 찾을 수 없다.

fs를 사용하는 곳

serverSide Func

• getServerSideProps - 요청마다 호출됨
• getStaticProps - 빌드시 1회

파일관련 명령은 오직 server에서만 가능한데 nextjs의 getServerSideProps, getStaticProps와 같은 서버사이드 함수들은 서버에 있는 파일을 어떤 config필요 없이 접근할 수 있다.

현재 i18n을 사용하기 위해 getServerSideProps, getStaticProps를 통해 common 의 다국어 언어파일 (en, ko , etc)들을 참조하고 있다.

기존에는 ssr관련 함수를 사용한 적이 없었는데 추가 이후 오류가 발생해서 관련 설정을 .storybook에 추가해주는 글이 있어 적용했다.

storybook webpack 설정 추가

//.storybook/webpack.config.js

const path = require('path');

module.exports = async ({config, mode}) => {
  config.node = {fs: 'empty'};
  return config;
};

next.js server side는 좋은데 설정오류 대응이 조금 귀찮다.