Q&A
https://github.com/Harasou21/coffee_passport
今現在、
vueからassets以下の画像を読み込めなかったので、画像をpublic/以下に置いたのが原因かもしれないので、
vueファイルで画像を表示するときに、assetsから読み込めるようにしたいと思います。
前提・実現したいこと
npm とyarnがEC2内に両方あるので、それもわりと良くない気がしてます。
[ec2-user@ip-10-0-10-10 coffee_passport]$ 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
と、
](68ac691f38abfed83f2cd3d7ea6c5514.png)
本番環境のブラウザでこのようなエラーが起きてます。
rails assets:precompile RAILS_ENV=production
が失敗してるので、上記のようなエラーが起きてるのは仕方ないので、
諸悪の根源は前者のエラーのような気がしてます。
ModuleNotFoundError: Module not found: Error: Can't resolve '/public/assets/images/coffee_gif.gif' in
に関しては、開発環境ではちゃんと表示されてるので、なんでエラーが起きてるのかわかりません。。。
試したこと
nodeのバージョンをv14.17.6
をにして、
[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.
を実行しましたが、結果は変わらずでした。
https://qiita.com/toris-birds/items/c0874a66865f7e3a09ee
この記事を参考にすれば解決できそうでしょうか？
自分のrailsプロジェクトに、webpack.config.jsがなかったですのですが、
そこにエイリアスを設定すればエラーが起こらなくなるのでしょうか？？？
ソースコード
# Note: You must restart bin/webpack-dev-server for changes to take effect default: &default source_path: app/javascript source_entry_path: packs public_root_path: public public_output_path: packs cache_path: tmp/cache/webpacker check_yarn_integrity: false webpack_compile_output: true #additional_paths: ['/app/assets/images'] # Additional paths webpack should lookup modules # ['app/assets', 'engine/foo/app/assets'] resolved_paths: [] # Reload manifest.json on all requests so we reload latest compiled packs cache_manifest: false # Extract and emit a css file extract_css: false static_assets_extensions: - .jpg - .jpeg - .png - .gif - .tiff - .ico - .svg - .eot - .otf - .ttf - .woff - .woff2 extensions: - .vue - .mjs - .js - .sass - .scss - .css - .module.sass - .module.scss - .module.css - .png - .svg - .gif - .jpeg - .jpg development: <<: *default compile: true # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules check_yarn_integrity: false # js関係の物が常に最新にするようにエラーを出してくれる # だから、時たま # Your Yarn packages are out of date! # Please run `yarn install` to update. # とエラーメッセージが表示されてた # Reference: https://webpack.js.org/configuration/dev-server/ dev_server: https: false host: localhost port: 3035 public: localhost:3035 hmr: false # Inline should be set to true if using HMR inline: true overlay: true compress: true disable_host_check: true use_local_ip: false quiet: false pretty: false headers: 'Access-Control-Allow-Origin': '*' watch_options: ignored: '**/node_modules/**' test: <<: *default compile: true # Compile test packs to a separate directory public_output_path: packs-test production: <<: *default # Production depends on precompilation of packs prior to booting for performance. compile: false # Extract and emit a css file extract_css: true # Cache manifest.json for performance cache_manifest: true
環境
【マシン, メモリ量, 関連周辺機器, OS, 利用ソフト, バージョンなどを箇条書きに】
mac os ,yarn -v 1.22.5,npm 6.14.15,node v14.17.6
回答1件
0
レポジトリを見る限り、該当のファイルがコミットされていないように思います。
git statusコマンドをローカルで実行するなどして、未コミットのファイルがないか調べてみてはいかがでしょうか。
投稿2021/09/08 07:59
総合スコア117
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/08 08:43