Hi community,
Once I updated the version of forge/react to 10.0.0 I started to get the same React error in my app on the front-end part of it (love minified included 
):
react.production.min.js:19 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at U (react.production.min.js:19:404)
at t.useState (react.production.min.js:25:277)
at t.ModalsProvider (ModalContext.tsx:43:51)
at Fn (react-reconciler.production.min.js:81:137)
at wi (react-reconciler.production.min.js:199:332)
at Ki (react-reconciler.production.min.js:189:389)
at Wi (react-reconciler.production.min.js:189:320)
at Gi (react-reconciler.production.min.js:189:180)
at Ni (react-reconciler.production.min.js:182:245)
at Zt (react-reconciler.production.min.js:41:105)
Or this in normal language:
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://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
As far as it worked before the forge/react version update, I suppose that itâs related more to 1 or 3 options.
Here is the list of dependencies I use in my project from package.json:
"dependencies": {
"@forge/api": "^3.2.0",
"@forge/events": "^0.8.29",
"@forge/react": "^10.0.0",
"@forge/resolver": "^1.5.28",
"@forge/ui": "^1.11.0",
"http-status-codes": "^2.3.0",
"js-tiktoken": "^1.0.10",
"nanoid": "^5.0.6",
"openai": "^4.28.4"
},
"devDependencies": {
"@types/node": "^20.11.25"
}
Once I ran a test command to check current React dependencies and version used for react-dom found this:
PS C:\Users\Admin\workspace\just> npm list react-dom
just@0.3.0 C:\Users\Admin\workspace\just
`-- @forge/react@10.0.0
`-- @atlaskit/forge-react-types@0.5.2
+-- @atlaskit/dynamic-table@14.14.0
| +-- react-beautiful-dnd@12.2.0
| | `-- react-dom@16.14.0 deduped
| `-- react-dom@16.14.0
+-- @atlaskit/modal-dialog@12.10.8
| `-- @atlaskit/portal@4.4.0
| `-- react-dom@16.14.0 deduped
+-- @atlaskit/progress-tracker@8.5.8
| `-- react-transition-group@4.4.5
| `-- react-dom@16.14.0 deduped
+-- @atlaskit/select@17.2.0
| +-- react-dom@16.14.0 deduped
| +-- react-popper@2.3.0
| | `-- react-dom@16.14.0 deduped
| `-- react-select@5.8.0
| `-- react-dom@16.14.0 deduped
`-- @atlaskit/tooltip@18.1.2
`-- react-dom@16.14.0 deduped
And for react:
PS C:\Users\Admin\workspace\just> npm list react
just@0.3.0 C:\Users\Admin\workspace\just
`-- @forge/react@10.0.0
+-- @atlaskit/forge-react-types@0.5.2
| +-- @atlaskit/badge@15.2.4
| | +-- @atlaskit/ds-explorations@3.2.4
| | | `-- react@16.14.0 deduped
| | `-- react@16.14.0 deduped
| +-- @atlaskit/button@17.6.2
| | +-- @atlaskit/analytics-next@9.2.0
| | | +-- @atlaskit/analytics-next-stable-react-context@1.0.1
| | | | `-- react@16.14.0 deduped
| | | +-- react@16.14.0 deduped
| | | `-- use-memo-one@1.1.3
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/ds-lib@2.2.4
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/focus-ring@1.3.7
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/icon@22.1.1
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/interaction-context@2.1.3
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/theme@12.6.4
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/tokens@1.39.1
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/visually-hidden@1.2.4
| | | `-- react@16.14.0 deduped
| | +-- @emotion/react@11.11.4
| | | +-- @emotion/use-insertion-effect-with-fallbacks@1.0.1
| | | | `-- react@16.14.0 deduped
| | | `-- react@16.14.0 deduped
| | `-- react@16.14.0 deduped
| +-- @atlaskit/checkbox@13.0.1
| | `-- react@16.14.0 deduped
| +-- @atlaskit/code@15.1.0
| | `-- react@16.14.0 deduped
| +-- @atlaskit/dynamic-table@14.14.0
| | +-- @atlaskit/pagination@14.6.0
| | | `-- react@16.14.0 deduped
| | +-- react-beautiful-dnd@12.2.0
| | | +-- react-redux@7.2.9
| | | | `-- react@16.14.0 deduped
| | | `-- react@16.14.0 deduped
| | +-- react-dom@16.14.0
| | | `-- react@16.14.0 deduped
| | `-- react@16.14.0 deduped
| +-- @atlaskit/form@9.0.10
| | +-- react-uid@2.3.3
| | | `-- react@16.14.0 deduped
| | `-- react@16.14.0 deduped
| +-- @atlaskit/heading@1.6.0
| | `-- react@16.14.0 deduped
| +-- @atlaskit/lozenge@11.6.4
| | `-- react@16.14.0 deduped
| +-- @atlaskit/modal-dialog@12.10.8
| | +-- @atlaskit/blanket@13.0.0
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/layering@0.2.3
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/motion@1.5.1
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/portal@4.4.0
| | | `-- react@16.14.0 deduped
| | +-- react-focus-lock@2.11.2
| | | +-- react-clientside-effect@1.2.6
| | | | `-- react@16.14.0 deduped
| | | +-- react@16.14.0 deduped
| | | +-- use-callback-ref@1.3.1
| | | | `-- react@16.14.0 deduped
| | | `-- use-sidecar@1.1.2
| | | `-- react@16.14.0 deduped
| | +-- react-scrolllock@5.0.1
| | | `-- react@16.14.0 deduped
| | `-- react@16.14.0 deduped
| +-- @atlaskit/primitives@4.0.0
| | +-- @atlaskit/app-provider@1.0.0
| | | `-- react@16.14.0 deduped
| | +-- @atlaskit/css@0.0.3
| | | +-- @compiled/react@0.16.10
| | | | `-- react@16.14.0 deduped
| | | `-- react@16.14.0 deduped
| | `-- react@16.14.0 deduped
| +-- @atlaskit/progress-bar@2.0.1
| | `-- react@16.14.0 deduped
| +-- @atlaskit/progress-tracker@8.5.8
| | +-- react-transition-group@4.4.5
| | | `-- react@16.14.0 deduped
| | `-- react@16.14.0 deduped
| +-- @atlaskit/radio@6.0.2
| | `-- react@16.14.0 deduped
| +-- @atlaskit/range@7.1.7
| | `-- react@16.14.0 deduped
| +-- @atlaskit/section-message@6.4.21
| | `-- react@16.14.0 deduped
| +-- @atlaskit/select@17.2.0
| | `-- react@16.14.0 deduped
| +-- @atlaskit/tag@12.0.1
| | `-- react@16.14.0 deduped
| +-- @atlaskit/textarea@5.0.1
| | `-- react@16.14.0 deduped
| +-- @atlaskit/textfield@6.0.1
| | `-- react@16.14.0 deduped
| +-- @atlaskit/toggle@13.0.3
| | `-- react@16.14.0 deduped
| +-- @atlaskit/tooltip@18.1.2
| | +-- @atlaskit/popper@5.5.4
| | | `-- react@16.14.0 deduped
| | `-- react@16.14.0 deduped
| `-- react@16.14.0
+-- react-hook-form@7.51.0
| `-- react@16.14.0 deduped
+-- react-reconciler@0.29.0
| `-- react@18.2.0 deduped
+-- react-test-renderer@18.2.0
| +-- react-shallow-renderer@16.15.0
| | `-- react@16.14.0 deduped
| `-- react@18.2.0 deduped
`-- react@18.2.0
Pretty obvious that there are 2 different react versions included:
- 16.14.0 for react-dom
- 18.2.0 for react
It looks like both packages are provided by the same forge/react dependency and a bit frustrated with it.
Any ideas of what Iâm doing wrong to make it work? 
Adding React 18.2.0 to the dependencies obvs canât do anything until I do npm install. But that fails, as it seems many of the Atlaskit components are on a React 16 version and incompatible with 18.2.0. Any ideas?