Increment react and react-dom versions

[turisap]

This is a fix for the following error

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

The error appears when an application using this package (we use the Toolbox component from the @nebula/editor) has version 17 and higher of react and react-dom installed. The only way I've found for now is to decrement versions of react and react-dom which is not really desirable.

• incremented versions in the root package.json
• incremented versions in modules/editor

[CLAassistant]

All committers have signed the CLA.

[coveralls]

Pull Request Test Coverage Report for Build 2320

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 22.148%

---

Totals
Change from base Build 2307:	0.0%
Covered Lines:	1218
Relevant Lines:	5199

---

💛 - Coveralls

[ricricucit]

@turisap decrementing version does not seem to be enough.

I am now running on react and react-dom @16.14.0 and still getting:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

With stack trace pointing out src/toolbox.tsx:156:

  153 |   onSetModeConfig,
  154 |   onSetGeoJson,
  155 |   onImport,
> 156 | }: Props) {
  157 |   const [showConfig, setShowConfig] = React.useState(false);
  158 |   const [showImport, setShowImport] = React.useState(false);
  159 |   const [showExport, setShowExport] = React.useState(false);

Did you do anything else to actually skip this issue?

[ohlr]

@turisap @ricricucit any update on this? I just stumbled over this as well.. @turisap could you please sign the licensing agreement so this can get merged?

[ricricucit]

@ohlr Sorry for not following up here, but I made that working using an older React versions like @turisap was suggesting, but using npm-force-resolution.

FYI, in package.json:

  "dependencies": {
    ...
    "npm-force-resolutions": "0.0.10"
    ...
  }

  "resolutions": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }

not an ideal solution, but made it work. Eventually, I've implemented something custom.

[m-dad]

In my opinion React and React-DOM should be installed as dev-dependencies, so it would be compatible with all versions. We should point to the required React and React-DOM versions in peer-dependencies. If you agree I can send the pull request.

[turisap]

@ohlr sorry for not being up to date with this. I've just signed up the agreement and fixed email issues in my commits.

[geometrikal]

Any idea how to get this to work? I have the same problem with the editor sample.

[jodusan]

This error is still showing, any ideas?