Issue creating new project

Hello everyone, and thanks for helping. Here is the information you’ll need.

The command doesn’t work from the website. I’m not new to react, and this is a brand new project. I only did git init prior to running this command in a fresh directory.

Versions:

Camerons-MacBook-Pro:~ camerondixon$ npm -v
8.4.1
Camerons-MacBook-Pro:~ camerondixon$ npx -v
8.4.1
Camerons-MacBook-Pro:~ camerondixon$ node -v
v17.5.0

Output:

Camerons-MacBook-Pro:puzzles camerondixon$ npx create-react-app crossword

Creating a new React app in /Users/camerondixon/Desktop/puzzles/crossword.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1355 packages in 10s

171 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: crossword@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"<18.0.0" from @testing-library/react@12.1.5
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^12.0.0" from the root project
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/camerondixon/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/camerondixon/.npm/_logs/2022-04-12T06_08_59_197Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^12.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed
Camerons-MacBook-Pro:puzzles camerondixon$ ls -al
total 0
drwxr-xr-x   4 camerondixon  staff  128 Apr 12 02:08 .
drwxr-xr-x@ 23 camerondixon  staff  736 Apr 12 02:02 ..
drwxr-xr-x  12 camerondixon  staff  384 Apr 12 02:07 .git
drwxr-xr-x   9 camerondixon  staff  288 Apr 12 02:08 crossword
Camerons-MacBook-Pro:puzzles camerondixon$ rm -rf crossword/
Camerons-MacBook-Pro:puzzles camerondixon$ npx create-react-app crossword --legacy-peer-deps

Creating a new React app in /Users/camerondixon/Desktop/puzzles/crossword.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1355 packages in 21s

171 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: crossword@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"<18.0.0" from @testing-library/react@12.1.5
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^12.0.0" from the root project
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/camerondixon/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/camerondixon/.npm/_logs/2022-04-12T06_09_54_767Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^12.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed

[dwjohnston]

Create react app is broken at the moment: https://github.com/facebook/create-react-app/issues/12278

[dhruv-panchal211]

I found the solution.

create-react-app is not updating index.js as per the new react V18

so you need to modify index.js file as follow

import React from ‘react’; import {createRoot} from ‘react-dom/client’; import ‘./index.css’; import App from ‘./App’; // import reportWebVitals from ‘./reportWebVitals’;

const container = document.getElementById(‘root’); const root = createRoot(container)

root.render( <App /> )

// If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals // reportWebVitals();