I am using react inside my django application but now I am facing this error.module not found but module is there.
package.json
{
"name": "lead-manager",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch ./leadmanager/frontend/src/index.js --output-path ./leadmanager/frontend/static/frontend/main.js",
"build": "webpack --mode production ./leadmanager/frontend/src/index.js --output-path ./leadmanager/frontend/static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.19.3",
"@babel/preset-env": "^7.19.3",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
and App.js is following where console show me error
import React from "react";
import ReactDOM from "react-dom/client";
import Header from "./layout/Header";
import Dashboard from "./leads/Dashboard";
const App = () => {
return (
<div>
<Header />
<Dashboard />
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);
and project tree is following
├
── src
│ │ ├── components
│ │ │ ├── App.js
│ │ │ ├── Form.jsx
│ │ │ ├── layout
│ │ │ │ └── Header.js
│ │ │ ├── leads
│ │ │ │ └── Dashboard.jsx
│ │ │ └── Leads.jsx
│ │ └── index.js
│ ├── static
│ │ ├── css
│ │ │ └── style.css
│ │ └── frontend
│ │ └── main.js
│ │ └── main.js
│ ├── templates
│ │ └── frontend
│ │ └── index.html
according to my knowledge path is correct. Everything is fine Header component is working and Dashboard is not working.
npm install?