Rails 5.2.0.beta2のバグ回避方法

環境

• ruby 2.4.2p198
• rails 5.2.0.beta2

エラー1: 「Uncaught EvalError: Refused to evaluate a...」

参考: 【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～

上記の記事を参考に、5.2.0.beta2でアプリを作ってみたのですが、http://localhost:3000 にアクセスしたところで 「Uncaught EvalError: Refused to evaluate a...」 というJavascriptのエラーが発生しました。

解決法

参考: https://github.com/rails/rails/issues/31298#issuecomment-348513130

config/initializers/content_security_policy.rbに以下のように追記すれば直ります。

config/initializers/content_security_policy.rb

Rails.application.config.content_security_policy do |p|
  ...
  # @see: https://github.com/rails/rails/issues/31298#issuecomment-348513130
  if Rails.env.development?
    p.connect_src :self, :https, 'ws://localhost:3035', 'http://localhost:3035'
    p.script_src :self, :https, :unsafe_eval, :unsafe_inline
  else
    p.script_src  :self, :https, :unsafe_eval, :unsafe_inline
  end

エラー2: 「You are using the runtime-only build of Vue where...」

以下のJavascriptのエラーが表示される。

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解決法

参考: [Rails5.1][Webpacker][Vue.js] 動かそうとするとコンポネントエラーになる問題

config/webpack/development.jsにaliasの設定を追加すれば直ります。

config/webpack/development.js

const environment = require('./environment')

module.exports = Object.assign({}, environment.toWebpackConfig(), {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})