質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.83%

ブログアプリをherokuにデプロイしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 616

kakedashi

score 4

前提・実現したいこと

railsにvue.jsやwebpackerを導入し、簡単なブログアプリを作っています。
そのアプリをherokuにデプロイしたいです。

発生している問題・エラーメッセージ

git push heroku masterを実行した際に以下のエラーが出ます。

 Compiling…
remote:        Compilation failed:
remote:        /tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/cli.js:93
remote:                        throw err;
remote:                        ^
remote:        
remote:        Error: Cannot find module 'vue-loader'
remote:        Require stack:
remote:        - /tmp/build_c71aa97607d619bf9241fefb23db6389/config/webpack/environment.js
remote:        - /tmp/build_c71aa97607d619bf9241fefb23db6389/config/webpack/production.js
remote:        - /tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/utils/convert-argv.js
remote:        - /tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/cli.js
remote:        - /tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack/bin/webpack.js
remote:            at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
remote:            at Function.Module._load (internal/modules/cjs/loader.js:690:27)
remote:            at Module.require (internal/modules/cjs/loader.js:852:19)
remote:            at require (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
remote:            at Object.<anonymous> (/tmp/build_c71aa97607d619bf9241fefb23db6389/config/webpack/environment.js:2:29)
remote:            at Module._compile (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
remote:            at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
remote:            at Module.load (internal/modules/cjs/loader.js:815:32)
remote:            at Function.Module._load (internal/modules/cjs/loader.js:727:14)
remote:            at Module.require (internal/modules/cjs/loader.js:852:19)
remote:            at require (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
remote:            at Object.<anonymous> (/tmp/build_c71aa97607d619bf9241fefb23db6389/config/webpack/production.js:3:21)
remote:            at Module._compile (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
remote:            at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
remote:            at Module.load (internal/modules/cjs/loader.js:815:32)
remote:            at Function.Module._load (internal/modules/cjs/loader.js:727:14)
remote:            at Module.require (internal/modules/cjs/loader.js:852:19)
remote:            at require (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
remote:            at WEBPACK_OPTIONS (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
remote:            at requireConfig (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
remote:            at /tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
remote:            at Array.forEach (<anonymous>)
remote:            at module.exports (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
remote:            at /tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/cli.js:71:45
remote:            at Object.parse (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18)
remote:            at /tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/cli.js:49:8
remote:            at Object.<anonymous> (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/cli.js:366:3)
remote:            at Module._compile (internal/modules/cjs/loader.js:959:30)
remote:            at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
remote:            at Module.load (internal/modules/cjs/loader.js:815:32)
remote:            at Function.Module._load (internal/modules/cjs/loader.js:727:14)
remote:            at Module.require (internal/modules/cjs/loader.js:852:19)
remote:            at require (internal/modules/cjs/helpers.js:74:18)
remote:            at Object.<anonymous> (/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack/bin/webpack.js:156:2)
remote:            at Module._compile (internal/modules/cjs/loader.js:959:30)
remote:            at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) {
remote:          code: 'MODULE_NOT_FOUND',
remote:          requireStack: [
remote:            '/tmp/build_c71aa97607d619bf9241fefb23db6389/config/webpack/environment.js',
remote:            '/tmp/build_c71aa97607d619bf9241fefb23db6389/config/webpack/production.js',
remote:            '/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/utils/convert-argv.js',
remote:            '/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack-cli/bin/cli.js',
remote:            '/tmp/build_c71aa97607d619bf9241fefb23db6389/node_modules/webpack/bin/webpack.js'
remote:          ]
remote:        }
remote:        

該当のソースコード

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')



module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

module.exports = environment


environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
module.exports = environment

const customConfig = require('./custom')
environment.config.merge(customConfig)

module.exports = environment

試したこと

vue-loader,webpack,webpacker,vue-loader,node_modulesについて調べ、試しましたが解決することができませんでした。

補足情報(FW/ツールのバージョンなど)

ruby '2.5.1'
rails', '~> 5.2.3'
webpacker', '~> 4.x'
"vue-loader": "^15.7.2",
"vue": "^2.6.10",

足りないところありましたら言ってください。よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

テキストエディタには表示されていたのですが、実際には入っておらず手動で入れたところ解決しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る