Hey,
What if you refresh this page? You should see the error being logged out in there.
Jérémy.
Render Support, UTC+3
1 Like
There are two different versions of React being installed:
18.2.0from@testing-library/react@13.4.016.14.0fromreact-typical@0.1.3
These are in conflict with one another and must be resolved.
As the error log provides, you may attempt to resolve this by passing ---legacy-peer-deps to your npm install. The error also indicates that this may potentially cause issues.
However, there’s a newer method introduced in NPM v8.3.0 that appears to be preferred: overrides. Using overrides, you may override a dependency that is resolved for a specified package. Here, react-typical has a peer dependency of an earlier version of React.
To override this, you may add an overrides property to your project’s package.json:
"overrides": {
"react-typical": {
"react": "^18.0.0"
}
}
Thank you for your response, but I tried both of the solutions but nothing worked 
. Here is my package.json file:
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-typical": "^0.1.3",
"web-vitals": "^2.1.4",
"yarn": "^1.22.21"
},
"overrides": {
"react-typical": {
"react": "^18.0.0"
}
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"install": "npm install --legacy-peer-deps"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Trying it myself, I was noticing continued issues even with overrides and --legacy-peer-deps, too. After playing around with it for a bit, I settled on an iteration that seems to make npm happy without resorting to legacy peer dependencies.
This only contains enough of the configuration to illustrate the modifications necessary and so does not contain any of your other packages or configuration.
package.json
"devDependencies": {
"@testing-library/react": "^14.2.1"
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-typical": "^0.1.3"
},
"overrides": {
"react-typical": {
"react": "$react",
"react-dom": "$react-dom"
}
}
Output of npm ls --all
react-typical-test@1.0.0
├─┬ @testing-library/react@14.2.1
│ ├─┬ @babel/runtime@7.24.0
│ │ └── regenerator-runtime@0.14.1
│ ├─┬ @testing-library/dom@9.3.4
│ │ ├─┬ @babel/code-frame@7.23.5
│ │ │ ├─┬ @babel/highlight@7.23.4
│ │ │ │ ├── @babel/helper-validator-identifier@7.22.20
│ │ │ │ ├─┬ chalk@2.4.2
│ │ │ │ │ ├─┬ ansi-styles@3.2.1
│ │ │ │ │ │ └─┬ color-convert@1.9.3
│ │ │ │ │ │ └── color-name@1.1.3
│ │ │ │ │ ├── escape-string-regexp@1.0.5 deduped
│ │ │ │ │ └─┬ supports-color@5.5.0
│ │ │ │ │ └── has-flag@3.0.0
│ │ │ │ └── js-tokens@4.0.0 deduped
│ │ │ └─┬ chalk@2.4.2
│ │ │ ├─┬ ansi-styles@3.2.1
│ │ │ │ └─┬ color-convert@1.9.3
│ │ │ │ └── color-name@1.1.3
│ │ │ ├── escape-string-regexp@1.0.5
│ │ │ └─┬ supports-color@5.5.0
│ │ │ └── has-flag@3.0.0
│ │ ├── @babel/runtime@7.24.0 deduped
│ │ ├── @types/aria-query@5.0.4
│ │ ├─┬ aria-query@5.1.3
│ │ │ └─┬ deep-equal@2.2.3
│ │ │ ├─┬ array-buffer-byte-length@1.0.1
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ └── is-array-buffer@3.0.4 deduped
│ │ │ ├─┬ call-bind@1.0.7
│ │ │ │ ├─┬ es-define-property@1.0.0
│ │ │ │ │ └── get-intrinsic@1.2.4 deduped
│ │ │ │ ├── es-errors@1.3.0
│ │ │ │ ├── function-bind@1.1.2
│ │ │ │ ├── get-intrinsic@1.2.4 deduped
│ │ │ │ └─┬ set-function-length@1.2.2
│ │ │ │ ├─┬ define-data-property@1.1.4
│ │ │ │ │ ├── es-define-property@1.0.0 deduped
│ │ │ │ │ ├── es-errors@1.3.0 deduped
│ │ │ │ │ └── gopd@1.0.1 deduped
│ │ │ │ ├── es-errors@1.3.0 deduped
│ │ │ │ ├── function-bind@1.1.2 deduped
│ │ │ │ ├── get-intrinsic@1.2.4 deduped
│ │ │ │ ├── gopd@1.0.1 deduped
│ │ │ │ └─┬ has-property-descriptors@1.0.2
│ │ │ │ └── es-define-property@1.0.0 deduped
│ │ │ ├─┬ es-get-iterator@1.1.3
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ ├── get-intrinsic@1.2.4 deduped
│ │ │ │ ├── has-symbols@1.0.3
│ │ │ │ ├── is-arguments@1.1.1 deduped
│ │ │ │ ├── is-map@2.0.3
│ │ │ │ ├── is-set@2.0.3
│ │ │ │ ├─┬ is-string@1.0.7
│ │ │ │ │ └── has-tostringtag@1.0.2 deduped
│ │ │ │ ├── isarray@2.0.5 deduped
│ │ │ │ └─┬ stop-iteration-iterator@1.0.0
│ │ │ │ └─┬ internal-slot@1.0.7
│ │ │ │ ├── es-errors@1.3.0 deduped
│ │ │ │ ├── hasown@2.0.2 deduped
│ │ │ │ └── side-channel@1.0.6 deduped
│ │ │ ├─┬ get-intrinsic@1.2.4
│ │ │ │ ├── es-errors@1.3.0 deduped
│ │ │ │ ├── function-bind@1.1.2 deduped
│ │ │ │ ├── has-proto@1.0.3
│ │ │ │ ├── has-symbols@1.0.3 deduped
│ │ │ │ └─┬ hasown@2.0.2
│ │ │ │ └── function-bind@1.1.2 deduped
│ │ │ ├─┬ is-arguments@1.1.1
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ └─┬ has-tostringtag@1.0.2
│ │ │ │ └── has-symbols@1.0.3 deduped
│ │ │ ├─┬ is-array-buffer@3.0.4
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ └── get-intrinsic@1.2.4 deduped
│ │ │ ├─┬ is-date-object@1.0.5
│ │ │ │ └── has-tostringtag@1.0.2 deduped
│ │ │ ├─┬ is-regex@1.1.4
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ └── has-tostringtag@1.0.2 deduped
│ │ │ ├─┬ is-shared-array-buffer@1.0.3
│ │ │ │ └── call-bind@1.0.7 deduped
│ │ │ ├── isarray@2.0.5
│ │ │ ├─┬ object-is@1.1.6
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ └─┬ define-properties@1.2.1
│ │ │ │ ├── define-data-property@1.1.4 deduped
│ │ │ │ ├── has-property-descriptors@1.0.2 deduped
│ │ │ │ └── object-keys@1.1.1 deduped
│ │ │ ├── object-keys@1.1.1
│ │ │ ├─┬ object.assign@4.1.5
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ ├── define-properties@1.2.1 deduped
│ │ │ │ ├── has-symbols@1.0.3 deduped
│ │ │ │ └── object-keys@1.1.1 deduped
│ │ │ ├─┬ regexp.prototype.flags@1.5.2
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ ├── define-properties@1.2.1 deduped
│ │ │ │ ├── es-errors@1.3.0 deduped
│ │ │ │ └─┬ set-function-name@2.0.2
│ │ │ │ ├── define-data-property@1.1.4 deduped
│ │ │ │ ├── es-errors@1.3.0 deduped
│ │ │ │ ├── functions-have-names@1.2.3
│ │ │ │ └── has-property-descriptors@1.0.2 deduped
│ │ │ ├─┬ side-channel@1.0.6
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ ├── es-errors@1.3.0 deduped
│ │ │ │ ├── get-intrinsic@1.2.4 deduped
│ │ │ │ └── object-inspect@1.13.1
│ │ │ ├─┬ which-boxed-primitive@1.0.2
│ │ │ │ ├─┬ is-bigint@1.0.4
│ │ │ │ │ └── has-bigints@1.0.2
│ │ │ │ ├─┬ is-boolean-object@1.1.2
│ │ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ │ └── has-tostringtag@1.0.2 deduped
│ │ │ │ ├─┬ is-number-object@1.0.7
│ │ │ │ │ └── has-tostringtag@1.0.2 deduped
│ │ │ │ ├── is-string@1.0.7 deduped
│ │ │ │ └─┬ is-symbol@1.0.4
│ │ │ │ └── has-symbols@1.0.3 deduped
│ │ │ ├─┬ which-collection@1.0.2
│ │ │ │ ├── is-map@2.0.3 deduped
│ │ │ │ ├── is-set@2.0.3 deduped
│ │ │ │ ├── is-weakmap@2.0.2
│ │ │ │ └─┬ is-weakset@2.0.3
│ │ │ │ ├── call-bind@1.0.7 deduped
│ │ │ │ └── get-intrinsic@1.2.4 deduped
│ │ │ └─┬ which-typed-array@1.1.15
│ │ │ ├─┬ available-typed-arrays@1.0.7
│ │ │ │ └── possible-typed-array-names@1.0.0
│ │ │ ├── call-bind@1.0.7 deduped
│ │ │ ├─┬ for-each@0.3.3
│ │ │ │ └── is-callable@1.2.7
│ │ │ ├─┬ gopd@1.0.1
│ │ │ │ └── get-intrinsic@1.2.4 deduped
│ │ │ └── has-tostringtag@1.0.2 deduped
│ │ ├─┬ chalk@4.1.2
│ │ │ ├─┬ ansi-styles@4.3.0
│ │ │ │ └─┬ color-convert@2.0.1
│ │ │ │ └── color-name@1.1.4
│ │ │ └─┬ supports-color@7.2.0
│ │ │ └── has-flag@4.0.0
│ │ ├── dom-accessibility-api@0.5.16
│ │ ├── lz-string@1.5.0
│ │ └─┬ pretty-format@27.5.1
│ │ ├── ansi-regex@5.0.1
│ │ ├── ansi-styles@5.2.0
│ │ └── react-is@17.0.2
│ ├─┬ @types/react-dom@18.2.22
│ │ └─┬ @types/react@18.2.66
│ │ ├── @types/prop-types@15.7.11
│ │ ├── @types/scheduler@0.16.8
│ │ └── csstype@3.1.3
│ ├── react-dom@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ react-dom@18.2.0 overridden
│ ├─┬ loose-envify@1.4.0
│ │ └── js-tokens@4.0.0
│ ├── react@18.2.0 deduped
│ └─┬ scheduler@0.23.0
│ └── loose-envify@1.4.0 deduped
├─┬ react-typical@0.1.3 overridden
│ ├── @camwiegert/typical@0.1.1
│ ├─┬ prop-types@15.8.1
│ │ ├── loose-envify@1.4.0 deduped
│ │ ├── object-assign@4.1.1
│ │ └── react-is@16.13.1
│ ├── react-dom@18.2.0 deduped
│ └── react@18.2.0 deduped
└─┬ react@18.2.0 overridden
└── loose-envify@1.4.0 deduped
1 Like
thank you it worked but I got another error : Ran out of memory (used over 8GB) while building your code.
You likely want to open a new thread for that issue since
- it departs from the original issue
- this thread is marked as solved (which also means fewer people will look at it)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.