[Issue対策] VirtualBox + VagrantでJSファイルが「Uncaught SyntaxError: Unexpected token ILLEGAL」というエラーになってしまう。

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ローカル開発環境をVagrantを使って構築している時に、内部でNginxでPHPを起動して、サイト構築を行っている際に、何故かJSエラーが頻発するようになった。

どんなにみなおしてもJSエラーの内容がわからなかったのだが、デバッグコンソールを見て驚愕!

JSファイルの内容がテキストエディタの内容と違っている

具体的に言うと、ブラウザのデバッグコンソールで見るJS、ファイルは更新がされずに、JSファイルの後ろに、変な文字列がくっついてきます。
どうやら、JSファイル更新を行うと、ゴミ文字列がついてくる現象のようだ。

めちゃくちゃ気持ち悪い!

スクリーンショット 2015-11-04 14.49.39

四苦八苦する時間が流れる

ここから不毛な時間が流れる。

1、使用しているテキストエディタは「ATOMエディタ」なので、このエディタが不要な文字列を吐き出しているのではないかと予想して、他のエディタで保存をしてみるも、症状は変わらず

2、エディタが全般的にダメなのかもしれないと思い、vagrantサーバーにターミナルで入って、viエディタで上書きしてみる。→これは問題が解決された。

3、テキストエディタ全般の問題というのはどうしても考えにくいので、ATOMエディタの設定を見なおしてみることにした。preferenceを徹底的にいじってみる。→全く解決の見込みなし

4、とりあえず、VagrantOSを再起動してみる→再起動直後はうまく見えるが、すぐに文字化けが発生する。

仕方が無いのでググッてみる

「Uncaught SyntaxError: Unexpected token ILLEGAL」でググると、このエラーの詳細や、JS、の不要な文字列エラーが報告されているが、解決方法がみつからない。

しかし海外サイトにVagrantという文字が含まれているのをStackOverFlowで発見。

そのサイトでは、VagrantとApacheやNginxとの組み合わせで、ファイルキャッシュが原因だということを言っている。

さらに調べるとsendfileという機能をOFFにすることで解決するらしい。

判明

VagrantとインストールされているOSとファイル共有をする機能を使う時にファイルキャッシュ機能を利用してしまうらしい。
それをApacheやNginxのsendfileを使うと、どうやらうまく行かなくなるらしい。
確かにOSを再起動すると、正常に見られるようになっていたわけだ。

修正方法

今回はNginxの修正のみ行ったので、以下の手順

apacheの修正方法などは以下のURLを参照すると良い。

環境不具合はとても時間の無駄

開発における安定した開発環境は、とても重要という事。
なぜなら、自ら開発したソースコードの不具合を探す行為は、非常に有意義なケースが多いが、環境の不具合は解決する目処もなければ、修正できても得られる物が正常に戻るだけという非常にもったいない時間の使い方になってしまうのである。

ただ、安定した開発環境を得るという行為においては、前進はするかもしれないが、各々の環境アプリのバグだったりするととても問題なのだねコレが。

2 comments

  • お役に立てて良かったです。頑張ってください。

  • 通りすがり者

    僕も同じことで大きく時間を不毛にしてました。これで解決しました。ありがとうございます!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です