How to create a new project based on react@17

Question

I have just discovered React. I would like to install the latest stable version of React (17.0.2), but I can't create a new project based on React 17.

Can you help me?

$] npm --version
8.5.5

$] node --version
v16.15.0

I tried version 18, but many dependencies that I want to use are not up to date for version 18.

I did the following:

$] npx create-react-app sample-11
$] cd sample-11
$] cat package.json
{
  "name": "sample-11",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

Then I updated the package.json by replacing 18.1.0 to 17.0.2. I update this lines:

"react": "^17.0.2"
"react-dom": "^17.0.2"

rm -rf node_modules
rm package-lock.json
npm install

I get the error:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/[email protected]

So, I update the package.json by removing "@testing-library/react"

npm install

Ok.

npm start

Compiled with problems:

ERROR in ./src/index.js 5:0-40

Module not found: Error: Can't resolve 'react-dom/client' in '/home/dev/Projets/node-projects/sample-11/src'

Please don't edit questions to add things like "solved" to the title, or add the solution into the question. If you managed to solve the problem with Ahmet's answer, then please accept their answer. If you did something else to solve it, add an answer and accept that after the timeout. Accepting an answer is what marks a question as solved on Stack Overflow. — Mark Rotteveel
– Mark Rotteveel, Commented May 13, 2022 at 15:04

Ahmet Firat Keler · Accepted Answer · 2022-05-12 18:39:21Z

15

After making a new project, in package.json we update this line

"react": "^17.0.2"
"react-dom": "^17.0.2"

then delete package-lock.json and node_modules and then apply

npm install

answered May 12, 2022 at 18:39

Ahmet Firat Keler

4,2502 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

No Name Over a year ago

And remove @testing-library/[email protected]

Peter L Over a year ago

Likely need to update your index.js too. See this SO answer

Marckvaldo Wallas · Accepted Answer · 2022-07-15 23:27:48Z

9

try like this

"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"

},

answered Jul 15, 2022 at 23:27

Marckvaldo Wallas

911 silver badge1 bronze badge

Comments

Apoorv-2204 · Accepted Answer · 2023-10-23 15:15:07Z

1

import ReactDOM from 'react-dom';


ReactDOM.render(<React.StrictMode>
  <App /></React.StrictMode>, document.getElementById('root')
);

Actually it has been moved to reactdom.render

edited Oct 23, 2023 at 15:15

answered Oct 23, 2023 at 15:14

Apoorv-2204

112 bronze badges

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

No Name Over a year ago

Like Peter L, Apoorv fixe the ERROR in ./src/index.js 5:0-40 Module not found: Error: Can't resolve 'react-dom/client' See : stackoverflow.com/a/72642698/358006

Collectives™ on Stack Overflow

How to create a new project based on react@17

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related