Issue creating new project

[camdixon]

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

[evnseyed]

I have the same error

[dwjohnston]

Create react app is broken at the moment: #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(

)

// 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();

[kodyclemens]

Here is the contents of index.js that includes the proper render method argument:

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(
 <React.StrictMode>
 <App />
 </React.StrictMode>,
 document.getElementById("root")
);

// 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();

[camdixon]

When rerunning the create-react-app command on the website I now get a corrected installation. Good to go.