haoxins / react-flatpickr

flatpickr for React
MIT License
598 stars 102 forks source link

Lazy loading crashes Flatpickr #210

Open Kovbo opened 1 year ago

Kovbo commented 1 year ago

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.

ZachSaucier commented 1 year ago

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