diegoddox / react-redux-toastr

react-redux-toastr is a toastr message implemented with Redux
http://diegoddox.github.io/react-redux-toastr/
MIT License
752 stars 149 forks source link

Element type is invalid: expected a string When using Webpack 5 #266

Closed SamMorrowDrums closed 2 years ago

SamMorrowDrums commented 3 years ago

My setup is with WebPack 5 and ES Modules.

When doing the following as per usual I now get a failure:

<Provider store={store}>
  <div>
    ... other things like router ...
    // props are not required
    <ReduxToastr
      timeOut={4000}
      newestOnTop={false}
      preventDuplicates
      position="top-left"
      getState={(state) => state.toastr} // This is the default
      transitionIn="fadeIn"
      transitionOut="fadeOut"
      progressBar
      closeOnToastrClick/>
  </div>
</Provider>

The cause it is that there is an object of various exports being imported, so I have had to do:

<ReduxToastr.default
  ...
/>

This issue only occurred when upgrading WebPack. I assume it's in part to do with changes to module resolution, but thought this might at least help others who have the same issue:

diegoddox commented 2 years ago

My apologies for not getting back to you, I'm closing but feel free to re-open in case you need it.

SamMorrowDrums commented 2 years ago

@diegoddox no problem for me any longer. I'm not currently using it, however it might well be worth ensuring that things are exported correctly for Webpack 5 and native ES Modules, as I expect this will be a more popular use-case now than when I first tried.