react-flatpickr
react-flatpickr copied to clipboard
Lazy loading crashes Flatpickr
I have found a bug that crashes the application if you move from a page with Flatpickr to any lazy-loaded page.
Uncaught TypeError: Cannot read properties of null (reading 'destroy')
at DateTimePicker2.destroyFlatpickrInstance (index.js:112:23)
at DateTimePicker2.componentWillUnmount (index.js:168:12)
at callComponentWillUnmountWithTimer (react-dom.development.js:22683:16)
this.flatpickr.destroy(); // <- This line cause the issue
this.flatpickr = null;
It just cannot destroy a Flatpickr instance.
An example of a regular SPA using React Router Dom:
const PageTwo = lazy(() => import('../modules/wizards/WizardsPage'))
...
<Routes>
<Route
path='app/one'
element={<PageOne />} // Renders Flatpickr
/>
<Route
path='app/two'
element={<PageTwo />} //Lazy loading
/>
</Routes>
//PageOne
<div>
<Flatpickr placeholder='Click to select' />
<Link to='/app/two'>Move to Page Two</Link> // <- Crashes application
<div>
Regular import or just a prior visit to a lazy-loaded page solves the issue, but it's not ideal.
I think this is the same issue as https://github.com/haoxins/react-flatpickr/issues/83