Rails
vue.js
webpack
webpacker

nodemoduleやらwebpackのことはよく知らんが、rails5.1 + webpackerでbuild時に怒られるのを解決する

社会人2年目エンジニアの初投稿です。お手柔らかに :bow_tone1:

 問題

webpakcerでbuild時に以下のように怒られる
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.

流行ってるらしいwebpacker + vueを試してみようかなーって気持ちで、webpackのこともnodeのこともよく知らないままで始め、 Hello, Vue.js! を表示するのに四苦八苦したのでメモする。

rails new sample --webpack=vue にお任せした状態

app/javascript/packs/hello_vue.js
// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

import Vue from 'vue'
import App from './app.vue'

document.body.appendChild(document.createElement('hello'))

new Vue({
  el: 'hello',
  template: '<App/>',
  components: { App }
})

環境

Rails 5.1 + webpacker 3.5.3 + vue.js 2.5.16

解決方法

今はよくわからんが、vueの参照が悪いらしい(後で調べる)
ググった結果、vueの参照を vue/dist/vue.esm.js にすればいいらしい。
参照用のエイリアスを追加するのがいい感じっぽかったので以下のファイルを変更した

  • config/webpack/environment.js

rails newによる初期内容

config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')

environment.loaders.append('vue', vue)
module.exports = environment

[Rails5.1][Webpacker][Vue.js] 動かそうとするとコンポネントエラーになる問題
上記記事を参考にエイリアスを追加した

config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')

environment.loaders.append('vue', vue)
environment.toWebpackConfig().merge({
  resolve: {
    alias: {
      '@vue': 'vue/dist/vue.esm.js'
    }
  }
});

module.exports = environment

上記記事では config/webpack/ 配下の環境ごとのファイルに

resolve: {
  alias: {
    '@vue': 'vue/dist/vue.esm.js'
  }
}

こいつを追加してたけど、 環境ごとのファイルは config/webpack/environment.js を参照しているっぽく見えたので、 config/webpack/environment.js に書くのがDRYっぽい

そんで、あとは import Vue from 'vue'import Vue from '@vue' にして終了

app/javascript/packs/hello_vue.js
// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

import Vue from '@vue'
import App from './app.vue'

document.body.appendChild(document.createElement('hello'))

new Vue({
  el: 'hello',
  template: '<App/>',
  components: { App }
})

終わりに

nodeやらwebpackやらわからないとwebpackerを使うのはしんどいんだなーと思った
それと、そのあたりの基礎知識が無いとうまいことググれないのが一番しんどかった
とりあえずQiita投稿童貞を卒業出来たので :100: