storybook - eslint 에러 문제 해결

storybook을 이제 적용시켜보려고 yarn storybook 을 해봤는데 이런 에러가 뜬다.

[ESLintError: [eslint] Plugin "react" was conflicted between ".eslintrc.js" and "BaseConfig » /node_modules/react-scripts/node_modules/eslint-config-react-app/base.js".]

이건 eslint 설정이 storybook의 eslint 설정과 달라 충돌하여 생기는 문제라고 한다.
스택오브플로우를 통해서 나온 솔루션들을 하나하나 해보았다.

먼저 eslint의 문제를 해결해주는 커맨드인
npx eslint . --fix 를 해보았지만 airbnb eslint plugin이 문제를 일으켰다.
그 다음엔 eslint-plugin-react의 버전을 7에서 6으로 낮추어보기도 했다.
하지만 해결되지 않았다.

그러다 언뜻 생각난게 굳이 스토리북에서 우리가 사용하는 eslint 설정이 그대로 적용될 필요가 없지 않나?
어차피 내가 원하는건 컴포넌트 ui의 재활용이기 때문이다.
그래서 스토리북의 eslint 설정을 ignore 하는 방법을 찾았고 그랬더니 위의 에러가 사라졌다.

storybook의 main js에

module.exports = {
  "webpackFinal": config => {
    return {
      ...config,
      plugins: config.plugins.filter(plugin => {
        if (plugin.constructor.name === 'ESLintWebpackPlugin') {
          return false
        }
        return true
      }),
    }
  },
 ]

를 추가하면 되는 거였다.
위 설정은 플러그인중 eslintwebpackplugin을 ignore 하는 로직이다.

그랬더니 해결됬으며 이제 스토리북을 공부하고 서비스내에 적용해볼 예정이다.