I follow React library manual and import component as following. The first two component rendering correct, The rest of Components throw error:
Component which rendering correct
http://localhost:8080/SMDB/generalAccess
Components throw Error
http://localhost:8080/static/js/872.98064dd6.chunk.js
build file inserted to Current project
<html>
<head>
<meta charset="ISO-8859-1">
<title>New Permissions</title>
<!-- This is landing page for Permission Tool frontend in React -->
<%@ include file="/jsp/includes/taglibs.jsp"%>
<script defer="defer" src="js/permissions/js/main.bd5c7e83.js"></script>
<link href="js/permissions/css/main.182d9765.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
</body>
</html>
App.js
import React, { Suspense, lazy } from 'react';
import logo from './logo.svg';
import './App.css';
import Mainpage from './PermissionTable/Pages-js/Mainpage';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { LoadingSpinner } from './PermissionTable/LoadingSpinner/LoadingSpinner';
const LazyGeneralAccess = lazy(() => import('./PermissionTable/Pages-js/GeneralAccess'));
const LazyBulkAccess = lazy(() => import('./PermissionTable/Pages-js/BulkAccess'));
const LazyUserAccess = lazy(() => import('./PermissionTable/UserAccess/UserAccess'));
const LazySetFieldAccess = lazy(() => import('./PermissionTable/SetFieldAccess/SetFieldAccess'));
const LazyProtocolAccess = lazy(() => import('./PermissionTable/ProtocolAccess/ProtocolAccess'));
const LazyProjectAccess = lazy(() => import('./PermissionTable/ProjectAccess/ProjectAccess'));
const LazyStudyAccess = lazy(() => import('./PermissionTable/StudyAccess/StudyAccess'));
function App () {
return (
<Router>
<div className="App">
<Mainpage />
<Suspense fallback={<LoadingSpinner /> }>
<Routes>
<Route path="SMDB/generalAccess" element={<LazyGeneralAccess />}></Route>
<Route path="SMDB/bulkAccess" element={<LazyBulkAccess />}></Route>
<Route path="SMDB/userAccess" element={<LazyUserAccess />}></Route>
<Route path="SMDB/setFieldAccess" element={<LazySetFieldAccess />}></Route>
<Route path="SMDB/protocolAccess" element={<LazyProtocolAccess />}></Route>
<Route path="SMDB/projectAccess" element={<LazyProjectAccess />}></Route>
<Route path="SMDB/studyAccess" element={<LazyStudyAccess />}></Route>
</Routes>
</Suspense>
</div>
</Router>
);
}
export default App;
As two component is rendering, I try to put rest of components to the same folder, it`s not help, for React app I use create-react-app, so my webpack is not visible, how can I fix that issue and why the same component with the same import some of them have no error and another one have!