undefined error in MultiSelect2's Popover2

[HFmaS]

Environment

• Package version(s): @blueprintjs/select 4.5.0, 4.5.1
• React version: 16.14.0
• Browser(s): Chrome 103.0.5060.134 (Official Build) and Firefox 103.0 (64-bit), presumably others too

I'm making a new component and trying to use MultiSelect2. I've starting by providing only the required props (itemRenderer, items, onItemSelect, selectedItems, and tagRenderer), but I'm seeing an error inside MultiSelect2 which blows up the page: "Uncaught TypeError: placement is undefined". I tried passing explicit "placement" values through popoverProps and popoverContentProps, but neither seems to affect this issue. When I swap the original MultiSelect in for MultiSelect2, the error goes away, and the MultiSelect component renders as expected. What am I missing here?

utils.js:26 Uncaught TypeError: Cannot read properties of undefined (reading 'split') at getBasePlacement (utils.js:26:22) at getTransformOrigin (utils.js:61:25) at Popover2._this.renderPopover (popover2.js:177:101) at InnerPopper.render (Popper.js:190:91) at finishClassComponent (react-dom.development.js:17160:31) at updateClassComponent (react-dom.development.js:17110:24) at beginWork (react-dom.development.js:18620:16) at HTMLUnknownElement.callCallback (react-dom.development.js:188:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16) at invokeGuardedCallback (react-dom.development.js:292:31) getBasePlacement @ utils.js:26 getTransformOrigin @ utils.js:61 Popover2._this.renderPopover @ popover2.js:177 render @ Popper.js:190 finishClassComponent @ react-dom.development.js:17160 updateClassComponent @ react-dom.development.js:17110 beginWork @ react-dom.development.js:18620 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 beginWork$1 @ react-dom.development.js:23203 performUnitOfWork @ react-dom.development.js:22154 workLoopSync @ react-dom.development.js:22130 performSyncWorkOnRoot @ react-dom.development.js:21756 scheduleUpdateOnFiber @ react-dom.development.js:21188 updateContainer @ react-dom.development.js:24373 eval @ react-dom.development.js:24758 unbatchedUpdates @ react-dom.development.js:21903 legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757 render @ react-dom.development.js:24840 renderReactDOM @ main.jsx:94 eval @ main.jsx:91 ./src/main/javascript/main.jsx @ main.1f2a76635b8884398c62.js:30524 webpack_require @ main.1f2a76635b8884398c62.js:20 eval @ client:2 0 @ main.1f2a76635b8884398c62.js:31353 webpack_require @ main.1f2a76635b8884398c62.js:20 (anonymous) @ main.1f2a76635b8884398c62.js:84 (anonymous) @ main.1f2a76635b8884398c62.js:87 react-dom.development.js:19527 The above error occurred in the component: in InnerPopper (created by Context.Consumer) in Popper (created by Blueprint4.Popover2) in Manager (created by Blueprint4.Popover2) in Blueprint4.Popover2 (created by Blueprint4.QueryList) in Blueprint4.QueryList (created by Blueprint4.MultiSelect2)

[adidahiya]

@HFmaS can you reproduce the issue in a code sandbox (linked from the issue template)?

[HFmaS]

Interesting, the template didn't pop up for me when I created this issue initially, maybe because this was my first time opening an issue?

Unfortunately, I wasn't able to reproduce this behavior in the code sandbox, so I guess this behavior is due to an unexpected interaction with one of the other packages we're importing or an issue with how webpack is bundling our code.

[adidahiya]

@HFmaS one thing you try is making sure you're on the latest version of @blueprintjs/core and @blueprintjs/select

[aeslaughter]

@HFmaS Any resolution for this? I am hitting this error as well.

[HFmaS]

@HFmaS Any resolution for this? I am hitting this error as well.

It was an issue with react-popper. The package-lock.json was pulling in the wrong version, presumably due to one of the other libraries we're using. Adding react-popper 2.2.4 to our package.json dependencies fixed it.