vue + ckeditor5 でエラーが出たときにしたこと

前回、vue + ckeditor5 の使い方についてまとめました。 その際、私の環境だと色々とエラーが出たので、対応方法を書いていきます。

前回の記事は、こちら↓↓↓ https://s31o3.hatenablog.com/entry/2019/10/20/231141

【その１】cssのビルドに失敗している風

【事象】webpack で、以下のようなエラーが出てしまう。

ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 | 
> 2 | var content = require("!!../../../../../css-loader/dist/cjs.js!./button.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

【原因】ckeditor5 の CSS を複数回 loader にかけようとしている

新しく追加したckeditorのCSS用の設定と、既存のCSS設定がかぶってしまっています。 webpack.config.js の既存のCSS設定部分に、ckeditorを除外する指定を追加します。

module: {
        rules: [
            ...
            {
                test: /\.css$/,
                exclude: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/, // 👈これを追加 
                loader: ...
            }
        ...
        ]
    }

【その２】ckeditor のビルドに失敗している

【事象】

build版と同じバージョンの関連パッケージをインストールし、config.plugins に設定したはずが
「ckeditor-duplicated-modules 」とエラーが出てしまう。

【原因】

エラーの通りなのですが、重複した module を実行しようとしています。 私の環境では、関連パッケージのバージョンを上げると解決しました。

【その３】ckeditor のクラスを extends したクラスを作ると、実行時にエラーが出る

【事象】

Uncaught TypeError: Class constructor [ClassName] cannot be invoked without 'new'

【原因】ES5にトランスパイルしようとしている

ckeditor5 は、ES6で書かれています。 ES6 で書かれたクラスを継承したものを、ES5 にトランスパイルするのは許してくれないらしい。

qiita.com

幸い今回は、IE捨てても問題なかったので、おとなしくトランスパイルのターゲットをES6にしました。

思い返すと、ほとんどフロント不勉強なだけのようなエラーですね、、