Support for React 18

[yaelsch]

We recently upgraded to react 18 and noticed that the drag and drop functionality of the content uploaded is effected. If you drop two files to the drop zone, only one appears in the list. I downgraded to react 17 and made sure that indeed the cause to the bug is react 18.

I noticed in your documentation that you currently don't support react 18, do you have plans to upgrade soon? Or alternatively, is there a way to workaround this issue?

[mgug01]

We also need React 18 and react-router-dom 6 support. Currently on React 18.2.0 and react-router-dom 6.4.2. I was able to install the package, but received about 82 errors about missing dependencies.

Are there any workarounds or do we have a roadmap for support?

[yaelsch]

@mgug01 for react-router-dom 6 we used a workaround:

In our package.json we have the following entries:

    "react-router-dom": "5.3.0",
    "react-router-dom-latest": "npm:[email protected]",

In our code we alway use react-router-dom-latest to import from the latest version, and the react-router-dom dependency is used by box.

I think this should solve the errors your mentioned, but you can still encounter runtime errors due to react-18 not being supported..

[mgug01]

Thanks so much @yaelsch I'll give this a try. I had just about given up on using the library at all, but this gives hope! Update: That seemed to help the react-router-dom issue, but I am still getting around 29 dependency errors. A lot of them should be in the package itself:

ERROR in ./node_modules/box-ui-elements/es/elements/content-explorer/ItemList.js 10:0-65
Module not found: Error: Can't resolve '@box/react-virtualized/dist/es/AutoSizer'

ERROR in ./node_modules/box-ui-elements/es/elements/content-explorer/ItemList.js 21:0-43
Module not found: Error: Can't resolve '@box/react-virtualized/styles.css'

ERROR in ./node_modules/box-ui-elements/es/elements/content-explorer/ItemGrid.js 44:0-65
Module not found: Error: Can't resolve '@box/react-virtualized/dist/es/AutoSizer'

I didn't see anything in the documentation about all these dependencies including others like, react-popper, react-measure, react-modal, react-teather.... I feel like this is also related to React 18, but interested to hear if you had to install these as well @yaelsch

[yaelsch]

@mgug01 , yes I see in my package.json the following dependencies

"@box/react-virtualized": "9.22.3-rc-box.2",
"react-popper": "2.2.5",
"react-measure": "2.5.2",
"react-modal": "3.14.4",
"react-tether": "1.0.0",

We added them a long time ago, before we used React 18, I don't remember the details, probably bumped into the same errors 🤷‍♀️

I agree that the documentation around it isn't that great.. Hopefully the maintaining team can clarify some of these requirements

[pmoresi-jsr]

How would we request for this ticket to be prioritized by Box?

[cglango]

@box/react-virtualized Does not support React 18. react-virtualized@^9.22.4 Does support React 18. According to this readme box is maintaining its own fork of this package. Where is the repository for that? (I don't see anything at https://github.com/box/react-virtualized) Can we contribute a PR to support React 18? Or can you update your package file there please?

[mgug01]

According to Box support, the best way for them to prioritize this update is by voting in the Pulse webpage: https://pulse.box.com/forums/909778-help-shape-the-future-of-box/suggestions/47771126-box-ui-elements-support-for-react-18

For all future visitors of this thread, please cast your vote. This package is still unusable for myself and many others.

[mgug01]

@greg-in-a-box Thank you for taking action on this request! Just began testing this again, although I am still running into a lot of dependency issues, even after running --legacy-peer-deps on install. Specifically with query-string a couple of others and then it also seems there are issues between the latest version of react-router-dom (which our app is using) and the version used by this package. Is there additional investigation being done to allow for React 18 support?