Peer dependency warnings

[NiGhTTraX]

Describe the bug

Doing a fresh install results in a lot of peer dep warnings.

Did you try recovering your dependencies?

❯ yarn --version              
1.22.0

Which terms did you search for in User Guide?

peer dependency warning

Environment

react-scripts@5.0.0.

Steps to reproduce

1. yarn create react-app my-app

Expected behavior

No warnings of any kind.

Actual behavior

warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".                                                                                                           
warning "react-scripts > tailwindcss@3.0.16" has unmet peer dependency "autoprefixer@^10.0.2".      
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.0" has unmet peer dependency "typescript@>= 2.7".
warning "react-scripts > webpack-dev-server > http-proxy-middleware@2.0.2" has unmet peer dependency "@types/express@^4.17.13".                
warning "react-scripts > eslint-config-react-app > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev |
| >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".                                                                                                                                                   

[naavis]

I am encountering the same issue with yarn 1.22.15. As far as I have understood, there are differences in how Yarn and NPM look for peer dependencies, and NPM doesn't have this issue. But anyway, I'd expect react-scripts to install the needed peer dependencies, and not leave it up to the user of react-scripts.

[NiGhTTraX]

pnpm 6.31 yields the same warnings:

 WARN  Issues with peer dependencies found
.
├─┬ @testing-library/user-event
│ └── ✕ missing peer @testing-library/dom@>=7.21.4
└─┬ react-scripts
  ├── ✕ missing peer typescript@"^3.2.1 || ^4"
  ├─┬ eslint-config-react-app
  │ ├─┬ @typescript-eslint/eslint-plugin
  │ │ ├── ✕ missing peer typescript@"*"
  │ │ └─┬ @typescript-eslint/type-utils
  │ │   ├── ✕ missing peer typescript@"*"
  │ │   └─┬ @typescript-eslint/utils
  │ │     └─┬ @typescript-eslint/typescript-estree
  │ │       ├── ✕ missing peer typescript@"*"
  │ │       └─┬ tsutils
  │ │         └── ✕ missing peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
  │ ├─┬ @typescript-eslint/parser
  │ │ └── ✕ missing peer typescript@"*"
  │ └─┬ eslint-plugin-flowtype
  │   ├── ✕ missing peer @babel/plugin-syntax-flow@^7.14.5
  │   └── ✕ missing peer @babel/plugin-transform-react-jsx@^7.14.9
  ├─┬ react-dev-utils
  │ └─┬ fork-ts-checker-webpack-plugin
  │   └── ✕ missing peer typescript@">= 2.7"
  └─┬ tailwindcss
    └── ✕ missing peer autoprefixer@^10.0.2
Peer dependencies that should be installed:
  @babel/plugin-syntax-flow@^7.14.5              autoprefixer@^10.0.2                           
  @babel/plugin-transform-react-jsx@^7.14.9      typescript@">=3.2.1 <4.0.0 || >=4.0.0 <5.0.0"  
  @testing-library/dom@>=7.21.4                  

[bestickley]

Could eslint-plugin-flowtype be made an optionalDependency for eslint-config-react-app? I use TypeScript for type checking and would prefer not to have warnings about it. Maybe other "non-core" dependencies could be marked as optionalDependencies too? Technically the typescript related packages could be considered "non-core" and marked as optional as well.

[lensbart]

I’m using Yarn 3.2.0 and get the following warning:

➤ YN0002: │ eslint-config-react-app@npm:7.0.0 [07f45] doesn't provide @babel/plugin-syntax-flow (p19435), requested by eslint-plugin-flowtype
➤ YN0002: │ eslint-config-react-app@npm:7.0.0 [07f45] doesn't provide @babel/plugin-transform-react-jsx (p74774), requested by eslint-plugin-flowtype

which can be muted by adding the following to .yarnrc.yml:

packageExtensions:
  # awaiting fix: https://github.com/facebook/create-react-app/issues/11982
  'eslint-plugin-flowtype@*':
    peerDependenciesMeta:
      '@babel/plugin-syntax-flow':
        optional: true
      '@babel/plugin-transform-react-jsx':
        optional: true

[bestickley]

@lensbart, excellent workaround. I used PNPM which also allows for this behavior. Thank you!

[T3rm1]

Would be nice if someone can fix this so we don't need a workaround.

[NiGhTTraX]

FYI: pnpm@7 now has strict-peer-dependencies: true by default (pnpm/pnpm#4427) and errors out when installing CRA.

[ithilbor]

Someone knows if it got fixed? Because i'm still encountering this issue in my CRA with node 16.14.2 and cra 18.0.1