Docker上に構築したRailsで、Vue.jsを使うためにrails webpacker:install:vueを実行した後、webpackerのコンパイルを行うとコンパイルができないエラーが発生。
散々時間を潰した挙句、ようやく解決できたのでその原因と対処法について。
エラーの状況
Docker上でRailsアプリケーションを構築。この時点では問題なくコンパイルできていた。
rails webpacker:install:vue を実行して、以下のVueファイル関連ファイルが自動更新＆生成された後、コンパイルを実行した時にエラーが発生。
modified: config/webpack/environment.js
modified: config/webpacker.yml
modified: package.json
modified: yarn.lock
app/javascript/app.vue
app/javascript/packs/hello_vue.js
config/webpack/loaders/rails-vue-web | [Webpacker] Compiling…
rails-vue-web | [Webpacker] Compilation failed:
rails-vue-web | /rails-vue/node_modules/webpack-cli/bin/cli.js:93
rails-vue-web | throw err;
rails-vue-web | ^
rails-vue-web |
rails-vue-web | Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
rails-vue-web | at Object. (/rails-vue/node_modules/vue-loader/dist/index.js:8:11)
ビューファイルに記載した、以下のコード（Webpackでコンパイル後のファイルを読み込む）で、対象のファイルがコンパイルができていないためエラーが発生。
<%= javascript_pack_tag 'hello_vue' %>Webpacker::Manifest::MissingEntryError in Home#index
Showing /rails-vue/app/views/home/index.html.erb where line #4 raised:
Webpacker can't find hello_vue_vue.js in /rails-vue/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
"application.js": "/packs/js/application-e421b4aa3f716bebdab1.js",
"application.js.map": "/packs/js/application-e421b4aa3f716bebdab1.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-e421b4aa3f716bebdab1.js"
],
"js.map": [
"/packs/js/application-e421b4aa3f716bebdab1.js.map"
]
}
Extracted source (around line #4):
| 2 3 4 5 | <p>Find me in app/views/home/index.html.erb</p> <%= javascript_pack_tag ‘hello_vue’ %> <%= stylesheet_pack_tag ‘hello_vue’ %> |
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
エラーの原因
エラーの根本原因は新しいバージョンのvue-loaderに必要なライブラリが入っていないためでした。
ターミナルに表示された内容がエラーの本質を指しています。
Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.@vue/compiler-sfcがないというのが原因です。
対処法
自動でインストールされていたvue-loaderは16系（16.3.0）でした。これをダウングレードして、15系(15.9.2)に落とします。
package.jsonファイルの修正
Webpackerはgemではなくyarn(node.js)で管理されているので、package.jsonに記載されている vue-loaderのバージョンを修正します。
"dependencies": {
(省略)
"vue-loader": "15.9.2",
(省略)
},インストール
yarnを使って、package.jsonの内容を読み込み必要なライブラリをインストールします。
# yarn install▼Dockerコンテナの外から実行する場合
docker-compose.ymlファイルのあるディレクトリで以下を実行します。
# docker-compose run <Railsのサービス名> yarn install実例
$ docker exec -it <Railsコンテナ名> bash
root@59229383d91c:/rails-vue# yarn install
yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vue-loader@15.9.2" has unmet peer dependency "css-loader@*".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 21.29s.無事、vue-loader@15.9.2がインストールされました。
コンパイルの実行
docker-compose up などでサーバーを再起動させるか、rails webpcker:compileコマンドを実行するなどすればコンパイルが走ります。
# rails webpacker:compile
Compiling...
Compiled all packs in /rails-vue/public/packs
Hash: 53f7351ae0f8236d741a
Version: webpack 4.46.0
Time: 12816ms
Built at: 07/13/2021 10:18:05 AM
Asset Size Chunks Chunk Names
js/application-14139e3a84530853743f.js 69.4 KiB 0 [emitted] [immutable] application
js/application-14139e3a84530853743f.js.br 15.4 KiB [emitted]
js/application-14139e3a84530853743f.js.gz 17.8 KiB [emitted]
js/application-14139e3a84530853743f.js.map 205 KiB 0 [emitted] [dev] application
js/application-14139e3a84530853743f.js.map.br 43.9 KiB [emitted]
js/application-14139e3a84530853743f.js.map.gz 50.9 KiB [emitted]
js/hello_vue-96c9f02c432c5f30d433.js 75.3 KiB 1 [emitted] [immutable] hello_vue
js/hello_vue-96c9f02c432c5f30d433.js.LICENSE.txt 87 bytes [emitted]
js/hello_vue-96c9f02c432c5f30d433.js.br 24 KiB [emitted]
js/hello_vue-96c9f02c432c5f30d433.js.gz 26.7 KiB [emitted]
js/hello_vue-96c9f02c432c5f30d433.js.map 390 KiB 1 [emitted] [dev] hello_vue
js/hello_vue-96c9f02c432c5f30d433.js.map.br 103 KiB [emitted]
js/hello_vue-96c9f02c432c5f30d433.js.map.gz 120 KiB [emitted]
manifest.json 689 bytes [emitted]
manifest.json.br 165 bytes [emitted]
manifest.json.gz 200 bytes [emitted]
Entrypoint application = js/application-14139e3a84530853743f.js js/application-14139e3a84530853743f.js.map
Entrypoint hello_vue = js/hello_vue-96c9f02c432c5f30d433.js js/hello_vue-96c9f02c432c5f30d433.js.map
[0] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=ce252344&scoped=true&lang=css& 771 bytes {1} [built]
[1] (webpack)/buildin/global.js 905 bytes {1} [built]
[2] (webpack)/buildin/module.js 552 bytes {0} [built]
[7] ./app/javascript/packs/application.js 480 bytes {0} [built]
[8] ./app/javascript/channels/index.js 205 bytes {0} [built]
[9] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
[10] ./app/javascript/app.vue?vue&type=style&index=0&id=ce252344&scoped=true&lang=css& 746 bytes {1} [built]
[12] ./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--2-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=ce252344&scoped=true&lang=css& 776 bytes {1} [built]
[17] ./app/javascript/packs/hello_vue.js + 6 modules 6.01 KiB {1} [built]
| ./app/javascript/packs/hello_vue.js 1.85 KiB [built]
| ./app/javascript/app.vue 552 bytes [built]
| ./app/javascript/app.vue?vue&type=template&id=ce252344&scoped=true& 213 bytes [built]
| ./app/javascript/app.vue?vue&type=script&lang=js& 364 bytes [built]
| ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=ce252344&scoped=true& 265 bytes [built]
| ./node_modules/babel-loader/lib??ref--7-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 89 bytes [built]
| + 1 hidden module
+ 9 hidden modulesエラーが発生することなく、コンパイルが無事終了しました。
ブラウザでページを表示すると、コンパイルしたVueファイルの内容が正しく表示されました。
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %><template>
<div id="app">
<p>{{ message }}</p>
<p>test</p>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Hello Vue!"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
