Quería dividir mi proyecto en dos paquetes. Aquí está mi App.js simplificado
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;y aquí está mi index.html simplificado
<!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>Tanto en OperatorDashboard como en HospitalDashboard estoy usando daterangepicker de la siguiente manera:
import $ from 'jquery'; ... useEffect(()=>{ $('#datePicker').daterangepicker(initOptions,onCallback) },[])En HospitalDashboard todo funciona bien, pero en OperatorDashboard recibo este error: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).daterangepicker no es una función
De alguna manera está relacionado con React.lazy y bundles, pero no sé cómo resolverlo. Si uso la importación ordinaria sin React.lazy, todo vuelve a funcionar bien. ¡Gracias por la ayuda!