React-rails 无法在视图中找到 App 组件

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