React-rails Cannot Find App Component in View

Question

Finally after many steps of troubleshooting rails is rendering our NavBar component, but not the base App component where everything is imported. Wondering what I might need to consider if there's a gem version not working properly like uglifier? Out of my two react_components rendered it finds the NavBar fine.

index.html.erb:

    <%= react_component('NavBar', { isUserAuthed: @is_user_authed }) %>
    <%= react_component('App') %>

App.jsx:
    import React from "react";
    import 'fontsource-roboto';
    import Home from "../components/Home";
    
    class App extends React.Component {
      render() {
        return (
          <>
            <Home/>
          </>
        )
      }
    }
    
    export default App;

application.js:

    // app/javascript/packs/application.js
    import Rails from "@rails/ujs"
    import Turbolinks from "turbolinks"
    import * as ActiveStorage from "@rails/activestorage"
    import "channels"
    
    var componentRequireContext = require.context("components", true);
    var ReactRailsUJS = require("react_ujs");
    ReactRailsUJS.useContext(componentRequireContext);
    
    
    Rails.start()
    Turbolinks.start()
    ActiveStorage.start()

package.json:

    {
      "name": "my-webpack-project",
      "private": true,
      "dependencies": {
        "@babel/plugin-proposal-class-properties": "^7.16.5",
        "@babel/plugin-proposal-decorators": "^7.16.4",
        "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
        "@babel/plugin-proposal-private-methods": "^7.16.0",
        "@babel/plugin-proposal-private-property-in-object": "^7.16.0",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/plugin-syntax-jsx": "^7.16.0",
        "@babel/plugin-transform-destructuring": "^7.16.0",
        "@babel/plugin-transform-regenerator": "^7.16.0",
        "@babel/plugin-transform-runtime": "^7.16.4",
        "@babel/preset-env": "^7.16.5",
        "@date-io/date-fns": "^2.9.1",
        "@date-io/moment": "^2.9.0",
        "@jest/globals": "^26.3.0",
        "@material-ui/core": "^4.11.0",
        "@material-ui/icons": "^4.9.1",
        "@material-ui/pickers": "^3.2.10",
        "@rails/actioncable": "^6.1.4-1",
        "@rails/activestorage": "^6.1.4-1",
        "@rails/ujs": "^6.1.4-1",
        "@rails/webpacker": "5.4.3",
        "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
        "caniuse-lite": "^1.0.30001249",
        "clsx": "^1.1.1",
        "date-fns": "^2.16.1",
        "fetch-mock": "^9.10.6",
        "fontsource-roboto": "^3.0.3",
        "html-webpack-plugin": "^4.5.2",
        "isomorphic-fetch": "^2.2.1",
        "jquery": "^3.5.0",
        "leaflet": "^1.6.0",
        "lodash": "^4.17.20",
        "mapbox-gl": "^1.8.1",
        "moment": "^2.27.0",
        "node": "16",
        "node-fetch": "^2.6.0",
        "npm": "^6.14.7",
        "popper.js": "^1.16.1",
        "postcss-cssnext": "^3.1.0",
        "prop-types": "^15.7.2",
        "query-string": "^6.13.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-leaflet": "^2.6.1",
        "react-password-strength": "^2.4.0",
        "react-router-dom": "^5.1.2",
        "react_ujs": "^2.6.1",
        "recharts": "^2.0.9",
        "sass": "^1.37.5",
        "turbolinks": "^5.2.0",
        "webpack": "^4.46.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3",
        "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony"
      },
      "devDependencies": {
        "@babel/core": "^7.16.5",
        "@webpack-cli/generators": "^2.4.1",
        "autoprefixer": "^10.4.0",
        "babel-loader": "^8.2.3",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^5.2.7",
        "jest": "^26.0.1",
        "mini-css-extract-plugin": "^1.6.2",
        "node-sass": "^7.0.0",
        "post-loader": "^2.0.0",
        "postcss": "^8.4.4",
        "sass-loader": "^10.2.0",
        "style-loader": "^2.0.0"
      },
      "version": "1.0.0",
      "description": "My webpack project",
      "scripts": {
        "build": "webpack --mode=production --node-env=production",
        "build:dev": "webpack --mode=development",
        "build:prod": "webpack --mode=production --node-env=production",
        "watch": "webpack --watch",
        "serve": "webpack serve"
      }
    }

Answer 1

Do you have this in your config?

$ tail -n 12  webpack.config.js 
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx|)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      }
    ]
  }
}