Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error using CRA with Chakra UI JS template on Windows 10

See original GitHub issue

🐛 Bug report

Error using CRA with Chakra UI JS template on Windows 10

💥 Steps to reproduce

run npx create-react-app my-app --template @chakra-ui

🧐 Expected behavior

To be able to start a new CRA project with Chakra UI

🌍 System information

Software Version(s)
Chakra UI 1.0
React 17.0.1
Node 15.4.0
npm 7.0.15
OS Windows 10

📝 Additional information

  • Error log:
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   peer react@"17.0.1" from react-dom@17.0.1
npm WARN   node_modules/react-dom
npm WARN     react-dom@"^17.0.1" from the root project
npm WARN     4 more (framer-motion, @testing-library/react, ...)
npm WARN   52 more (the root project, @chakra-ui/react, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from @reach/auto-id@0.11.0
npm WARN node_modules/@chakra-ui/hooks/node_modules/@reach/auto-id
npm WARN   @reach/auto-id@"0.11.0" from @chakra-ui/hooks@1.0.1
npm WARN   node_modules/@chakra-ui/hooks
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   peer react@"17.0.1" from react-dom@17.0.1
npm WARN   node_modules/react-dom
npm WARN     react-dom@"^17.0.1" from the root project
npm WARN     4 more (framer-motion, @testing-library/react, ...)
npm WARN   52 more (the root project, @chakra-ui/react, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.14.0" from react-dom@16.14.0
npm WARN node_modules/@chakra-ui/hooks/node_modules/react-dom
npm WARN   peer react-dom@"^16.8.0" from @reach/auto-id@0.11.0
npm WARN   node_modules/@chakra-ui/hooks/node_modules/@reach/auto-id
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   peer react@"17.0.1" from react-dom@17.0.1
npm WARN   node_modules/react-dom
npm WARN     react-dom@"^17.0.1" from the root project
npm WARN     4 more (framer-motion, @testing-library/react, ...)
npm WARN   52 more (the root project, @chakra-ui/react, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from react-remove-scroll@2.4.0
npm WARN node_modules/react-remove-scroll
npm WARN   react-remove-scroll@"2.4.0" from @chakra-ui/modal@1.2.1
npm WARN   node_modules/@chakra-ui/modal
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   peer react@"17.0.1" from react-dom@17.0.1
npm WARN   node_modules/react-dom
npm WARN     react-dom@"^17.0.1" from the root project
npm WARN     4 more (framer-motion, @testing-library/react, ...)
npm WARN   52 more (the root project, @chakra-ui/react, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from react-focus-lock@2.4.1
npm WARN node_modules/react-focus-lock
npm WARN   react-focus-lock@"2.4.1" from @chakra-ui/focus-lock@1.0.1
npm WARN   node_modules/@chakra-ui/focus-lock
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   peer react@"17.0.1" from react-dom@17.0.1
npm WARN   node_modules/react-dom
npm WARN     react-dom@"^17.0.1" from the root project
npm WARN     4 more (framer-motion, @testing-library/react, ...)
npm WARN   52 more (the root project, @chakra-ui/react, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from @reach/alert@0.11.0
npm WARN node_modules/@reach/alert
npm WARN   @reach/alert@"0.11.0" from @chakra-ui/toast@1.1.1
npm WARN   node_modules/@chakra-ui/toast
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom@17.0.1
npm WARN node_modules/react-dom
npm WARN   react-dom@"^17.0.1" from the root project
npm WARN   4 more (framer-motion, @testing-library/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8.0" from @reach/alert@0.11.0
npm WARN node_modules/@reach/alert
npm WARN   @reach/alert@"0.11.0" from @chakra-ui/toast@1.1.1
npm WARN   node_modules/@chakra-ui/toast
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   peer react@"17.0.1" from react-dom@17.0.1
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"^17.0.1" from the root project
npm ERR!     peer react-dom@">=16.8" from framer-motion@2.9.5
npm ERR!     node_modules/framer-motion
npm ERR!       framer-motion@"^2.9.4" from the root project
npm ERR!       8 more (@chakra-ui/react, @chakra-ui/checkbox, ...)
npm ERR!     3 more (@testing-library/react, @chakra-ui/portal, @chakra-ui/toast)
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   51 more (@chakra-ui/react, @emotion/react, @emotion/styled, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @reach/utils@0.11.0
npm ERR! node_modules/@reach/alert/node_modules/@reach/utils
npm ERR!   @reach/utils@"0.11.0" from @reach/alert@0.11.0
npm ERR!   node_modules/@reach/alert
npm ERR!     @reach/alert@"0.11.0" from @chakra-ui/toast@1.1.1
npm ERR!     node_modules/@chakra-ui/toast
npm ERR!       @chakra-ui/toast@"1.1.1" from @chakra-ui/react@1.0.3
npm ERR!       node_modules/@chakra-ui/react
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 C:\Users\ugoro\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ugoro\AppData\Local\npm-cache\_logs\2020-12-17T19_27_41_805Z-debug.log
`npm install --save @chakra-ui/react@^1.0.0 @emotion/react@^11.0.0 @emotion/styled@^11.0.0 react-icons@^3.0.0 framer-motion@^2.9.4 @testing-library/jest-dom@^5.9.0 @testing-library/react@^10.2.1 @testing-library/user-event@^12.0.2 web-vitals@^0.2.2` failed
  • Creating a new CRA project without Chakra UI template or with other templates (tested with redux toolkit) works perfectly
  • Tried creating a new CRA project with no template and then running npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion --legacy-peer-deps and it seems to have worked

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:10
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
circuloncommented, Jan 10, 2021

Same issue found on macOS with React 17.0.1 used the --legacy-peer-deps and I can now start the project 😉

2reactions
UgoRomicommented, Dec 28, 2020

Hi, did you find out what the issue was? I’m getting this same error on my Mac.

Nothing yet, but someone seems to be working on this, so hopefully it will get fixed soon Thank you @with-heart

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to fix these errors while installing chakra-ui and react app?
This works for me! npx create-react-app my-app --template @chakra-ui** --legacy-peer-deps.
Read more >
Create React App - Chakra UI
Create React App allows users to create a project using a template, which determines the files and dependencies included with the generated project....
Read more >
How to Use Chakra UI with Next.js and React - freeCodeCamp
To get a good idea of how Chakra works, we're going to essentially rebuild the default Next.js template with Chakra UI components. This...
Read more >
React Tutorial for Beginners - Ordinary Coders
Node.js handles the data storage while React loads in the UI ... react-dom, and react-scripts with cra-template will be installed.
Read more >
npx create-react-app my-app DOES NOT work : r/reactjs - Reddit
I also tried installing create-react-app globally using npm i -g ... 37 error command failed 38 error command C:\WINDOWS\system32\cmd.exe /d ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Export Text as Txt to help with automatic imports

Next page

Image is not working as expected