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のキャッシュには注意したほうが良さそう。。