react-flatpickr icon indicating copy to clipboard operation
react-flatpickr copied to clipboard

Lazy loading crashes Flatpickr

Open Kovbo opened this issue 2 years ago • 1 comments

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.

Kovbo avatar Mar 09 '23 15:03 Kovbo

I think this is the same issue as https://github.com/haoxins/react-flatpickr/issues/83

ZachSaucier avatar Apr 25 '23 21:04 ZachSaucier