Popover modifiers error from PopperJs validateModifiers

[jmangel]

• components: Popover
• reactstrap version #8.9.0
• import method es
• react version #16.3.1
• bootstrap version #4.5.0

What is happening?

Even a simple Popover with no specified modifiers fails PopperJS's modifier validation with console errors: PopperJS: an invalid property has been provided to the "undefined" modifier, valid properties are "name", "enabled", "phase", "fn", "effect", "requires", "options"; but "offset" was provided PopperJS: an invalid property has been provided to the "undefined" modifier, valid properties are "name", "enabled", "phase", "fn", "effect", "requires", "options"; but "flip" was provided PopperJS: an invalid property has been provided to the "undefined" modifier, valid properties are "name", "enabled", "phase", "fn", "effect", "requires", "options"; but "preventOverflow" was provided

It appears that Popper thinks that what should be the name of the modifier (in the first example, "offset") is an invalid key inside of a modifier whose name appears to be undefined.

What should be happening?

Modifiers should be passed to PopperJS correctly to be applied correctly by PopperJS. PopperJS's validateModifiers should receive the modifiers as an array of modifiers, rather than as an object

Steps to reproduce issue

1. import { Popover } from "reactstrap"
2. render a simple popover with no modifiers

Error message in console

PopperJS: an invalid property has been provided to the "undefined" modifier, valid properties are "name", "enabled", "phase", "fn", "effect", "requires", "options"; but "offset" was provided.
eval @ validateModifiers.js:66
eval @ validateModifiers.js:12
validateModifiers @ validateModifiers.js:11
setOptions @ createPopper.js:104
createPopper @ createPopper.js:233
eval @ usePopper.js:93
commitHookEffectListMount @ react-dom.development.js:19731
commitLifeCycles @ react-dom.development.js:19787
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
unbatchedUpdates @ react-dom.development.js:21909
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
eval @ index.tsx:20
./src/index.tsx @ main.js:4105
__webpack_require__ @ main.js:64
eval @ client:2
0 @ main.js:4116
__webpack_require__ @ main.js:64
(anonymous) @ main.js:199
(anonymous) @ main.js:202
Show 4 more frames

Code

<Popover
  target="root"
  isOpen
>
  <PopoverBody>
    I'm a popover!
  </PopoverBody>
</Popover>

[jmangel]

I still don't know what was causing this, but it is now resolved for me. The only notable step before its resolution was cleaning my node_modules, which I actually did in an attempt to manually install a slightly newer patch version of react-popper than was required by reactstrap. However, after the installs, I was able to revert to the default version and the modifiers were accepted.

[kyletsang]

Sounds like you might've installed Popper v2, which isn't compatible with reactstrap

[strarsis]

Popper v2 expects a different structure for the modifier configuration object: https://popper.js.org/docs/v2/migration-guide/#10-update-modifiers