npm run dev error (django/react/webpack/babel)

I'm following a code along of a django with react project and have run in to an error(s) that I can't get past. When I run npm run dev I get the error:

ERROR in ./portfolio/frontend/src/index.js 1:0-35
Module not found: Error: Can't resolve './components/App' in '/home/anthony/Desktop/playground/portfolio/portfolio/frontend/src'
resolve './components/App' in '/home/anthony/Desktop/playground/portfolio/portfolio/frontend/src'
  using description file: /home/anthony/Desktop/playground/portfolio/package.json (relative path: ./portfolio/frontend/src)
    using description file: /home/anthony/Desktop/playground/portfolio/package.json (relative path: ./portfolio/frontend/src/components/App)
      no extension
        /home/anthony/Desktop/playground/portfolio/portfolio/frontend/src/components/App doesn't exist
      .js
        /home/anthony/Desktop/playground/portfolio/portfolio/frontend/src/components/App.js doesn't exist
      .json
        /home/anthony/Desktop/playground/portfolio/portfolio/frontend/src/components/App.json doesn't exist
      .wasm
        /home/anthony/Desktop/playground/portfolio/portfolio/frontend/src/components/App.wasm doesn't exist
      as directory
        /home/anthony/Desktop/playground/portfolio/portfolio/frontend/src/components/App doesn't exist

As I understand it, this is because in my index.js I have:

import App from './components/App';

but webpack isn't looking for /App.jsx (note the jsX). After much googling I found that I need to add "resolve" + "extensions" which I now have.

webpack.config.js

module.exports = {
    module: {
        rules: [
            { 
                test: /.(js|jsx)$/, 
                exclude: /node_modules/, 
                resolve: { extensions: [".js", ".jsx"] }, 
                use: { loader: "babel-loader" } 
            }, 
        ] 
    }
}

The same error still comes up. If I change App.jsx to App.js then I get the following error:

ERROR in ./portfolio/frontend/src/components/App.js 7:8
Module parse failed: Unexpected token (7:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     render() {
|         return (
>         <div>hello</div>
|         )
|     }

After much more googling I think this is because HTML is not JS, hence why App.jsx is needed? But then the viscous circle starts all over again... For reference here is my App.jsx:

import React, { Component } from 'react' 
import ReactDOM from 'react-dom'

class App extends Component { 
    render() { 
        return (
            <div>hello</div>    
        )    
    }    
}

ReactDOM.render(<App />, document.getElementById('app'));

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["transform-class-properties"] 
}

package.json

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --entry ./portfolio/frontend/src/index.js --output-path ./portfolio/frontend/static/frontend/",
    "build": "webpack --mode production ./portfolio/frontend/src/index.js --output-path ./portfolio/frontend/static/frontend/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.1",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/preset-env": "^7.13.5",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
    
  }
}

from Recent Questions - Stack Overflow https://ift.tt/3aXWt10
https://ift.tt/eA8V8J