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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2188閲覧

【React-Rails】manifest.jsonで指定されているjsが作成されない

zackieeee

総合スコア16

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

2クリップ

投稿2019/08/02 03:35

◾️解決したい事象
manifest.jsonで指定されているpackされたjsが存在しない。
ChromeのConsole上も同様のエラーが表示され、画面が表示されない。

 エラーメッセージ
![イメージ説明
※outputのパスを切り替えて再ビルドしてみたところ、
public/pucks/フォルダおよび、manifest.json(js指定つき)はできましたが、
manifest.jsonで指定されているjs/XXXXX.jsおよび、XXXXX.js.mapは作成されない状況です

◾️質問内容
①jsファイルが作成されないのが原因と思いますが、解決方法がわかればと。。
②js、js.mapファイルができるタイミングっていつなんでしょうか?
③outputのパス切り替え前の過去フォルダにjs、js.mapが大量に溜まっています。
tmp/cacheと合わせ、削除して良いのか?設定の問題かもご教示いただけると嬉しいです。。

よろしくお願いいたします。

◾️環境補足(足りなければ、ご指摘いただければと・・・)
・Ruby on Rails 2.6.3
関連gemとして以下を入れています。
-webpacker
-react-rails

【package.json】

{ "name": "app", "private": true, "dependencies": { "@babel/preset-react": "^7.0.0", "@fortawesome/fontawesome-svg-core": "^1.2.20", "@fortawesome/free-brands-svg-icons": "^5.10.0", "@fortawesome/free-regular-svg-icons": "^5.10.0", "@fortawesome/free-solid-svg-icons": "^5.10.0", "@fortawesome/react-fontawesome": "^0.1.4", "@material-ui/core": "^4.3.0", "@material-ui/icons": "^4.2.1", "@rails/webpacker": "^4.0.7", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "immutability-helper": "^3.0.1", "moment": "^2.24.0", "prop-types": "^15.7.2", "react": "^16.8.6", "react-datetime": "^2.16.3", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", "react-tabs": "^3.0.0", "react_ujs": "^2.5.0" }, "devDependencies": { "webpack-dev-server": "^3.7.2" } }

【manifest.json】

{ "application.js": "/packs/js/application-8d32689eab9fea0d09c6.js", "application.js.map": "/packs/js/application-8d32689eab9fea0d09c6.js.map", "entrypoints": { "application": { "js": [ "/packs/js/application-8d32689eab9fea0d09c6.js" ], "js.map": [ "/packs/js/application-8d32689eab9fea0d09c6.js.map" ] }, "server_rendering": { "js": [ "/packs/js/server_rendering-ac6c3e5d72cd59e80690.js" ], "js.map": [ "/packs/js/server_rendering-ac6c3e5d72cd59e80690.js.map" ] } }, "server_rendering.js": "/packs/js/server_rendering-ac6c3e5d72cd59e80690.js", "server_rendering.js.map": "/packs/js/server_rendering-ac6c3e5d72cd59e80690.js.map" }

【webpacker.yaml】

# 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: false # 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: - .jsx - .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 # 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 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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

本番環境で私も同様の状況に陥り、ググっていたらこの質問にたどりつきました。
* 2019/8/2現在、ネット上にはこの問題を解決するためのベストプラクティスはなさそうですので、私の場合の対処法を下記に記載しますね。

開発環境

webpack-dev-server を使用すれば問題は解決すると思います。

本番環境

デプロイの一連の処理の中で、 bundle exec rake assets:precompile をしている箇所があるかと思いますので、その処理の前にprecompileされた古いファイルを削除すれば解決します。

rm -r public/packs

ご質問に対する回答

①jsファイルが作成されないのが原因と思いますが、解決方法がわかればと。。

作成されないのが原因というより、 manifest.json で定義されているファイルと、実際にprecompileされて生成されたファイルのdigest(ファイル名)が異なることが原因です。

②js、js.mapファイルができるタイミングっていつなんでしょうか?

precompileしたタイミングです。

③outputのパス切り替え前の過去フォルダにjs、js.mapが大量に溜まっています。
tmp/cacheと合わせ、削除して良いのか?設定の問題かもご教示いただけると嬉しいです。。

削除して問題ありません。

投稿2019/08/02 14:29

DaiAoki

総合スコア67

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zackieeee

2019/08/19 01:22

一度回答に失敗(画面閉じてしまう)してから、失念しておりました。。 申し訳ありません。。 ご回答ありがとうございました! こちらとは少し状況が違うようです。 当方は個人勉強がてら開発環境のみでの動作ですが、私の対処法についても載せておきます! ① 今回のケースではmanifest.jsonに記載されたファイル自体がプロジェクトフォルダ内に存在しませんでした。流れと暫定対処方法を以下の通りです。 【今回のケースの流れ】  ⑴precompile(webpack-dev-serverコマンドの中で実行)   →ファイル生成はするが、何らかの原因でファイル生成過程で失敗しモノができない  (2)webpack-dev-server起動   →manifest.jsonが(1)で生成失敗している(最新)ファイルの名前に書き換わる (3)ページ表示   →manifest.jsonで指定されたファイルが存在しないと怒られる 【対処方法】   (1) 古いmapファイルを削除する。     以下のコマンドを叩く事で削除されるようです。     <不要なpacks/js/配下のファイル削除できるタスクが標準で提供されてました>      bundle exec rake webpacker:clobber   (2)明示的にprecompileさせる     bin/webpack    (3)サーバーを立ち上げる bin/webpack-dev-server   ただし、溜まってくると同じ状況に陥ります。   何かの容量制限に引っかかってるのかな?と思いますが原因追及までしていません。。   定期的に削除コマンドを走らせる事で回避の方向です。。 ②  承知しました!  こちらも動きを追っていてタイミングを確認できました! ③  tmp/cacheは手動で削除していこうと思います>< ありがとうございました!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問