0

I am attempting to install React with Typescript, but I keep getting a weird error.

Please note myprojectname is the root repository directory that I am installing the React app into. For some reason it is trying to resolve myprojectname@0.1.0?

Error

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


added 1355 packages in 1m

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: myprojectname@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

My attempts to solve the issue

  1. Clearing then verifying npx cache
  2. Uninstalling create-react-app globally.
  3. Updating npm
  4. Updating node
  5. Running command with and without @latest
  6. Running command with and without --template typescript
  7. Using the --use-npm flag.
  8. Adding --legacy-peer-deps to command.
  9. Modifying command to create the react app in a nested directory.

Command

npx create-react-app@latest . --template typescript --use-npm

Outputs

  • npm -v > 8.6.0
  • node -v > v17.8.0

Package.json

{
  "name": "myprojectname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template-typescript": "1.1.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0"
  },
  "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"
    ]
  }
}
Luke Martin
  • 109
  • 7
  • Have you tried dropping `latest`? React 18 is still in beta, and it looks like the testing library doesn't like that. – super Apr 12 '22 at 06:19
  • Thank you, I've tried dropping `latest` and it still hasn't worked. Is there a specific version I should use? I'm also confused about why the testing library is there to begin with..? Does it come bundled with CRA? – Luke Martin Apr 12 '22 at 06:20
  • Yes, testing comes pre-configured with CRA, for your issue can you please share Package.JSON with us? – kyrolos magdy Apr 12 '22 at 06:24
  • @kyrolosmagdy I have shared the package.json file that CRA generates in the original post above. – Luke Martin Apr 12 '22 at 06:28
  • I think React get confused between the files, basically CRA will generate a new file in this case it will be called newprojectname so one way around this 1- please rename this file 2- please delete the old react app if their is any 3- try installing – kyrolos magdy Apr 12 '22 at 06:52
  • Seems to be a general problem with react-testing-library, a github issue can be found [here](https://github.com/facebook/create-react-app/issues/12278). – super Apr 12 '22 at 09:55
  • Unbelievable! They must have already merged in a fix, because I just tried the command again and it installed just fine. Thank you for your help guys. – Luke Martin Apr 12 '22 at 23:15

1 Answers1

0

The problem was caused by an issue with the testing library installed by default with React. It may have already been fixed.

Luke Martin
  • 109
  • 7