[Bug]: <StrictMode> throws error when used with React 18

Is there an existing issue for this?

• I have searched the existing issues

Have you updated React FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

Hi there,

First off - thanks for an amazing file uploader! It’s rare to find a feature-rich package with top notch UX out of the box.

After upgrading to React 18 and the new createRoot(...) syntax, I am no longer able to load react-filepond. The following error messages are logged:

TypeError
null is not an object (evaluating 'referenceNode.parentNode.insertBefore')
(anonymous function)
[https://codesandbox.io/static/js/vendors~react-devtools-backend.759c29504.chunk.js:1:230840]()
u
[https://codesandbox.io/static/js/vendors~react-devtools-backend.759c29504.chunk.js:1:230954]()
n
[https://codesandbox.io/static/js/vendors~react-devtools-backend.759c29504.chunk.js:1:229900]()
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.

There also seems to be a typing issue with Typescript for onupdatefiles(...). I get the following issue:

Type 'Dispatch<SetStateAction<never[]>>' is not assignable to type '(files: FilePondFile[]) => void'.

I’m not sure if the two are related. I can clearly see that the class FilePondFile is exported from the library, but Typescript is complaining about the types from the getting started example. Specifying the type in useState<> doesn’t work, because typescript can’t find any exported member for FilePondFile that’s requested by the typechecker.

Any help figuring this out is greatly appreciated!

Thanks, H

Reproduction

Please check out this codesandbox I created to reproduce the issue. All of the specific versions used are detailed there.

Link to sandbox.

Environment

- Device: Macbook Pro, 16 inch (2020)
- OS: MacOS Monterey 12.3.1
- Browser: Chrome, Safari, Firefox
- React version: 18.0

[hug-0]

Thanks.

I’m still stumped. I also removed StrictMode and my sandbox now runs. But my actual project environment still throws the same error. I’m not using StrictMode there either.

React-FilePond runs well in React 17 in my project, but not at all in React 18.

Any suggestions on what I might go looking for to uncover the actual issue?

The log is

filepond.js:1457 Uncaught TypeError: Cannot read properties of null (reading 'insertBefore')
    at insertBefore (filepond.js:1457:1)
    at Object.replaceElement (filepond.js:12086:1)
    at createAppAtElement (filepond.js:12341:1)
    at createApp (filepond.js:12349:1)
    at create (filepond.js:12620:1)
    at FilePond.componentDidMount (react-filepond.js:85:1)
    at invokeLayoutEffectMountInDEV (react-dom.development.js:24926:1)
    at invokeEffectsInDev (react-dom.development.js:27142:1)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27118:1)
    at commitRootImpl (react-dom.development.js:26705:1)

EDIT: As a sidebar, I only get this issue in development mode. In my production build, filepond still works as expected.

[rikschennink]

Should be fixed in 7.1.2