React-datepicker: Provider.render(): A valid React element (or null) must be returned.

[bittermanq]

Hello,
after updating of the react-datepicker to v 1.7.0 I started getting a following error in console during a rendering:

Uncaught Error: Provider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

I found that v 1.6.0 still works well, and this error appears in index.js, line: 2556 (PopperComponent.render()), where Manager from react-popper package is created. Maybe it is related somehow to commit "Upgrade react-popper (#1483)". Cannot investigate it deeply.

[sammusic27]

the same for me.

[arran549]

same - I rolled back to version 1.4.1 (current Latest) and it's working

[allanserra1612]

Even though I was returning the version to 1.4.1, it had not worked, I updated the react and react-dom to version 16.0.0 and it worked

I left the react-datepicker version as 1.4.1

[AlinaCapotaSG]

I have the same problem.

[briangleeson]

Run into the same issue as well when 1.7.0 was automatically picked up in our build pipeline. Rolling back to 1.6.0 works fine.

Based on the discussion above, could it be related to this commit that was merged after 1.6.0? Perhaps the Manager from react-popper can be undefined in some circumstances leading to the error from the OP

[ndinhphi]

The same for me. My version is 1.6.0

[sizeight]

Same here, up to version 1.6.0 works.

[martijnrusschen]

I tried reproducing this with the examples site, but was unable to reproduce the error. Does someone have some steps to reproduce, or is it under specific circumstances?

[sizeight]

I use react-datepicker and reactstrap in my project. Both have react-popper as a dependency. In react-datepicker v1.7.0 the react-popper depencency was upgraded from ^0.9.1 to ^1.0.2. This is the update that broke for me.
reacstrap has dependency for react-popper of ^0.10.4

It seems the conflicting dependencies on react-popper major versions causes problems.

There is an outstanding issue to get reactstrap compliant with react-popper 1.0.x and it mentions that using packages with dependencies on different versions of react-popper together causes confusing errors.
See -> https://github.com/reactstrap/reactstrap/issues/1197#issuecomment-430104025

[sizeight]

Problem solved. This could be the cause of issue for others as well?

It boils down to webpack configuration.

The issue I experienced related to a react-popper dependency conflict

I use react-datepicker and reactstrap in my project, both depend on differing versions of react-popper. react-datepicker upgraded its react-popper dependency in the 1.6.0 -> 1.7.0 release. This caused my code to break. The reason has to do with reactstrap depending on react-popper 0.10.4 and react-datepicker now depending on a new react-popper major release 1.x.x.

Why would their differing dependencies cause a crash, isn't NPM supposed to manage conflicts like this? Yes, but the issue is in my webpack config.

webpack.config.js

...
modules: [
  path.join(__dirname, '../node_modules')
]
...

This forces all modules to resolve from the root node_modules, causing reactstrap to reslove the wrong react-popper.

Change webpack.config.js to:

modules: [
  'node_modules'
]

This resolves node_modules hierarchically, ensuring react-datepicker and reactstrap each resolve to the correct dependency of react-popper.

Got the clue here -> https://github.com/webpack/webpack/issues/6505#issuecomment-366502560

[lakesare]

Having the same issue, @sizeight's solution didn't help me. And I don't have any popper.js-s conflicting.

[lakesare]

I believe it's not working for us because our React is < 16.0.2.
Popper's document says

Using React <=15 or Preact? The components created with them don't support to return fragments, this means that you will need to wrap <Reference> and <Popper> into a <div> to make react-popper work.

Whereas they probably meant to say <=16, because that's when Fragment support is added to React (https://reactjs.org/blog/2017/09/26/react-v16.0.html).

Here is a relevant react-popper issue: https://github.com/FezVrasta/react-popper/issues/183, and their codesandbox: https://codesandbox.io/s/zr96k9j483 which creates exactly the same error as we see.

[vladbalan]

React 15.6.1 - rolling back react-datepicker to 1.4.1 fixed this for me (1.8, 1.6 did not).

[shlaikov]

The same bug.
"react": "16.8.4", "react-dom": "16.8.4", "react-datepicker": "2.1.0"

[robertfwest]

@lakesare hit the nail on the head. However, you don't have to upgrade React just for this. Instead, you can patch the package to have a div around the Reference and Popper. See https://www.npmjs.com/package/patch-package for how to do it. The patch I created against react-datepicker 1.8.0 is here:
react-datepicker+1.8.0.zip

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.