React-rails Cannot Find App Component in View - reactjs

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'],
}
]
}
}

Answer 2

https://github.com/reactjs/react-rails/blob/master/README.md#3-install-react-and-some-other-required-npm-packages
Update the Babel configuration in the package.json file:
"babel": {
"presets": [
- "./node_modules/shakapacker/package/babel/preset.js"
+ "./node_modules/shakapacker/package/babel/preset.js",
+ "#babel/preset-react"
]
},