I wanted divide my project into two bundles. Here's my simplified App.js
import React, { Suspense, useState, useEffect, useRef } from 'react';
import loadGif from './images/731.gif';
const HospitalDashboard = React.lazy(() => import('./HospitalDashboard'));
const OperatorDashboard = React.lazy(() => import('./OperatorDashboard'));
function App () {
const [credentials, setCredentials] = useState(null);
return (
<Suspense fallback={<img className='load' src={loadGif}/>}>
{credentials.role == 'operator' ?
<OperatorDashboard/> :
<HospitalDashboard/>}
</Suspense>
);
}
export default App;
and here's my simplified index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js?version=256"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<title>Dashboard</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Both in OperatorDashboard and HospitalDashboard I am using daterangepicker followingly:
import $ from 'jquery';
...
useEffect(()=>{
$('#datePicker').daterangepicker(initOptions,onCallback)
},[])
In HospitalDashboard everything works fine but in OperatorDashboard I am getting this error: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).daterangepicker is not a function
It is somehow related to React.lazy and bundles but I don't know how to solve it. If I use ordinary import without React.lazy, everything works fine again. Thanks for help!