6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails 5.1, webpack4, webpackerによるvue.jsの導入時にvue-loaderのcssに関するpluginがエラーを起こす対処

Posted at

【動画付き】Rails 5.1で作るVue.jsアプリケーション ~Herokuデプロイからシステムテストまで~を参考にrails+vue.jsの環境構築を行なっている際にエラーに悩まされ、特に解決方法が他に記載されていなかったので、投稿いたします。

エラー内容

事件は bin/webpackコマンドを入力した時に起きました。
参考先でも「エラーが出ます」と書いてあるが、エラー内容が異なる

[./app/javascript/app.vue] 558 bytes {hello_vue} [built] [failed] [1 error]
[./app/javascript/packs/application.js] 515 bytes {application} [built]
[./app/javascript/packs/hello_vue.js] 1.89 KiB {hello_vue} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {hello_vue} [built]
    + 4 hidden modules

ERROR in ./app/javascript/app.vue
Module build failed: Error: [vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.
    at getCSSExtractLoader (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:124:15)
    at resolveLoaders (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:108:9)
    at createHelpers (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:166:7)
    at Object.module.exports (/Users/userName/project/node_modules/vue-loader/lib/loader.js:72:7)
 @ ./app/javascript/packs/hello_vue.js 9:0-29 16:15-18

抽出

Module build failed: Error:
 [vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.

vue-loaderにおいて、extractCSSではなくextract-text-webpack-pluginを読み込んでねという内容。
バージョンアップにより変更された模様なので、vue.jsの公式レファレンスを参考に下記のように対応したところ解決。

解決方法

pluginインストールしておいて

npm i -D extract-text-webpack-plugin

ご希望通り、読み込ませる。あとは、webpack-dev-serverかproductionかの判定を組み合わせる。

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

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
const ExtractTextPlugin = require("extract-text-webpack-plugin") <-該当のpluginを読み込ませる

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { ExtractTextPlugin } <-設定する
  }]
}
6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?