Cant find what causes the error when import component class - node.js

Question

Im getting an error : unexpected token when importing a component-class while within another component class.
Im new to react, webpack and still learning javascript nodejs callbacks hooks, Im reading and search for best practices regardig nodejs and react on how to setup my dev-environment on Ubuntu.
A lot of trial and error to figure out whats going on behind the scene.
Im able to connect to my single page if I dont add as soon as I add import it raises an error.
// main.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from './App.jsx';
ReactDOM.render( <App /> , document.getElementById('root'));
// App.jsx
import React from 'react';
import {SubmitButton} from './components/SubmitButton';
export default class App extends React.Component {
render(){
return(<div><h1>Hi, I am a header!</h1></div>);
}
}
// SubmitButton.jsx
import React , {Component} from 'react';
export class SubmitButton extends Component{
constructor() {
super();
}
render() {
return(<div>Swing</div>);
}
}
// $npm run start ... webpack.config.js :
"scripts": {
"start": "webpack-dev-server --display-error-details --config webpack.config.js --hot --mode development",
"build" : "webpack"
}
// ERROR
ERROR in ./src/components/SubmitButton/SubmitButton.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /appdevops/graphCRMcli/src/components/SubmitButton/SubmitButton.jsx: Unexpected token (8:9)
6 | }
7 | render() {
> 8 | return(<div>
| ^
9 | <SubmitButton>Swing</SubmitButton>
10 | </div>
11 | );
at Parser.raise
///package.json file
{
"name": "MyClient",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server --display-error-details --config webpack.config.js --hot --mode development",
"build" : "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"cross-spawn": "^7.0.0",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"style-loader": "^1.0.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.8.1"
},
"dependencies": {}
}
// .babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// HtmlWebpackPlugin is used to inject our created bundles into this html file so // we need to create it.
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
});
module.exports = {
mode : 'development',
entry: {
app: ['./src/main.jsx'],
vendor: ['react', 'react-dom']
},
output: {
path: '/appdevops/graphCRMcli/dist',
libraryTarget: 'umd',
filename: '[name].js'
},
devServer: {
host : '0.0.0.0',
compress: true,
port: 3000
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
HtmlWebpackPluginConfig
],
};

Answer 1

I solved it by adjusting webpack.config.js and :
removing .babelrc
adding contents of .babelrc to webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react" ]
}
}
}
]
}