Conflicting Peer Dependencies on npm install

[christian-reichart]

Bug Report

When installing the packages, I do get warnings from npm, stating there are conflicting dependencies regarding React.

Expected Behavior

No conflicting dependencies when installing the node modules

Current Behavior

Full output:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peer react@">=16.3.0" from @emotion/[email protected]
npm WARN   node_modules/@emotion/core
npm WARN     @emotion/core@"^10.0.9" from [email protected]
npm WARN     node_modules/react-select
npm WARN   18 more (@faceless-ui/modal, @faceless-ui/scroll-info, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm WARN node_modules/mini-create-react-context
npm WARN   mini-create-react-context@"^0.4.0" from [email protected]
npm WARN   node_modules/react-router
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm WARN   node_modules/mini-create-react-context
npm WARN     mini-create-react-context@"^0.4.0" from [email protected]
npm WARN     node_modules/react-router
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/payload/node_modules/react
npm WARN   react@"^18.0.0" from [email protected]
npm WARN   node_modules/payload
npm WARN     payload@"^1.0.24" from the root project
npm WARN   1 more (react-dom)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^15.3.0 || ^16.0.0" from [email protected]
npm WARN node_modules/payload/node_modules/react-diff-viewer
npm WARN   react-diff-viewer@"^3.1.1" from [email protected]
npm WARN   node_modules/payload
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^15.3.0 || ^16.0.0" from [email protected]
npm WARN   node_modules/payload/node_modules/react-diff-viewer
npm WARN     react-diff-viewer@"^3.1.1" from [email protected]
npm WARN     node_modules/payload
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/payload/node_modules/react-dom
npm WARN   react-dom@"^18.0.0" from [email protected]
npm WARN   node_modules/payload
npm WARN     payload@"^1.0.24" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^15.3.0 || ^16.0.0" from [email protected]
npm WARN node_modules/payload/node_modules/react-diff-viewer
npm WARN   react-diff-viewer@"^3.1.1" from [email protected]
npm WARN   node_modules/payload
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^15.3.0 || ^16.0.0" from [email protected]
npm WARN   node_modules/payload/node_modules/react-diff-viewer
npm WARN     react-diff-viewer@"^3.1.1" from [email protected]
npm WARN     node_modules/payload

Possible Solution

is react-diff-viewer really needed? Maybe some dependencies can be just cut.

Detailed Description

Here is my package.json file after creating a project with the CLI:

{
  "name": "payload-starter-typescript",
  "description": "Blank template - no collections",
  "version": "1.0.0",
  "main": "dist/server.js",
  "license": "MIT",
  "scripts": {
    "dev:payload": "wait-on -v tcp:localhost:27017 && cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
    "dev": "run-p dev:database:start dev:payload",
    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
    "build:server": "tsc",
    "build": "run-s copyfiles build:payload build:server",
    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
    "format": "prettier --write ."
  },
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "payload": "^1.0.24"
  },
  "devDependencies": {
    "@types/express": "^4.17.9",
    "copyfiles": "^2.4.1",
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.6",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3",
    "wait-on": "^6.0.1"
  },
  "prettier": {
    "embeddedLanguageFormatting": "auto",
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "printWidth": 80,
    "proseWrap": "always",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "useTabs": false
  }
}

[TimHal]

As a workaround you might try npm i --force --legacy-peer-deps which should resolve the issue.
I think the react-diff-view is required as it is used to compare versions of documents side by side.

[christian-reichart]

@TimHal thanks, yeah i already did this as a workaround. But still wanted to mention this, since it's not a good experience having this issue right out of the box.

[TimHal]

Thank you :) also makes it easier to find the workaround here if someone doesn't know it yet.

[denolfe]

This seems to be a struggle for the node ecosystem in general right now.

There was some code added to create-payload-app that should add an .npmrc file to the project directory if yarn isn't available.

@christian-reichart Was this file written to the project root? Is yarn available in your path?

We definitely want to make starting a project seamless as possible.

[christian-reichart]

@denolfe thanks for looking into it. Actually we collaborated as a team on setting up the repo, so the package.json wasn't 100% clean to the cli setup.
I just tried the cli again in a clean environment and didn't encounter the above issue.

I'm still trying to figure out what is wrong in our project, however it seems that it's some local problem of mine. I'll keep you updated if I find out why.

[christian-reichart]

@denolfe we somehow had lost the .npmrc file you mentioned, with that it works without warnings! :)

Still for future reference, somehow npm 8.11.0 seems to cause dependency issues, which weren't there in older versions.
E.g. vuejs/vue-cli#7149

[christian-reichart]

@denolfe idea/suggestion:
maybe allow choosing between yarn and npm if yarn is available during the CLI setup.
My colleague set it up on his machine while having yarn installed. We use npm for all our projects though. So an option could be nice. :)

[denolfe]

@christian-reichart Thanks for the feedback 👍 We'll think this one over. Ideally, we'd like to reduce the number of prompts when using that tool.

[Mankee]

any update on this?

[denolfe]

@Mankee There is now a --use-npm flag that will force the usage of npm for create-payload-app.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.