tinymce-railsのバージョンを4.1.6から4.5.6にアップデートしたら、
本番環境でのみUncaught TypeError: Cannot read property 'settings' of undefinedというエラーが出て、かなり嵌ったので備忘録として顛末を残しておく。
tinymceのIssueを見つける
エラー名でググったら、以下のTinymceのイシューが出てきた。
upgrading to 4.4.1 causing error "Cannot read property 'settings' of undefined" #3091
https://github.com/tinymce/tinymce/issues/3091
中の人のコメントによると、これはTinymceの不具合ではなくtinymce.jsとtheme.jsのバージョンの片方が古かったり、新しかったりすると発生する問題らしい。
Make sure that tinymce.min.js and tinymce.js and theme.min.js and theme.js is all updated. If you run an older version of tinymce core with a newer version of theme.js this error will occur. This is not a bug in tinymce but a deployment issue where you haven't uploaded/updated all the files. If you still think this is some form of bug please reproduce it on fiddle.tinymce.com since it uses the latest tinymce core and theme.
tinymce-railsのコードを読む
tinymce-railsの4.5.6のソースコードを読んでみると、どうやらtinymce.jsは4.5.6にアップデートされているがtheme.jsは4.5.4のままになっている。これが原因ぽい。
tinymce-railsのリポジトリをフォークして修正する
まず、tinymceのリポジトリから4.5.6のバージョンのzipコードをダウンロードします。
https://github.com/tinymce/tinymce/releases/tag/4.5.6
これをgruntでビルドしてtinymce-railsのtheme.jsを置き換えました。
置き換えたのはこちらのファイルです。
vendor/assets/javascripts/tinymce/themes/modern
フォークしたリポジトリをGemfileで読み込む
gem "tinymce-rails", github: "hogehoge/tinymce-rails"
これでbundle updateしたら直るはず...！
でもなぜかうまくいかない
なぜか...
開発者ツールで読み込んでいるJSの中身を確認する
Chromeの開発者ツールの[Sources]で該当のJSファイルを見ると、開発環境・ステージング環境のJSとは本番環境は明らかに違うことが判明。どうやら古いJSを読み込んでいそう
CDNのキャッシュが怪しい
本番環境ではステージング環境とは違い、CDNのSaasを利用していた。初期状態では1時間キャッシュを保存するようになっている。
本来ファイルの内容が変わればRailsのSprocketsがダイジェストを変えてくれて、キャッシュが無効になるはずなのだが、ここが怪しすぎるという展開に
CDNのキャッシュを削除する
CDNサービスの管理画面からキャッシュを削除して確認したら、ついに解決！！
古いJS側がキャッシュされており、それが読まれていたのが原因ぽい。
tinymceの不具合?
今回の不具合の原因はtheme.jsとtinymce.jsのバージョンがtinymce-rails側で差異があったこと。そして自身でtinymce-railsのtheme.jsを書き換えても、古いtheme.jsがキャッシュに残ってしまっていたことが問題だった。
中身のコードまでまだ終えていないが、tinymce-railsのバージョンを上げる時は今後もCDNのキャッシュには注意したほうが良さそう。。