ReactJS Error: Module Build failed: SyntaxError: Unexpected token '<' - reactjs

Question

My ReactJS code throws an error when I try to compile it. I used ReactJS before but I never ran into this error (see below)
ERROR in ./kapiche/#kapiche_react/teacher/login.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/d/src/kapiche/#kapiche_react/teacher/login.jsx: Unexpected token (59.6)
57 | render() {
58 | return (
> 59 | <div>
| ^
60 | Hello world
61 | </div>
62 | );
at Parser.raise (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:6420:17)
at Parser.unexpected (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:7773:16)
at Parser.parseExprAtom (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8996:20)
at Parser.parseExprSubscripts (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8556:23)
at Parser.parseMaybeUnary (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8536:21)
at Parser.parseExprOps (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8402:23)
at Parser.parseMaybeConditional (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8375:23)
at Parser.parseMaybeAssign (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8325:21)
at Parser.parseParenAndDistinguishExpression (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:9133:28)
at Parser.parseExprAtom (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8917:21)
at Parser.parseExprSubscripts (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8556:23)
at Parser.parseMaybeUnary (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8536:21)
at Parser.parseExprOps (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8402:23)
at Parser.parseMaybeConditional (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8375:23)
at Parser.parseMaybeAssign (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8325:21)
at Parser.parseExpression (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:8275:23)
at Parser.parseReturnStatement (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10378:28)
at Parser.parseStatementContent (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10057:21)
at Parser.parseStatement (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10009:17)
at Parser.parseBlockOrModuleBlockBody (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10585:25)
at Parser.parseBlockBody (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10572:10)
at Parser.parseBlock (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10556:10)
at Parser.parseFunctionBody (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:9584:24)
at Parser.parseFunctionBodyAndFinish (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:9554:10)
at Parser.parseMethod (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:9508:10)
at Parser.pushClassMethod (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10987:30)
at Parser.parseClassMemberWithIsStatic (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10912:12)
at Parser.parseClassMember (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10851:10)
at /mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10806:14
at Parser.withTopicForbiddingContext (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:9884:14)
at Parser.parseClassBody (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10783:10)
at Parser.parseClass (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10757:22)
at Parser.parseStatementContent (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10051:21)
at Parser.parseStatement (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10009:17)
at Parser.parseBlockOrModuleBlockBody (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10585:25)
at Parser.parseBlockBody (/mnt/d/src/kapiche/node_modules/#babel/parser/lib/index.js:10572:10)
This is my webpack.config.js where I define my entry and output points.
// create proper string representing path to file
const path = require('path');
// files to export
let export_list = [];
// helpful log message for debugging
console.log('webpack watch starting for the files:\n');
// general files
const export_dict = {
'student': ['login'],
'teacher': ['login']
};
// loop through all directories and files in export dictionary
for (let [key, value] of Object.entries(export_dict)) {
for (let i = 0; i < export_dict[key].length; i++) {
// helpful log message for debugging
console.log(`entry:\t/kapiche/#kapiche_react/${key}/${value[i]}.jsx`);
console.log(`output:\t/kapiche/static/js/${key}/${value[i]}_compiled.js\n`);
// add object to export list
export_list.push(
{
entry: `./kapiche/#kapiche_react/${key}/${value[i]}.jsx`,
output: {
path: path.join(__dirname, `/kapiche/static/js/${key}/`),
filename: `${value[i]}_compiled.js`,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
}
)
}
}
console.log(export_list);
// list of exports
module.exports = export_list;
Here is the ReactJS file I am trying to compile (in jsx)
import React from 'react';
import ReactDOM from 'react-dom';
class LoginTeacher extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
componentDidMount() {
}
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(
<LoginTeacher/>,
document.getElementById('login'),
);
And finally, here is my package.json
{
"name": "kapiche",
"version": "1.0.0",
"description": "Promoting classroom communication",
"main": "webpack.config.js",
"scripts": {
"watch": "webpack --watch --mode production",
"start": "webpack-dev-server --open --hot --mode development",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jbseg/BlueSlide.git"
},
"author": "Joshua S, Riley C, Hannah Z, Xiangliang N",
"license": "MIT",
"bugs": {
"url": "https://github.com/jbseg/BlueSlide/issues"
},
"homepage": "https://github.com/jbseg/BlueSlide#readme",
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"sass": "^1.23.3",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"#material-ui/core": "^4.5.2",
"#material-ui/icons": "^4.5.1",
"chart.js": "^2.9.2",
"react": "^16.11.0",
"react-chartjs-2": "^2.8.0",
"react-dom": "^16.11.0",
"react-tabs": "^3.0.0",
"socket.io": "^2.3.0"
}
}
Any ideas what might be causing this error?
EDIT: Here is my .babelrc as well
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}

Answer 1

After a few hours of trying to figure this one out, I finally managed to catch the bug. It was a typo... yep, a programmer's worst enemy. I misspelled my .babelrc as .bablerc and that was the root of my issue. Thank you everyone for the feedback, I am going to go be embarrassed now...

Answer 2

Make sure you have imported the right thing !
the vs code has imported
import { Button , Modal } from "bootstrap";
You should import
import { Button , Modal } from "react-bootstrap";