More than 3 years have passed since last update.

rails assets:precompile RAILS_ENV=productionでエラー

Last updated at 2021-09-08Posted at 2021-09-07

本番環境へのデプロイ時に
rails assets:precompile RAILS_ENV=production
を実行すると、

resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
using description file: /var/www/coffee_passport/package.json (relative path: ./app/javascript/packs/components/static_pages)
Field 'browser' doesn't contain a valid alias configuration
No description file found
no extension

  Field 'browser' doesn't contain a valid alias configuration
  /public/assets/images/coffee_gif.gif doesn't exist


      Field 'browser' doesn't contain a valid alias configuration
      /var/www/coffee_passport/public/assets/images/coffee_gif.gif.svg doesn't exist

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.

とエラーがでた。

デプロイするときに

rails assets:precompile RAILS_ENV=production

を実行時に以上のようなエラーがでた。。。

babel/preset-env 設定で "loose" オプションが "false" に設定されていますが、@babel/plugin-proposal-class-properties の "loose" モードオプションが "true" に設定されているため、@babel/plugin-proposal-private-property-in-object では使用されません。
loose" オプションは、@babel/plugin-proposal-class-properties、@babel/plugin-proposal-private-methods、および @babel/plugin-proposal-property-in-object (これらが有効な場合) で同じでなければなりません。
["@babel/plugin-proposal-property-in-object", { "loose": true }] を「プラグイン」セクションに明示的に追加することで、この警告を消すことができます。
をBabel設定の「plugins」セクションに追加してください。

ちょっと何言ってるか分からない(サンド冨澤風)

var/www/coffee_passport/app/javascript/packs/components/static_pages' の '/public/assets/images/coffee_gif.gif' を解決します。
記述ファイルを使用しています。/var/www/coffee_passport/package.json (相対パス: ./app/javascript/packs/components/static_pages)
フィールド 'browser' に有効なエイリアス構成が含まれていません。
記述ファイルがありません
拡張子がない

多分問題はこっちなのかな。。。

一旦こっちの問題を解決したいと思います。

[ec2-user@ip-10-0-10-10 coffee_passport]$ vi package.json

を実行して

package.json




  "name": "coffee_passport",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "axios": "^0.21.1",
    "rails-ujs": "^5.2.6",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.12",
    "vue-axios": "^3.2.4",
    "vue-carousel": "^0.18.0",
    "vue-eslint-parser": "^7.6.0",
    "vue-js-modal": "^2.0.1",
    "vue-loader": "^15.9.6",
    "vue-router": "^3.5.1",
    "vue-template-compiler": "^2.6.12",
    "vue-youtube": "^1.4.0",
    "vuex": "^3.6.2"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.5.2",
    "webpack-dev-server": "^3.11.2"
  }
}

わからないけど、vueファイルに色々記述して、画像をvueファイルのほうで読み込むために

public/assets/images配下に画像を設置してたので、
上手くいかなかった的な？
production.rbで設定が必要な感じ？？

そもそもなぜpublic/assets/images配下に画像を設置してたのかというと、app/assets配下の画像をvueファイルのほうで読み込もうとするとめんどくさかったから。。。

とのことですのでconfig/environments/production.rb
に以上の記述をした。

したら、


[ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.78s.
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.22s.
Everything's up-to-date. Nothing to do

こんなかんじでエラーは表示されなくなった！！

だがしかし、、、

Webpacker::Manifest::MissingEntryError in Sessions#new
Showing /var/www/coffee_passport/app/views/sessions/new.html.erb where line #3 raised:

Webpacker can't find app_explain in /var/www/coffee_passport/public/packs/manifest.json. Possible causes:

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.
webpack has not yet re-run to reflect updates.
You have misconfigured Webpacker's config/webpacker.yml file.
Your webpack configuration is not creating a manifest.
Your manifest contains:
{
"application.js": "/packs/js/application-3538e0dca107d3630558.js",
"application.js.map": "/packs/js/application-3538e0dca107d3630558.js.map",
"components/Home.js": "/packs/js/components/Home-ad21ec7dc038d47a3482.js",
"components/Home.js.map": "/packs/js/components/Home-ad21ec7dc038d47a3482.js.map",
"components/about_coffee_passport.js": "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js",
"components/about_coffee_passport.js.map": "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js.map",
"components/contact.js": "/packs/js/components/contact-b1ef171175665ddc89b8.js",
"components/contact.js.map": "/packs/js/components/contact-b1ef171175665ddc89b8.js.map",
"components/drinks/show.js": "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js",
"components/drinks/show.js.map": "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js.map",
"components/footer.js": "/packs/js/components/footer-ce242222576e7516708a.js",
"components/footer.js.map": "/packs/js/components/footer-ce242222576e7516708a.js.map",
"components/like/likeButton.js": "/packs/js/components/like/likeButton-e09e38a35194597b646d.js",
"components/like/likeButton.js.map": "/packs/js/components/like/likeButton-e09e38a35194597b646d.js.map",
"components/search.js": "/packs/js/components/search-3a946d78542c0511990c.js",
"components/search.js.map": "/packs/js/components/search-3a946d78542c0511990c.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-3538e0dca107d3630558.j

<%= javascript_pack_tag 'app_explain' %>

本番環境でこのようなエラーに、、、
rails assets:precompile RAILS_ENV=production
がうまくいかなかったのかな。。。

app/javascript/packs/app_explain.js

import Vue from 'vue'
import appExplain from '../packs/components/static_pages/appExplain.vue'

document.addEventListener('DOMContentLoaded', () => {
  var app = new Vue({
    el: '#app-explain',
    components: {
      "app_explain": appExplain
    },
    render: h => h(appExplain)
  }).$mount()
  //document.body.appendChild(appExplain.$el)
})

app/javascript/components/static_pages/appExplain.vue



<template>
  
<div>
  <div class="top-explain">
    
        <div class="explain-wrapper">
            <img class="" :src="require('/public/assets/images/coffee_gif.gif')"> 
          <div class="explain-wrapper-title">
            <h3 class="explain-wrapper-title" >Von Voyage!</h3>
            <p class="">Coffee Passportとはあなたが出会ったコーヒーの記録を共有できるサービスです</p>
          </div>
        </div>




        <div class="explain-wrapper">
        <ruby>
          <h3 class="explain-wrapper-title">出会ったコーヒーをシェアしよう</h3>
          <rt class="explain-wrapper-title-en">share your favorite coffee</rt>
        </ruby>


          <p class="explain-wrapper-info">
          出会ったコーヒーの感想を記録して共有しましょう。
          その投稿が、素敵なコーヒーを求めてる誰かのヒントになるでしょう。
          </p>
          <img class="explain-post-img" :src="require('/public/assets/images/post.png')" >
        </div>




          <div class="explain-wrapper">
          <ruby>
            <h3 class="explain-wrapper-title">コーヒーを探す旅へ</h3>
            <rt class="explain-wrapper-title-en">vayage to find coffee</rt>    
          </ruby>

          

            <p class="explain-wrapper-info">
            お気に入りのコーヒーに出会いたいときは、検索してみましょう。
            コーヒーの名前、コク、酸味、産地、加工法などで検索できます。
            </p>
          </div>



        <div class="explain-wrapper">
          <ruby>
            <h3 class="explain-wrapper-title">素敵なコーヒーがあなたの手元に</h3>
            <rt class="explain-wrapper-title-en">special coffee will come to your house</rt>    
          </ruby>
            <p class="explain-wrapper-info">
              コーヒーを家でも楽しみたいなら、素敵なコーヒーのラインナップを
              取り揃えておりますので、ぜひお求めください。
            </p>
              <!-- <video :src="require('/public/assets/images/buy.mp4')" autoplay muted> -->
            <carousel  :per-page="1"  :autoplay=true  :loop=true  :autoplayTimeout=1500>
              <slide>
                <img  class="sold-item-explain" :src="require('/public/assets/images/sold_item1.png')"> 
              </slide>
              <slide>
                <img  class="sold-item-explain"     :src="require('/public/assets/images/sold_item2.png')"> 
              </slide>
              <slide>
                <img  class="sold-item-explain"  :src="require('/public/assets/images/sold_item3.png')"> 
              </slide>
              <slide>
                <img  class="sold-item-explain" :src="require('/public/assets/images/sold_item4.png')"> 
              </slide>
            </carousel>
        </div>








          <div class="explain-wrapper">
          <ruby>
            <h3 class="explain-wrapper-title">いいねやコメントで盛り上がろう</h3>
            <rt class="explain-wrapper-title-en">smash that like button and comment </rt>
          </ruby>


            <p class="explain-wrapper-info">
              気に入った投稿に「いいね」を押したり、コメントして
              一杯のコーヒーが生み出すコミュニティに参加しましょう。
            </p>
          </div>   

  </div>

</div>


</template>

<script>
import { Carousel, Slide } from 'vue-carousel';
export default {
  components: {
    Carousel,
    Slide
  }
}
</script>

app/views/sessions/new.html.erb


<div id="app-explain">
 <%= javascript_pack_tag 'app_explain' %>
</div>

このような感じで自作vueファイルをerbに表示させていました。。。

まぁ恐らくだが、production.rb
の

production.rb

config.serve_static_assets = true 
config.serve_static_files = true 
config.public_file_server.enabled = true

ここが問題な気がする。。。

しかしこの部分を削除したら、さっきのようなエラーがでるが、、。。。

本番環境でpublic以下の画像を参照するときは色々設定が必要じゃないか説。

この説が無理だったら、なんとかvueファイルのほうで　app/asset/images以下の画像を読み込めるように設定します。

ってことで

production.rb

config.public_file_server.enabled = true

だけを記述。

rails assets:precompile RAILS_ENV=production

は問題なし。。

だけどエラー変わらず。

production.rb
の設定を元に戻して、


[ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.53s.
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.30s.
Everything's up-to-date. Nothing to do

と、エラーが起きなかった。。。なんで。。。

もちろんgit pull origin masterも実行して、ちゃんと変更を反映させてる。。。。

[ec2-user@ip-10-0-10-10 environments]$ vim production.rb

production.rb

Rails.application.configure do
  # Settings specified here will take precedence over those in config/application.rb.
  host = 'http://18.179.97.156'

  Rails.application.routes.default_url_options = {host: host,protocol: 'http'}
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :smtp
  ActionMailer::Base.smtp_settings = {
    #enable: true,
    address: 'smtp.sendgrid.net',
    port: 587,
    domain: 'gmail.com',
    authentication: :plain,
    user_name: "apikey",
    password: ENV['SENDGRID_PASSWORD'],
    enable_starttls_auto:  true
    #openssl_verify_mode: 'peer',
    #ssl: 465,
    #tls: false
  }


# publicディレクトリ以下に置かれたあらゆるアセットは
# アプリケーション、またはWebサーバーによって静的な
# ファイルとして取り扱われます。



  # Code is not reloaded between requests.
  config.cache_classes = true

  # Eager load code on boot. This eager loads most of Rails and
  # your application in memory, allowing both threaded web servers
  # and those relying on copy on write to perform better.
  # Rake tasks automatically ignore this option for performance.
  config.eager_load = true

  # Full error reports are disabled and caching is turned on.
  config.consider_all_requests_local       = true
  config.action_controller.perform_caching = true

  # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
  # or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
  config.require_master_key = true
  # マスターキーの指定もれを防ぐために必要

  # Disable serving static files from the `/public` folder by default since
  # Apache or NGINX already handles this.

しっかりと、反映できてる。。。

んーー、なぜ以前の

が rails assets:precompile RAILS_ENV=production
時に起きないのかが気になる。。

ちなみに本番環境の

app.vue

   <router-link to="/user" @click.native="getUserId(drink.user_id)">

も機能してない。。。

ユーザーの詳細ページをrouter-linkで表示させたいが、全く反応しない。。。。

一旦git reset

productionを弄る前の状態に戻す。一応。

git reset --hard nsdjfnsff

みたいな感じ、

git push origin +master

　をして完全に戻ったが

本番環境で

git pull origin masterをしても
Already up to date.

となって変更が反映されていない。。

色々すったもんだあったあとに、

本番環境で

rails assets:precompile RAILS_ENV=production

を実行したら、

Compiling...
Compilation failed:
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
ModuleNotFoundError: Module not found: Error: Can't resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
at factory.create (/var/www/coffee_passport/node_modules/webpack/lib/Compilation.js:925:10)
at factory (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:401:22)
at resolver (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
at asyncLib.parallel (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
at /var/www/coffee_passport/node_modules/neo-async/async.js:2830:7
at /var/www/coffee_passport/node_modules/neo-async/async.js:6877:13
at normalResolver.resolve (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
at doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:213:14)
at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7)
at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1)
at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
at _fn44 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1)
at resolver.doResolve._ignoreErrors (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9)
at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1)
at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
at _fn1 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1)
at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at fs.stat (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15)
at process.nextTick (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
at process._tickCallback (internal/process/next_tick.js:61:11)
resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
using description file: /var/www/coffee_passport/package.json (relative path: ./app/javascript/packs/components/static_pages)
Field 'browser' doesn't contain a valid alias configuration
No description file found
no extension
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif doesn't exist
.vue
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.vue doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.js doesn't exist
.sass
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.sass doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.scss doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.css doesn't exist
.module.sass
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.module.sass doesn't exist
.module.scss
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.module.scss doesn't exist
.module.css
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.module.css doesn't exist
.png
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.png doesn't exist
.svg
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.svg doesn't exist
.gif
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.gif doesn't exist
.jpeg
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.jpeg doesn't exist
.jpg
Field 'browser' doesn't contain a valid alias configuration
/public/assets/images/coffee_gif.gif.jpg doesn't exist
as directory
/public/assets/images/coffee_gif.gif doesn't exist
root path /var/www/coffee_passport
using description file: /var/www/coffee_passport/package.json (relative path: ./public/assets/images/coffee_gif.gif)
no extension
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif doesn't exist
.vue
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.vue doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.js doesn't exist
.sass
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.sass doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.scss doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.css doesn't exist
.module.sass
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.sass doesn't exist
.module.scss
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.scss doesn't exist
.module.css
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.css doesn't exist
.png
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.png doesn't exist
.svg
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.svg doesn't exist
.gif
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.gif doesn't exist
.jpeg
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpeg doesn't exist
.jpg
Field 'browser' doesn't contain a valid alias configuration
/var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpg doesn't exist
as directory
/var/www/coffee_passport/public/assets/images/coffee_gif.gif doesn't exist

本番環境のアプリのブラウザでも

Webpacker::Manifest::MissingEntryError in Sessions#new
Showing /var/www/coffee_passport/app/views/sessions/new.html.erb where line #3 raised:

Webpacker can't find app_explain in /var/www/coffee_passport/public/packs/manifest.json. Possible causes:

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.
webpack has not yet re-run to reflect updates.
You have misconfigured Webpacker's config/webpacker.yml file.
Your webpack configuration is not creating a manifest.
Your manifest contains:
{
"application.js": "/packs/js/application-3538e0dca107d3630558.js",
"application.js.map": "/packs/js/application-3538e0dca107d3630558.js.map",
"components/Home.js": "/packs/js/components/Home-ad21ec7dc038d47a3482.js",
"components/Home.js.map": "/packs/js/components/Home-ad21ec7dc038d47a3482.js.map",
"components/about_coffee_passport.js": "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js",
"components/about_coffee_passport.js.map": "/packs/js/components/about_coffee_passport-912426bccd01134649c6.js.map",
"components/contact.js": "/packs/js/components/contact-b1ef171175665ddc89b8.js",
"components/contact.js.map": "/packs/js/components/contact-b1ef171175665ddc89b8.js.map",
"components/drinks/show.js": "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js",
"components/drinks/show.js.map": "/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js.map",
"components/footer.js": "/packs/js/components/footer-ce242222576e7516708a.js",
"components/footer.js.map": "/packs/js/components/footer-ce242222576e7516708a.js.map",
"components/like/likeButton.js": "/packs/js/components/like/likeButton-e09e38a35194597b646d.js",
"components/like/likeButton.js.map": "/packs/js/components/like/likeButton-e09e38a35194597b646d.js.map",
"components/search.js": "/packs/js/components/search-3a946d78542c0511990c.js",
"components/search.js.map": "/packs/js/components/search-3a946d78542c0511990c.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-3538e0dca107d3630558.js"
],
"js.map": [
"/packs/js/application-3538e0dca107d3630558.js.map"
]
},
"components/about_coffee_passport": {
"js": [
"/packs/js/components/about_coffee_passport-912426bccd01134649c6.js"
],
"js.map": [
"/packs/js/components/about_coffee_passport-912426bccd01134649c6.js.map"
]
},
"components/contact": {
"js": [
"/packs/js/components/contact-b1ef171175665ddc89b8.js"
],
"js.map": [
"/packs/js/components/contact-b1ef171175665ddc89b8.js.map"
]
},
"components/drinks/show": {
"js": [
"/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js"
],
"js.map": [
"/packs/js/components/drinks/show-92ef61f08e34c84f0e6b.js.map"
]
},
"components/footer": {
"js": [
"/packs/js/components/footer-ce242222576e7516708a.js"
],
"js.map": [
"/packs/js/components/footer-ce242222576e7516708a.js.map"
]
},
"components/Home": {
"js": [
"/packs/js/components/Home-ad21ec7dc038d47a3482.js"
],
"js.map": [
"/packs/js/components/Home-ad21ec7dc038d47a3482.js.map"
]
},
"components/like/likeButton": {
"js": [
"/packs/js/components/like/likeButton-e09e38a35194597b646d.js"
],
"js.map": [
"/packs/js/components/like/likeButton-e09e38a35194597b646d.js.map"
]
},
"components/search": {
"js": [
"/packs/js/components/search-3a946d78542c0511990c.js"
],
"js.map": [
"/packs/js/components/search-3a946d78542c0511990c.js.map"
]
},
"footer": {
"js": [
"/packs/js/footer-b04804ecee29760096bf.js"
],
"js.map": [
"/packs/js/footer-b04804ecee29760096bf.js.map"
]
},
"hello_vue": {
"js": [
"/packs/js/hello_vue-58d59e5ab7981f9e89a0.js"
],
"js.map": [
"/packs/js/hello_vue-58d59e5ab7981f9e89a0.js.map"
]
},
"preview": {
"js": [
"/packs/js/preview-f0475e1207aa006fdf05.js"
],
"js.map": [
"/packs/js/preview-f0475e1207aa006fdf05.js.map"
]
},
"router/router": {
"js": [
"/packs/js/router/router-3ad8b6d61d35ff908058.js"
],
"js.map": [
"/packs/js/router/router-3ad8b6d61d35ff908058.js.map"
]
},
"tag": {
"js": [
"/packs/js/tag-d8add757194386926360.js"
],
"js.map": [
"/packs/js/tag-d8add757194386926360.js.map"
]
}
},
"footer.js": "/packs/js/footer-b04804ecee29760096bf.js",
"footer.js.map": "/packs/js/footer-b04804ecee29760096bf.js.map",
"hello_vue.js": "/packs/js/hello_vue-58d59e5ab7981f9e89a0.js",
"hello_vue.js.map": "/packs/js/hello_vue-58d59e5ab7981f9e89a0.js.map",
"preview.js": "/packs/js/preview-f0475e1207aa006fdf05.js",
"preview.js.map": "/packs/js/preview-f0475e1207aa006fdf05.js.map",
"router/router.js": "/packs/js/router/router-3ad8b6d61d35ff908058.js",
"router/router.js.map": "/packs/js/router/router-3ad8b6d61d35ff908058.js.map",
"tag.js": "/packs/js/tag-d8add757194386926360.js",
"tag.js.map": "/packs/js/tag-d8add757194386926360.js.map"
}
Extracted source (around line #3):
1
2
3
4
5
6

<%= javascript_pack_tag 'app_explain' %>

こんなかんじのエラーが表示されてる。


[ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.61s.
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.19s.
Compiling...
Compilation failed:
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-property-in-object.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
ModuleNotFoundError: Module not found: Error: Can't resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
    at factory.create (/var/www/coffee_passport/node_modules/webpack/lib/Compilation.js:925:10)
    at factory (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:401:22)
    at resolver (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /var/www/coffee_passport/node_modules/neo-async/async.js:2830:7
    at /var/www/coffee_passport/node_modules/neo-async/async.js:6877:13
    at normalResolver.resolve (/var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:213:14)
    at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7)
    at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
    at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn44 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at resolver.doResolve._ignoreErrors (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9)
    at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43)
    at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn1 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at hook.callAsync (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5)
    at _fn0 (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at fs.stat (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15)
    at process.nextTick (/var/www/coffee_passport/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
  using description file: /var/www/coffee_passport/package.json (relative path: ./app/javascript/packs/components/static_pages)
    Field 'browser' doesn't contain a valid alias configuration
    No description file found
    no extension
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif doesn't exist
    .vue
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.vue doesn't exist
    .mjs
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.mjs doesn't exist
    .js
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.js doesn't exist
    .sass
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.sass doesn't exist
    .scss
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.scss doesn't exist
    .css
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.css doesn't exist
    .module.sass
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.module.sass doesn't exist
    .module.scss
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.module.scss doesn't exist
    .module.css
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.module.css doesn't exist
    .png
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.png doesn't exist
    .svg
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.svg doesn't exist
    .gif
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.gif doesn't exist
    .jpeg
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.jpeg doesn't exist
    .jpg
      Field 'browser' doesn't contain a valid alias configuration
      /public/assets/images/coffee_gif.gif.jpg doesn't exist
    as directory
      /public/assets/images/coffee_gif.gif doesn't exist
    root path /var/www/coffee_passport
      using description file: /var/www/coffee_passport/package.json (relative path: ./public/assets/images/coffee_gif.gif)
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif doesn't exist
        .vue
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.vue doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.js doesn't exist
        .sass
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.sass doesn't exist
        .scss
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.scss doesn't exist
        .css
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.css doesn't exist
        .module.sass
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.sass doesn't exist
        .module.scss
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.scss doesn't exist
        .module.css
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.module.css doesn't exist
        .png
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.png doesn't exist
        .svg
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.svg doesn't exist
        .gif
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.gif doesn't exist
        .jpeg
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpeg doesn't exist
        .jpg
          Field 'browser' doesn't contain a valid alias configuration
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpg doesn't exist
        as directory
          /var/www/coffee_passport/public/assets/images/coffee_gif.gif doesn't exist

[ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.47s.
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.15s.
Everything's up-to-date. Nothing to do

一回目のrails assets:precompile RAILS_ENV=production

はエラーが表示されるのに、

二回目はエラーが表示されない。。。なんで。。。

改めて質問、一回目のエラーが起きてる前提でエラー解決,

EC2のターミナルで、

ModuleNotFoundError: Module not found: Error: Can't resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'

と

    .jpg
      Field 'browser' doesn't contain a valid alias configuration
      /var/www/coffee_passport/public/assets/images/coffee_gif.gif.jpg doesn't exist
    as directory

がrails assets:precompile RAILS_ENV=production
実行時に起こりました。

Webpacker::Manifest::MissingEntryError in Sessions#new
Showing /var/www/coffee_passport/app/views/sessions/new.html.erb where line #3 raised:

Webpacker can't find app_explain in /var/www/coffee_passport/public/packs/manifest.json. Possible causes:

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.
webpack has not yet re-run to reflect updates.
You have misconfigured Webpacker's config/webpacker.yml file.
Your webpack configuration is not creating a manifest.
Your manifest contains:

とブラウザに表示されてるエラーを　を解決。

app/view/sessions/new.html.erb

<div id="app-explain">
 <%= javascript_pack_tag 'app_explain' %>
</div>

この部分がエラーになってる。
まぁこれはコンパイルをしたらエラー解決できそうだけど、
がrails assets:precompile RAILS_ENV=production
のエラーが解決できないと無理だね。

開発環境では上手くいってるのに、本番環境で以上のようなエラーが起こってしまいます。

package.json

{
  "name": "coffee_passport",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "axios": "^0.21.1",
    "rails-ujs": "^5.2.6",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.12",
    "vue-axios": "^3.2.4",
    "vue-carousel": "^0.18.0",
    "vue-eslint-parser": "^7.6.0",
    "vue-js-modal": "^2.0.1",
    "vue-loader": "^15.9.6",
    "vue-router": "^3.5.1",
    "vue-template-compiler": "^2.6.12",
    "vue-youtube": "^1.4.0",
    "vuex": "^3.6.2"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.5.2",
    "webpack-dev-server": "^3.11.2"
  }
}
~

[ec2-user@ip-10-0-10-10 coffee_passport]$ npm install --production
npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
[ .................] / loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of npm is compatib[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of n[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of n[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version of[ .................] - loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This version [ .................] | loadIdealTree:loadAllDepsIntoIdealTree: WARN read-shrinkwrap This versionpm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN rm not removing /var/www/coffee_passport/node_modules/.bin/rimraf as it wasn't installed by /var/www/coffee_passport/node_modules/rimraf
npm WARN rm not removing /var/www/coffee_passport/node_modules/.bin/semver as it wasn't installed by /var/www/coffee_passport/node_modules/semver
npm WARN rm not removing /var/www/coffee_passport/node_modules/.bin/mkdirp as it wasn't installed by /var/www/coffee_passport/node_modules/mkdirp
npm WARN rm not removing /var/www/coffee_passport/node_modules/.bin/cssesc as it wasn't installed by /var/www/coffee_passport/node_modules/cssesc

node-sass@4.14.1 install /var/www/coffee_passport/node_modules/node-sass
node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-64_binding.node
Download complete
Binary saved to /var/www/coffee_passport/node_modules/node-sass/vendor/linux-x64-64/binding.node
Caching binary to /home/ec2-user/.npm/node-sass/4.14.1/linux-x64-64_binding.node

core-js@3.16.4 postinstall /var/www/coffee_passport/node_modules/core-js
node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:

https://opencollective.com/core-js
https://patreon.com/zloirock
https://paypal.me/zloirock
bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

node-sass@4.14.1 postinstall /var/www/coffee_passport/node_modules/node-sass
node scripts/build.js

Binary found at /var/www/coffee_passport/node_modules/node-sass/vendor/linux-x64-64/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/watchpack-chokidar2/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN @webpack-cli/serve@1.5.2 requires a peer of webpack-cli@4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 72 packages from 21 contributors, removed 31 packages, updated 950 packages and audited 1184 packages in 55.046s

62 packages are looking for funding
run npm fund for details

found 8 vulnerabilities (2 moderate, 6 high)
run npm audit fix to fix them, or npm audit for details

を実行。

実行後にrails assets:precompile RAILS_ENV=production

をしたら上記と一緒のエラー。

このあと再度、rails assets:precompile RAILS_ENV=production
を実行したら


[ec2-user@ip-10-0-10-10 coffee_passport]$ rails assets:precompile RAILS_ENV=production
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.61s.
yarn install v1.22.5
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" 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-eslint-parser@7.6.0" has unmet peer dependency "eslint@>=5.0.0".
warning " > vue-loader@15.9.6" has unmet peer dependency "css-loader@*".
warning " > vue-loader@15.9.6" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 4.16s.
Everything's up-to-date. Nothing to do

エラーが表示されなくなったが、ブラウザには

Webpacker::Manifest::MissingEntryError in Sessions#new
Showing /var/www/coffee_passport/app/views/sessions/new.html.erb where line #3 raised:

Webpacker can't find app_explain in /var/www/coffee_passport/public/packs/manifest.json. Possible causes:

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.
webpack has not yet re-run to reflect updates.
You have misconfigured Webpacker's config/webpacker.yml file.
Your webpack configuration is not creating a manifest.
Your manifest contains:

とブラウザに表示されてるエラーを　を解決。

app/view/sessions/new.html.erb

<div id="app-explain">
 <%= javascript_pack_tag 'app_explain' %>
</div>

このように表示されてる。

yarn upgrade-interactive --latest
を実行し、全部アップグレードしたら

error webpack-dev-server@4.1.1: The engine "node" is incompatible with this module. Expected version ">= 12.13.0". Got "10.24.1"
Done in 109.13s.
Error: Found incompatible module.
at MessageError.ExtendableBuiltin (/usr/share/yarn/lib/cli.js:721:66)
at new MessageError (/usr/share/yarn/lib/cli.js:750:123)
at checkOne (/usr/share/yarn/lib/cli.js:48059:11)
at Object.check (/usr/share/yarn/lib/cli.js:48078:5)
at /usr/share/yarn/lib/cli.js:7348:73
at Generator.next ()
at step (/usr/share/yarn/lib/cli.js:310:30)
at /usr/share/yarn/lib/cli.js:321:13

このようなエラーが表示された。

nodeをアップグレードする必要する必要があるので、

[ec2-user@ip-10-0-10-10 coffee_passport]$ npm install -g n
npm WARN checkPermissions Missing write access to /usr/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/lib/node_modules'
npm ERR! { [Error: EACCES: permission denied, access '/usr/lib/node_modules']
npm ERR! stack:
npm ERR! 'Error: EACCES: permission denied, access '/usr/lib/node_modules'',
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'access',
npm ERR! path: '/usr/lib/node_modules' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/ec2-user/.npm/_logs/2021-09-08T06_40_23_796Z-debug.log

[ec2-user@ip-10-0-10-10 coffee_passport]$ sudo npm install -g n
/usr/bin/n -> /usr/lib/node_modules/n/bin/n
+ n@7.3.1
added 1 package from 2 contributors in 0.299s

sudo つけたらいけた。


[ec2-user@ip-10-0-10-10 coffee_passport]$ sudo n latest
  installing : node-v16.9.0
       mkdir : /usr/local/n/versions/node/16.9.0
       fetch : https://nodejs.org/dist/v16.9.0/node-v16.9.0-linux-x64.tar.xz
   installed : v16.9.0 to /usr/local/bin/node
      active : v10.24.1 at /bin/node

https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html
を参考にnvmをインストールして、
nvmを使用して、最新の安定版のnodeを使いたいと思う。

node -e "console.log('Running Node.js ' + process.version)"
Running Node.js v10.24.1

とりあえず、node14系を使うことにします。

[ec2-user@ip-10-0-10-10 ~]$ node -v
v14.17.6

最新の安定版を使えました。

ってことで再度、

yarn upgrade-interactive --latest

[ec2-user@ip-10-0-10-10 ~]$ yarn upgrade-interactive --latest
yarn upgrade-interactive v1.22.5
success All of your dependencies are up to date.
Done in 0.03s.

全部の依存関係がクリアされた？？？

再度、rails assets:precompile RAILS_ENV=production
を実行。

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.

ModuleNotFoundError: Module not found: Error: Can't resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
at /var/www/coffee_passport/node_modules/webpack/lib/Compilation.js:925:10
at /var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:401:22
at /var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:130:21
at /var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:224:22
at /var/www/coffee_passport/node_modules/neo-async/async.js:2830:7
at /var/www/coffee_passport/node_modules/neo-async/async.js:6877:13
at /var/www/coffee_passport/node_modules/webpack/lib/NormalModuleFactory.js:214:25
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:213:14
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1)
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1)
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1)
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1)
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/Resolver.js:285:5
at eval (eval at create (/var/www/coffee_passport/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
at /var/www/coffee_passport/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
at processTicksAndRejections (internal/process/task_queues.js:77:11)
resolve '/public/assets/images/coffee_gif.gif' in '/var/www/coffee_passport/app/javascript/packs/components/static_pages'
using description file: /var/www/coffee_passport/package.json (relative path: ./app/javascript/packs/components/static_pages)
Field 'browser' doesn't contain a valid alias configuration

クソ長いエラーが表示されたけど、抜粋するとこんなエラーがでた。。。

んーー、分からんん。。。。。

開発環境では
ModuleNotFoundError: Module not found: Error: Can't resolve '/public/assets/images/coffee_gif.gif'
　このようなエラーが表示されないので、、、、・。。。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up