Syntax Error React App, Issue with npm dependencies - reactjs

Question

I have a website that I've had up for maybe a couple of years now, and I think it's starting to get outdated. I haven't touched it in a while, so I'm not exactly sure what is going on with it. I'm not exactly sure what the issue is, but it might have to do with my webpack version, or maybe my react version, I'm not really sure.
The issue started because I was trying to run webpack --mode production because I wanted to remake the bundle.js file, and when I would run this command, the file wouldn't create the bundle.js. Eventually I somehow came to the conclusion that there was something wrong with my webpack version, and so I updated it to the most recent version that was compatible with my dependencies which was version 4.46.0. I tried the command again, and this time it gives me this error:
[0] ./src/index.js 666 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (6:4)
4 |
5 | ReactDOM.render(
> 6 | <App />,
| ^
7 | document.getElementById("root")
8 | );
I tried reinstalling different versions of babel-loader, but the least bad error seems to be with the version 7.1.5. I also tried deleting my node-modules and then running npm install. Here is my package.json:
{
"name": "mywebsite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"set-dev-server": "webpack-dev-server --open --mode development",
"start": "npm run build && npm run set-dev-server",
"deploy": "gh-pages -d dist",
"publish-demo": "npm run build && npm run deploy"
},
"repository": {
"type": "git",
"url": "git+my/github/link"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "my/github/link/issues"
},
"homepage": "my/github/link",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"file-loader": "^1.1.11",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^7.0.1",
"jquery": "^3.5.1",
"node-css": "^0.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"sass-loader": "^7.3.1",
"style-loader": "^0.21.0",
"styled-components": "^5.2.1",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#babel/core": "^7.13.8",
"babel-loader": "^7.1.5",
"css-loader": "^5.1.1",
"node-sass": "^5.0.0",
"schema-utils": "^3.0.0",
"webpack": "^4.46.0"
}
}
From what I found online the issue could also have to do with the webpack.config.js, but all of the issues I could find were from really old versions of webpack (2 or 3?), but anyways here is what I have in that file:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, "dist/index.html"),
filename: "index.html"
});
module.exports = {
entry: path.join(__dirname, "src/index.js"),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['env'] }
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack#1.x
disable: true, // webpack#2.x and newer
},
},
],
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'dist/'),
port: 3000,
publicPath: "http://localhost:3000/"
},
plugins: [ new webpack.HotModuleReplacementPlugin(), htmlWebpackPlugin ]
};

Answer 1

Looks like you are using a jsx token <> while your file is named index.js. Try naming it as index.jsx