'Application.js not working in React/Rails/Webpacker set up

I've seen this issue several times before in production when deploying to Heroku; however, mine is breaking in development.

app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>List</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

app/javascripts/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("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap")
import "bootstrap/dist/css/bootstrap"
require("./hello_react");

// 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)

package.json:

{
  "name": "list",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.17.12",
    "@popperjs/core": "^2.11.5",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "bootstrap": "^5.1.3",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "prop-types": "^15.8.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^4.9.0"
  }
}

Console Error:

GET http://localhost:3000/packs/js/application-cfda2abe0e08e379b521.js net::ERR_ABORTED 404 (Not Found)

Visual cues:

Neither bootstrap nor sample "hello react" application are showing.

Troubleshooting attempts:

rails webpacker: compile

https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-popper-js#:~:text=To%20solve%20the%20error%20%22Module,and%20restart%20your%20development%20server.

config.assets.compile = true in config/environments/production.rb

Setup:

Rails version: 6.0.5

Ruby version: 2.6.0p0 (2018-12-25 revision 66547) [x86_64-darwin18]

Node version: v16.15.0

Yarn version: 1.22.18

OS: Monterey

Following this tutorial:

https://stevepolito.design/blog/rails-react-tutorial/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Application.js not working in React/Rails/Webpacker set up

Sources

Related Questions