本番用のapp.jsでrequireの設定不足によるJSエラーが発生する場合の対処

ExtJSで良くあるのが、requireの記述漏れです。

本番用にsencha app buildで出力したファイルで動かしたら、↓のようなJSエラーが発生。この場合は、まずrequiresにクラス指定が漏れています。

Uncaught TypeError: c is not a constructor
    at eval (eval at getInstantiator (app.js:1), <anonymous>:3:8)
    at Object.create (app.js:1)
    at Ext.Inventory.instantiateByAlias (app.js:1)
    at ai.create (app.js:1)
    at ai.constructPlugin (app.js:1)
    at ai.constructPlugins (app.js:1)
    at ai.initComponent (app.js:1)
    at ai.initComponent (app.js:1)
    at ai.initComponent (app.js:1)
    at ai.initComponent (app.js:1)

ブラウザコンソール上に警告が出ていないか確認する

sencha app watchで動かしている場合、下記のような警告を出してくれることがあるので、この場合は速やかにrequiresに追記しましょう。

[W] [Ext.Loader] Synchronously loading 'Ext.chart.series.Line'; consider adding Ext.require('Ext.chart.series.Line') above Ext.onReady

Ext.ClassManagerのinstantiateByAliasメソッドで確認する

しかし、時々、警告が出ないパターンがあります。

その場合は、Ext.ClassManagerのinstantiateByAliasメソッド上にどうにかコンソールログなどを加えて直接見るしかありません。

画面表示時にいきなりエラーが出ないのであれば、エラー表示前に↓をブラウザコンソールで実行して、コンソールログ出力を加えます。

var originFunc = Ext.ClassManager.instantiateByAlias;

Ext.ClassManager.instantiateByAlias = function () {
  console.log(arguments);
  return originFunc.apply(this, arguments);
}

この状態でrequire不足のJSエラーを発生させれば、どのクラスが足りていないのかログ出力されます。

ブラウザでの初期画面表示時にエラーが出る場合は、ブラウザコンソールで実行しても間に合わないので、Application.jsのlaunchメソッドなどに上記コードを追加してしまうか直接ExtJSの該当コードにコンソールログを埋め込むなどの工夫が必要でしょう。Ext.ClassManager自体がシングルトンなので、overridesではオーバーライドはできません。