webpack.config.js
const path = require("path");
const { DefinePlugin } = require("webpack");
const dotenv = require("dotenv");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/build"),
filename: "index.js",
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
new DefinePlugin({
"process.env": JSON.stringify(dotenv.config().parsed),
}),
],
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
],
},
};
Error
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration has an unknown property 'postcss'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsO utputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them.
above is the error and the code I have written.
And these are the dependencies I have added
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev
npm install react-router-dom
Check public > index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABC</title>
</head>
<body>
<div id ="root"> </div>
</body>
</html>
Check app.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CoursePage from "./pages/Course";
import Home from "./pages/Home";
import StudentPage from "./pages/Student";
const App = () => {
return (
<div>
<Router>
<Routes>
<Route path="/student" element={<StudentPage />} />
<Route path="/course" element={<CoursePage />} />
<Route path="/" element={<Home />} />
</Routes>
</Router>
</div>
);
};
export default App;
Check index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
Compare the document.getElemantbyId("root"), root is already defind in the index.html finally check the package.json file
"scripts": {
"start": "webpack-dev-server --mode development --open --hot --port 3000",
"build": "webpack --mode production"