CKeditor 5 babel-loader対応エラー


私は反応器で学科の掲示板を作っていて、目が覚めると...

小龍.入力内容の欄が消えた
コンソールが見えました

アイコンは問題ですが、ここにはアイコンがありません.
Googleで検索してみました
ネットパッケージは問題で、私にそうさせます.
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.ロックを外してもう一度
だめです.
node-modules何度削除してもダウンロードした覚えはない20回くらいやったような….
package.jsonの指示に従ってbabel-loaderを削除し、再試行します.
だめです.
ほとんどの場合解決できます...うそつき
いいえ、昨日cypressでテストコードを書きましたが、合格しました.合併後は不思議です.

npm ls babel-loader
ここに何か問題があるようです.

[email protected]のbabel-loader独自@8.1.0
検索するとreact-scriptsの最新バージョンは5.0.0 packageです.jsonを変更し、node-modulesを削除し、紡績を再開します.



うん~じゃない

本当に寝ちゃった
翌日

今日はバグを解決してほしい...
いずれにしてもbabel-loaderは問題なので、もう一度やってみなければなりません.
しかし、物語の本は書かないので削除しました.

現在babel-loaderはreact-scipsにのみ入ります

いいよ!
でもどうしてこんなことになったの?
react-scriptsは5.0.0に更新されますが、できません.
司会者もそろそろ最新の
npm-check-updatesをインストールします.
ncu-uの使用

スイッチはどうしてだめなの?
検索するとreact-router-domからスイッチ、Hocなどが少し変わっています
後で...後で交換します...eslintまたはreact-router-dom以外は更新します

う~ん無理~
ckeditorは29から31まで最新の更新はできません
そこでCKeditor 5とbabel-loader 8.2.3は互換性がないと結論した.
どのバージョンに正確に互換性があるかはプレッシャーがあったので探していません

篇-中
要約:
1.ストーリーブックとreact-scriptsとbabel-loaderバージョンの競合
2.CKeditor 5とbabel-loaderの最新バージョンは互換性がありません
の最後の部分