application-xxxxxxx.jsがNot Foundになる

Question

application-xxxxxxx.jsがNot Foundになる

rails6.0でgem 'webpacker', gem 'react-rails'
を用いてreact.jsを導入しました。
開発環境では問題なく使えていたjavascirptが、本番環境ではaplication.jsが読み込まれず、js部分が一切適応されなくなりました。
public/assetsは問題なく作成されていて、cssも効いています。
README通りに、以下のコマンドを実行して、本番環境のAWS EC２にもreactを導入したのち、

$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install

cssファイルをprecompileするために、次のコードを実行した。

$ rails assets:precompile RAILS_ENV=production 

react関連のjavascriptをprecompileするために webpack-dev-serverを起動しました。

[takaya@ip-10-0-0-222 rails_app]
$ bin/webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:3035/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /var/www/rails/rails_app/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: f3006a028632deca77e4
Version: webpack 4.44.2
Time: 10272ms
Built at: 12/01/2020 12:50:27 PM
                                          Asset      Size            Chunks                         Chunk Names
         js/application-b87f0d4fd4c3fba00f5a.js  13.3 MiB       application  [emitted] [immutable]  application
     js/application-b87f0d4fd4c3fba00f5a.js.map  13.4 MiB       application  [emitted] [dev]        application
         js/hello_react-35afa24b0b3d6cd6614c.js  1.47 MiB       hello_react  [emitted] [immutable]  hello_react
     js/hello_react-35afa24b0b3d6cd6614c.js.map  1.69 MiB       hello_react  [emitted] [dev]        hello_react
    js/server_rendering-93ddcf26a452421c2437.js  12.9 MiB  server_rendering  [emitted] [immutable]  server_rendering
js/server_rendering-93ddcf26a452421c2437.js.map  12.9 MiB  server_rendering  [emitted] [dev]        server_rendering
                                  manifest.json  1.05 KiB                    [emitted]              
ℹ ｢wdm｣: Compiled successfully.

webpack-dev-serverでのcompileは成功しているのですが、pullic/packs/jsの中は一切からのままで、packsフォルダーの中にmanifest.jsonがあり、precompileされたfileの名前だけが残されています。

[takaya@ip-10-0-0-222 public]$ cd packs
[takaya@ip-10-0-0-222 packs]$ ls
js  manifest.json  nohup.out
[takaya@ip-10-0-0-222 packs]$ cd js
[takaya@ip-10-0-0-222 js]$ ls
[takaya@ip-10-0-0-222 js]$ 

こちらはmanifest.jsonの内容になります。

{
  "application.js": "/packs/js/application-b87f0d4fd4c3fba00f5a.js",
  "application.js.map": "/packs/js/application-b87f0d4fd4c3fba00f5a.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-b87f0d4fd4c3fba00f5a.js"
      ],
      "js.map": [
        "/packs/js/application-b87f0d4fd4c3fba00f5a.js.map"
      ]
    },
    "hello_react": {
      "js": [
        "/packs/js/hello_react-35afa24b0b3d6cd6614c.js"
      ],
      "js.map": [
        "/packs/js/hello_react-35afa24b0b3d6cd6614c.js.map"
      ]
    },
    "server_rendering": {
      "js": [
        "/packs/js/server_rendering-93ddcf26a452421c2437.js"
      ],
      "js.map": [
        "/packs/js/server_rendering-93ddcf26a452421c2437.js.map"
      ]
    }
  },
  "hello_react.js": "/packs/js/hello_react-35afa24b0b3d6cd6614c.js",
  "hello_react.js.map": "/packs/js/hello_react-35afa24b0b3d6cd6614c.js.map",
  "server_rendering.js": "/packs/js/server_rendering-93ddcf26a452421c2437.js",
  "server_rendering.js.map": "/packs/js/server_rendering-93ddcf26a452421c2437.js.map"} 

production.rbのエラー内容はこちらです。

 ActionController::RoutingError (No route matches [GET] "/packs/js/application-b87f0d4fd4c3fba00f5a.js"):
[370489fe-7bb5-4a00-aad7-e4e2903e0a03]   

##主な問題
webpack-dev-serverでcompileされたjs fileがpublic/packs/js内に出力されず、
その結果application.jsがNot foundで適応されていないです。

もしわかる人がいましたら、正しいjs fileのprecompileの仕方を教えて頂きたいです。

各設定ファイル
app/javascipt/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")//jquery追加用

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

package.json

{
  "name": "app",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.12.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "dotenv": "^8.2.0",
    "google-map-react": "^2.1.9",
    "jquery": "^3.5.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-awesome-stars-rating": "^0.2.5",
    "react-dom": "^17.0.1",
    "react-icons": "^3.11.0",
    "react-responsive": "^8.1.1",
    "react_ujs": "^2.6.1"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

config/environments/produciton.rb

const { environment } = require('@rails/webpacker')
//追記
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
//ここまで
module.exports = environment

webpacker.yml

# 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 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: true

  # 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: true

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

Answer 1

###自己解決できたので、共有しておきます。
react関連のjavascriptをprecompileするために webpack-dev-serverを起動しました。

$ bin/webpack-dev-server

これが間違えていました。
css系のcompileは、rails assets:precompile RAILS_ENV=productionで良いのですが、　js系特にjsxやjavascript ES6はwebpackerでcompileする必要があるので、元のpublic/packsを消去してから、compileします。

$ rm -r public/packs
$ bin/webpack
$ bin/webpack-dev-server

これで,解決しました。
webpackerのcompileは気をつける事が多いですね。
自分でデプロイして、色々なことを学べました
。

webpackのcompile error出たときは、webpackをupdateする必要があるかもしれません。

 yarn add @rails/webpacker bundle update webpacker