`TypeError: fn is not a function` thrown with v5.x and 6.x

[acelaya]

Describe the bug

I just updated from v4.x to v6.x (I also tried v5.x before), and noticed the calendar was not being properly positioned, and it didn't take into consideration the available space above and below.

Then I saw these errors all over the console:

Uncaught (in promise) TypeError: fn is not a function
    at computePosition (react-datepicker.js?v=fc9deb51:678:15)

I might be wrong, but this seems to be part of @floating-ui/react code, but bundled together with react-datepicker? I'm wondering if perhaps the dependencies should not be bundled, as downstream projects will be installing them anyway.

This is probably unrelated with the issue, though.

To Reproduce

I'm trying to put together a minimum project reproducing this, to determine if there's any kind of conflict with other deps.

In the meantime, you can also see the error triggered in my project's tests, here https://github.com/shlinkio/shlink-web-component/actions/runs/7766045038/job/21181419223?pr=248 (this is dependabot's PR to update to v6.x)

Expected behavior

Calendar popover gets properly positioned.

Screenshots

You can see the wrong positioning here (ignore the triangle. I'm almost sure that's a conflict with other CSS in the page and I will sort that out myself)

Grabación de pantalla desde 2024-02-04 10-50-29.webm

Notice it renders over the input, instead of below/above it.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Google Chrome
• Version: 120

[brightsider]

Same happened with me

[Tomekmularczyk]

Same in NEXTjs 14.0.1

Uncaught (in promise) TypeError: fn is not a function
    at computePosition (floating-ui.core.mjs:114:15)
computePosition @ floating-ui.core.mjs:114
Promise.then (async)
eval @ floating-ui.react-dom.mjs:210
autoUpdate @ floating-ui.dom.mjs:622
eval @ floating-ui.react-dom.mjs:246
commitHookEffectListMount @ react-dom.development.js:20904
commitHookLayoutEffects @ react-dom.development.js:21014
commitLayoutEffectOnFiber @ react-dom.development.js:21212

[tamasv-di]

Same happened to me, for our project the solution was to pass an array of Middleware from @floating-ui/dom to popperModifiers instead of Popper modifiers (the types from @types/react-datepicker seem outdated)

[nikitadubyk]

@tamasv-di can you please share code example?

[tamasv-di]

@nikitadubyk Can't share the whole file unfortunately, but here are the relevant changes

on v4:

<DatePicker
...
popperModifiers={[
 {
  name: "preventOverflow",
  enabled: true,
  options: {
   padding: 0,
   boundary: document.body
  }
 }
]}
...
/>

on v6

import {shift, Middleware} from "@floating-ui/dom";
import {Modifier, StrictModifierNames} from "react-popper";
...
const middlewares = useMemo<Middleware[]>(() => [shift()], []);
...    
<DatePicker
...
popperModifiers={middlewares as unknown as ReadonlyArray<Modifier<StrictModifierNames>>}
...
/>

[nikitadubyk]

@tamasv-di thanks!

[Tomekmularczyk]

In my case it helped to change

popperModifiers={[
  {
    name: "offset",
    options: {
      offset: [0, -6],
    },
  },
]}

to

import { autoPlacement, offset } from "@floating-ui/dom";

popperModifiers={[
  autoPlacement({
    alignment: "start",
    autoAlignment: false,
  }),
  offset({ mainAxis: -6, crossAxis: 0 }),
]}

it's basically the popperModifiers prop that has to be updated after upgrading.