Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React 18 conflict dependencies #63

Closed
Aqro opened this issue Aug 24, 2022 · 8 comments · Fixed by #64
Closed

React 18 conflict dependencies #63

Aqro opened this issue Aug 24, 2022 · 8 comments · Fixed by #64
Labels
bug Something isn't working

Comments

@Aqro
Copy link

Aqro commented Aug 24, 2022

I can't run npm install anymore once I installed react-ogl in a clean Next project due to conflicting dependencies between React 18 and React ^17. What am I missing?

NPM version: 8.18.0
Node version: 16.15.0

The log:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-native@0.64.3
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.2 || ^18.0.0-0" from next@12.2.5
npm ERR!   node_modules/next
npm ERR!     next@"12.2.5" from the root project
npm ERR!   peer react@"^18.2.0" from react-dom@18.2.0
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^17.0.2 || ^18.0.0-0" from next@12.2.5
npm ERR!     node_modules/next
npm ERR!       next@"12.2.5" from the root project
npm ERR!     peerOptional react-dom@">=17.0" from react-ogl@0.6.4
npm ERR!     node_modules/react-ogl
npm ERR!       react-ogl@"^0.6.4" from the root project
npm ERR!     2 more (react-use-measure, the root project)
npm ERR!   8 more (react-ogl, react-use-measure, styled-jsx, suspend-react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from react-native@0.64.3
npm ERR! node_modules/react-native
npm ERR!   peer react-native@">=0.64.0-rc.0 || 0.0.0-*" from @react-native-community/cli@5.0.1
npm ERR!   node_modules/react-native/node_modules/@react-native-community/cli
npm ERR!     @react-native-community/cli@"^5.0.1-alpha.1" from react-native@0.64.3
npm ERR!   peerOptional react-native@">=0.64" from react-ogl@0.6.4
npm ERR!   node_modules/react-ogl
npm ERR!     react-ogl@"^0.6.4" from the root project
npm ERR!   1 more (@expo/browser-polyfill)
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.1
npm ERR! node_modules/react
npm ERR!   peer react@"17.0.1" from react-native@0.64.3
npm ERR!   node_modules/react-native
npm ERR!     peer react-native@">=0.64.0-rc.0 || 0.0.0-*" from @react-native-community/cli@5.0.1
npm ERR!     node_modules/react-native/node_modules/@react-native-community/cli
npm ERR!       @react-native-community/cli@"^5.0.1-alpha.1" from react-native@0.64.3
npm ERR!     peerOptional react-native@">=0.64" from react-ogl@0.6.4
npm ERR!     node_modules/react-ogl
npm ERR!       react-ogl@"^0.6.4" from the root project
npm ERR!     1 more (@expo/browser-polyfill)
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.
npm ERR!
npm ERR! See /Users/arno/.npm/eresolve-report.txt for a full report.

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.5",
    "ogl": "^0.0.97",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-ogl": "^0.6.4"
  },
  "devDependencies": {
    "@types/node": "18.7.13",
    "@types/react": "18.0.17",
    "@types/react-dom": "18.0.6",
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5",
    "typescript": "4.7.4"
  }
}
@CodyJasonBennett
Copy link
Member

CodyJasonBennett commented Aug 24, 2022 •
edited
Loading

The minimum supported version of react-native (an optional peer dep) doesn't support react 18 which is clashing here because of an NPM v7 policy.

You can try the --force or --legacy-peer-deps flags without issue in your case, but I'll try to push out a reconciler upgrade which will align everything to react 18+.
@CodyJasonBennett CodyJasonBennett added the bug Something isn't working label Aug 24, 2022
@CodyJasonBennett CodyJasonBennett mentioned this issue Aug 24, 2022
Merged
@CodyJasonBennett
Copy link
Member

Should be fixed in v0.7.0.
@Aqro
Copy link
Author

Aqro commented Aug 26, 2022 •
edited
Loading

Hi,
Thanks for the quick fix. Unfortunately, it hasn't changed anything as I still got issue when installing react-ogl on a fresh Next app. (--legacy-peer-deps worked like a charm but I'd like to avoid these extra parameters when deploying)

Here is the part of the code where the error appeared:

...
144 timing idealTree:node_modules/react-ogl Completed in 66ms
145 silly fetch manifest react@17.0.1
146 silly fetch manifest expo-asset@*
147 silly placeDep ROOT expo-2d-context@0.0.3 OK for: @expo/browser-polyfill@1.0.0 want: ^0.0.3
148 silly placeDep ROOT expo-asset@8.6.1 OK for: expo-2d-context@0.0.3 want: *
149 silly placeDep ROOT fbemitter@2.1.1 OK for: @expo/browser-polyfill@1.0.0 want: ^2.1.1
150 timing idealTree Completed in 245ms
151 timing command:i Completed in 247ms
152 verbose stack TypeError: Cannot read properties of null (reading 'children')
152 verbose stack     at CanPlaceDep.checkCanPlaceCurrent (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/can-place-dep.js:253:35)
152 verbose stack     at CanPlaceDep.checkCanPlace (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/can-place-dep.js:157:27)
152 verbose stack     at new CanPlaceDep (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/can-place-dep.js:114:26)
152 verbose stack     at PlaceDep.place (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:123:19)
152 verbose stack     at new PlaceDep (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/place-dep.js:73:10)
152 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:990:31
152 verbose stack     at Array.map (<anonymous>)
152 verbose stack     at Arborist.[buildDepStep] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:990:8)
152 verbose stack     at async Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:218:7)
152 verbose stack     at async Promise.all (index 1)
153 verbose cwd /Users/arno/Dev/my-app
154 verbose Darwin 21.6.0
155 verbose node v16.15.0
156 verbose npm  v8.18.0
157 error Cannot read properties of null (reading 'children')
158 verbose exit 1
159 timing npm Completed in 291ms
160 verbose unfinished npm timer reify 1661511638158
161 verbose unfinished npm timer reify:loadTrees 1661511638159
162 verbose unfinished npm timer idealTree:buildDeps 1661511638216
163 verbose unfinished npm timer idealTree:node_modules/@expo/browser-polyfill 1661511638401
164 verbose code 1
@CodyJasonBennett
Copy link
Member

CodyJasonBennett commented Aug 26, 2022 •
edited
Loading

I'll take another look at this, seems to be coming from a native-only polyfill. Unfortunately, it may not be very actionable on our end since NPM is misunderstanding peer deps and version ranges as per semver. I might suggest Yarn or a package manager that correctly handles this in the meantime.
@CodyJasonBennett CodyJasonBennett mentioned this issue Aug 26, 2022
Merged
@CodyJasonBennett
Copy link
Member

I removed the polyfill in v0.8.0 to sidestep these issues. Should be good now, we'll have to vendor polyfills like R3F does if we change our mind.
@Aqro
Copy link
Author

Aqro commented Aug 27, 2022

I feel like a chewing-gum stuck under your shoe but … 😬 npm install now works correctly but there is an issue with constants in the reconciler it doesn't find. 😅

error - Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/arno/Dev/my-app/node_modules/react-reconciler/constants' imported from /Users/arno/Dev/my-app/node_modules/react-ogl/dist/reconciler.mjs
Did you mean to import react-reconciler/constants.js?
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:437:11)
    at moduleResolve (node:internal/modules/esm/resolve:1009:10)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/'
@CodyJasonBennett CodyJasonBennett mentioned this issue Aug 27, 2022
Merged
@CodyJasonBennett
Copy link
Member

I fixed the last of the ESM issues in v0.8.1.
@CodyJasonBennett
Copy link
Member

This looks to be resolved on my end, but do let me know if there are any withstanding issues.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
2 participants
@Aqro @CodyJasonBennett