React+Webpack+Babel: Module parse failed: Unexpected token "<" - reactjs

Question

I'm setting up a React app (my first), and I've been following this tutorial when I run webpack, I get the following error (pointing to the space immediately before the '<':
PS C:\...\frontend> npm run dev
> frontend#1.0.0 dev C:\...\frontend
> webpack --mode development --entry ./src/index.js --output-path ./build/frontend
asset main.js 4.77 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 1.34 KiB
./src/index.js 34 bytes [built] [code generated]
./src/components/app.js 1.31 KiB [built] [code generated] [1 error]
ERROR in ./src/components/app.js 36:12
Module parse failed: Unexpected token (36:12)
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(
> <ul>
| {this.state.data.map(refugee => {
| return (
# ./src/index.js 1:0-34
webpack 5.58.1 compiled with 1 error in 159 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend#1.0.0 dev: `webpack --mode development --entry ./src/index.js --output-path ./build/frontend`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
As far as I can tell, it's a problem with babel not properly transpiling my app.js file, but for the life of me I can't figure out why it's throwing an error when it gets to the '<' (or maybe the space before the '<'? IDK)
Here's my package.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development --entry ./src/index.js --output-path ./build/frontend",
"build": "webpack --mode production --entry ./src/index.js --output-path ./static/frontend"
},
"author": "",
"license": "ISC",
"dependencies": {
"#popperjs/core": "^2.10.2"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"#babel/preset-stage-3": "^7.8.3",
"babel-cli": "^6.26.0",
"babel-loader": "^8.2.2",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.3.0",
"eslint": "^7.32.0",
"expose-loader": "^3.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"set-value": "^4.1.0",
"style-loader": "^3.3.0",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}
Here's my webpack.config.js:
const Path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const Webpack = require('webpack');
const { WebpackError } = require('webpack');
module.exports = {
entry: {
app: Path.resolve(__dirname,'./src/index.js')
},
output: {
path: Path.resolve(__dirname, './build'),
filename: 'js/[name].js',
},
resolve:{
modules: [Path.join(__dirname,'src'), 'node_modules'],
alias: {
react:Path.join(__dirname,'node_modules','react'),
}
},
optimization:{
splitChunks:{
chunks:'all',
name:'vendors',
}
},
plugins: [
new HtmlWebPackPlugin({
template: Path.resolve(__dirname,'./src/index.html')
}),
// new Webpack.ProvidePlugin({
// $:"jquery",
// jQuery:'jquery',
// Popper:['#popperjs/core','default']
// }),
],
module:{
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
'style-loader',
"eslint-loader"
],
query: {
presets:["#babel/react", "#babel/env"]
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
]
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|svg)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
},
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery"],
},
},
]
}
}
Here's my index.js:
import App from "./components/app"
and my app.js:
import React, { Component } from "react";
import { render } from "react-dom";
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
loaded: false,
placeholder: "loading"
};
};
componentDidMount() {
fetch("api/refugee")
.then(response => {
if (response.status >400) {
return this.setState(() => {
return { placeholder: "Something went wrong!"};
});
}
return response.json();
})
.then(data => {
this.setState(() => {
return {
data,
loaded: true,
};
});
});
}
render() {
return(
<ul>
{this.state.data.map(refugee => {
return (
<li key={refugee.id}>
{refugee.full_name}
</li>
);
})}
</ul>
);
}
}
export default App;
const container = document.getElementById("app");
render(<App />, container);
I am completely at a loss.
FWIW, here's a picture of my directory of my app
Edit:
On a whim, I tried completely removing the module.rules for .js files (instructing webpack to use 'babel-loader', and the error is completely the same. Seems relevant, but I have no idea what it means...
Edit 2:
I forgot to include my .babelrc file:
{
"presets": [
"#babel/preset-env", "#babel/preset-react"
]
}
Edit 3:*
I tried 2 additional things:
I removed the portion of app.js that had <, and the error just pointed to the next < (at render(, container). Webpack ran find when I removed that < as well.
I installed babel-preset-2015 and added ES2015 to my presets in .babelrc. No change in the error message.

Answer 1

Figured it out: I had placed webpack.config.js in the folder webpack/webpack.config.js. I still have no idea how to configure webpack to run if it's placed in a folder within the root directory. Any advice would be appreciated.