CKEditor5 와 babel-loader 호환 에러

리액트로 학과 게시판을 만들고 있었는데 자고 일어나니....

띠용? 내용을 입력하는 칸이 사라져버렸다
콘솔을 보았다

아이콘이 문제란다 여기 아이콘 안들어가는데;;
구글에 검색해보았다
웹팩이 문제란다 이렇게 하란다

const filesRuleIndex = cfg.module.rules.findIndex(item => {
  return item.test.test('.svg')
})

if (filesRuleIndex !== -1) {
  cfg.module.rules[filesRuleIndex].test = /\.(png|jpe?g|gif|webp)$/
  const svgRule = {...cfg.module.rules[filesRuleIndex]}
  svgRule.test = /\.svg/
  svgRule.exclude = svgRule.exclude || []
  svgRule.exclude.push(path.join(__dirname, 'node_modules', '@ckeditor'))
  cfg.module.rules.push(svgRule)
}

cfg.module.rules.push({
  test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
  use: ["raw-loader"]
})

그런데 내 프로젝트는 craco를 쓰고 있어서 조금 달랐다. 이렇게 수정하라는데 원래 이렇게 되있었다;;

module.exports = {
  webpack: {
    configure: config => {
      config.plugins.push(
        new CKEditorWebpackPlugin({
          language: 'ko',
          addMainLanguageTranslationsToAllAssets: true
        })
      );

      const regExpThemeIconSvg =
        /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
      const regExpThemeCss = /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/;
      const cssRegex = /\.css$/;
      const cssModuleRegex = /\.module\.css$/;
      config.module.rules.push(
        { test: regExpThemeIconSvg, use: ['raw-loader'] },
        {
          test: regExpThemeCss,
          use: [
            {
              loader: 'style-loader',
              options: {
                injectType: 'singletonStyleTag',
                attributes: {
                  'data-cke': true
                }
              }
            },
            {
              loader: 'postcss-loader',
              options: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                },
                minify: true
              })
            }
          ]
        }
      );

      config.module.rules.forEach(rule => {
        if (rule.oneOf) {
          rule.oneOf.forEach(subRule => {
            /* eslint no-param-reassign: "error" */
            if (String(subRule.test) === String(cssRegex)) {
              subRule.exclude = [cssModuleRegex, regExpThemeCss];
            }

            if (String(subRule.test) === String(cssModuleRegex)) {
              subRule.exclude = [regExpThemeCss];
            }

            if (
              String(subRule.loader).includes('file-loader') &&
              Array.isArray(subRule.exclude)
            ) {
              subRule.exclude.push(regExpThemeIconSvg, regExpThemeCss);
            }
          });
        }
      });

      return config;
    }
  }
};

craco 와 webpack 과 CKEditor의 환장의 콜라보
맞는데 왜 안되는겨 ?!?!
몇시간 끙끙대다 잠을 청했다...

아 그냥 폴더 밀고 다시 받아서 해봐야겠다...

yarn.lock 을 지우고 다시 해본다
안된다.

node-modules를 몇번 지우고 깔았는지 기억이 안난다. 한 20번정도 한거 같은데...

package.json 에서 시키는 대로 babel-loader를 지우고 다시 해본다
안된다.

In most cases 에 해결된다 했는데.... 거짓말쟁이
아니 어제 cypress로 테스트 코드도 작성하고 통과까지 했는데 merge 하니까 기가막히게 안되네;;

npm ls babel-loader
여기 뭔가 문제가 있는거 같다

[email protected]의 babel-loader가 혼자 @8.1.0 이다
검색해보니까 react-scripts의 최신버전은 5.0.0 이다 package.json을 수정하고 node-modules를 지우고 다시 yarn 해준다.

응 아니야~

진짜 잔다

다음날

오늘은 버그가 해결되길...

암만봐도 babel-loader가 문제라 다시 해봐야겠다
그런데 storybook은 않쓰는거라 지웠다

이제 내 dependencies에 babel-loader는 react-sctips에만 들어간다

된다!!
근데 왜 되는건데;;

react-scripts를 5.0.0으로 최신화 하니 또 안된다

ckeditor도 최신화를 해야겠다

npm-check-updates를 설치하고
ncu -u 를 사용한다

Switch 는 또 왜 안 되 는 건 데 ;;

검색해보니 react-router-dom 부터는 Switch, Hoc 등 바뀐게 좀 있다
후.... 나중에 바꿔야 겠다... eslint나 react-router-dom은 빼고 최신화 해야겠다

응 안돼~
ckeditor는 29에서 31로 최신화 해도 안된다

그 래 서 CKEditor5와 babel-loader 8.2.3는 호환이 되지 않는걸로 결론을 내렸따
정확히 어느버전까지 호환되는지는 스트레스 받아서 안찾았다

편 - 안

요약:
1. storybook이랑 react-scripts랑 babel-loader 버전이 충돌했고
2. CKEditor5 랑 babel-loader최신버전이랑 호환이 안된다

끝