Can't install Box UI Elements v15.0.0 - draft.js

[KevinForys]

Environment:

• Ubuntu 20.04.5 LTS
• Node 16.17.0
• NPM 8.15.0
• Box UI Elements 15.0.0
• React 17.0.2

Steps to reproduce the problem:

I'm currently trying a minimal sandbox app with the latest Box UI Elements, I'm blocked at the first step :

$ npm install --save box-ui-elements@15.0.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: Test Box UI Elements@0.0.1
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0" from draft-js@0.10.5
npm ERR! node_modules/draft-js
npm ERR!   draft-js@"^0.10.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

My package.jon (dependencies are a copy/paste from the peer dependencies of Box UI Elements package.json v15.0.0) :

{
  "name": "Test Box UI Elements",
  "version": "0.0.1",
  "description": "Starter template",
  "private": "true",
  "main": "index.js",
  "scripts": {
    "start": "",
    "build": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": { },
  "dependencies": {   
        "@box/cldr-data": "^34.2.0",
        "@box/react-virtualized": "9.22.3-rc-box.2",
        "@hapi/address": ">=2.0.0 <2.1.2",
        "axios": "^0.25.0",
        "classnames": "^2.2.5",
        "color": "^3.1.2",
        "draft-js": "^0.10.1",
        "filesize": "^4.1.2",
        "form-serialize": "^0.7.2",
        "formik": "^2.0.0",
        "ilib-tree-node": "^1.2.0",
        "immutable": "^3.7.4",
        "intl-messageformat": "^7.8.4",
        "js-sha1": "0.6.0",
        "jsuri": "^1.3.1",
        "lodash": "^4.17.5",
        "message-accumulator": "^2.1.1",
        "mousetrap": "^1.6.3",
        "pikaday": "^1.8.0",
        "query-string": "5.1.1",
        "react": "^17.0.2",
        "react-animate-height": "^2.0.8",
        "react-beautiful-dnd": "^9.0.2",
        "react-dom": "^17.0.1",
        "react-draggable": "^3.3.0",
        "react-immutable-proptypes": "^2.1.0",
        "react-intl": ">=2.9.0",
        "react-measure": "^2.3.0",
        "react-modal": "^3.8.1",
        "react-popper": "^1.3.4",
        "react-process-string": "^1.2.0",
        "react-responsive": "8.2.0",
        "react-router-dom": "^5.0.0",
        "react-scrollbars-custom": "^4.0.21",
        "react-tether": "^1.0.0",
        "react-textarea-autosize": "^7.1.0",
        "regenerator-runtime": "^0.13.2",
        "sanitize-html": "1.21.1",
        "sass": "1.34.1",
        "scroll-into-view-if-needed": "^2.2.20",
        "tabbable": "^1.1.2",
        "uuid": "^3.3.2"
  }
}

What went wrong? (Screenshots, console logs, or HAR files can be helpful here)

The peer dependencies of Box UI Elements 15.0.0 required React 17 and draft-js 0.10.1.

But draft-js 0.10.1 not accept React 17...

How can I avoid / fix properly this error? I want to stay on Box UI Elements 15 and React 17.

Thanks to the community 🙂

[greg-in-a-box]

@KevinForys, please downgrade your node version to v14 or lts/fermium. We haven't thoroughly tested box-ui-elements with higher version yet.

Let us know if anything else goes wrong and create a new issue.

[euidzero]

Hi there,

Tested with node 14 (official deb package) : the issue is the same.

npm i box-ui-elements

npm WARN box-ui-elements@15.0.0 requires a peer of react@^17.0.1 but none is installed. You must install peer dependencies yourself.`

then
npm i draft-js@^0.10.1

npm WARN draft-js@0.10.5 requires a peer of react@^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0 but none is installed. You must install peer dependencies yourself.

[greg-in-a-box]

@euidzero what version of react are you using? if youre using react 18, you may see errors.

[euidzero]

I did not install anything else just try to install box-ui-element in a fresh empty directory with npm.

[scottapow]

I had luck downgrading npm to 6.14.17

[greg-in-a-box]

@euidzero please ensure you are using node 14 with react 17, other major combinations may not properly work. If that doesn't work, can you provide your code so we can evaluate the issue since I cannot seem to reproduce the issue

[euidzero]

At that stage there's not even code. Simply installing both box-ui-elements 15 (requires react 17) and its dependencie draftjs@^0.10.1 (requires react <17) leads to an unsolvable conflict.

npm 6.14.17 will accept to install both packages with a warning : if the code does not use draftjs this might work.
later npm version will simply throw an unrecoverable error.

Getting rid of the draftjs dependency (no more maintained) would solve this.

[jprokay-tb]

@greg-in-a-box is there a roadmap for when the UI Elements will become compatible with the latest LTS version of Node?

[erikvanzijst]

Running into this as well. Our project is on React 17, but box-ui-element's dependency on (now defunct?) draft-js which doesn't support React 17 is breaking installation.

$ npm install box-ui-elements
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: my-app@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^17.0.1" from box-ui-elements@16.0.0
npm ERR!   node_modules/box-ui-elements
npm ERR!     box-ui-elements@"*" from the root project
npm ERR!   2 more (@box/react-virtualized, react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0" from draft-js@0.10.5
npm ERR! node_modules/draft-js
npm ERR!   peer draft-js@"^0.10.1" from box-ui-elements@16.0.0
npm ERR!   node_modules/box-ui-elements
npm ERR!     box-ui-elements@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[erikvanzijst]

Like others reported, I was able to get it installed on React 17 after downgrading to node 14 (lts/fermium) and npm 6.14.

[jprokay-tb]

Great to see this library supports node 18! Any updates on roadmap for react 18 support? We would be happy to help

[csutorasr]

The problem is probably that the dependencies of this package is not correct. The npm install using node 18 doesn't run without --legacy-peer-deps flag.

Like the internal box linter configuration package @box/frontend uses deprecated versions of packages, which were updated in this repository. These changes should be updated in the linter and other helper packages.

If I remove every development dependency for testing (I think those could be removed from the published package.json file BTW), then I still have conflicts in the dependencies of the package:

npm ERR! While resolving: box-ui-elements@0.0.0-semantically-released
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.1" from the root project
npm ERR!   peer react@"^15.3.0 || ^16.0.0-alpha || ^17.0.1" from @box/react-virtualized@9.22.3-rc-box.6
npm ERR!   node_modules/@box/react-virtualized
npm ERR!     peer @box/react-virtualized@"9.22.3-rc-box.6" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0-rc || ^16.0.0-rc || ^16.0.0" from draft-js@0.10.5
npm ERR! node_modules/draft-js
npm ERR!   peer draft-js@"^0.10.1" from the root project

To resolve the issue a deeper digging is needed to resolve issues with transient dependencies in the used packages.

Also, the react is a peer dependency for the compiled es modules. For the files in the compiled dist folder the react is included.
It would probably be a good idea to separate this two library. The current one for es modules and another one for the compiled ones with react. There the react is not a peer dependency. During building of the compiled project the job could reuse the es modules.