Creating integration from CLI with NPM returns error on install step

[rebecamurillo]

Environment

OS: Ubuntu
Node : tested with 16 and 20
Npm : 8.19.4 and 10.2.3

Reproduction

Run npx @vue-storefront/cli create integration
Select Next framework and NPM package manager.

Describe the bug

Dependency issue with NPM. Known issue on multiple projects.
The override fixes the issue, which is already in the package.json.

I was able to fix by adding the react rependencies to the root package json.

{
  "name": "@vue-storefront/integration-boilerplate",
  "private": true,
  "license": "MIT",
  "scripts": {
    "vsf": "node vsf.mjs",
    "build": "lerna run build",
    "build:cli": "cd cli && yarn build",
    "dev": "concurrently --names \"Frontend,Middleware\" \"npm run dev:app\" \"npm run dev:middleware\"",
    "dev:app": "cd playground/app && npm run dev",
    "dev:middleware": "cd playground/middleware && npm run dev",
    "test": "lerna run test"
  },
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@loopmode/crosslink": "^0.4.0",
    "@rollup/plugin-babel": "^5.1.0",
    "@rollup/plugin-node-resolve": "^13.0.6",
    "@rollup/plugin-replace": "^2.3.3",
    "@types/jest": "^27.4.0",
    "@types/node": "^12.12.14",
    "@types/supertest": "~2.0.12",
    "concurrently": "^8.0.1",
    "cross-env": "^6.0.3",
    "jest": "^27.4.7",
    "lerna": "^6.5.1",
    "lint-staged": "^10.0.7",
    "msw": "^0.49.1",
    "nodemon": "^2.0.22",
    "rimraf": "^3.0.2",
    "rollup": "^2.59.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.34.1",
    "supertest": "~6.2.4",
    "ts-jest": "^27.1.3",
    "ts-node": "^8.4.1",
    "tslib": "^2.1.0",
    "typescript": "^4.2.2",
    "webpack-bundle-analyzer": "^3.5.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-json-view": "^1.21.3"
  },
  "engines": {
    "node": ">=16.x"
  },
  "workspaces": [
    "packages/*",
    "playground/*"
  ],
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "overrides": {
    "react-json-view": {
      "react": "$react",
      "react-dom": "$react-dom"
    }
  }
}

Additional context

The integration installs correctly with YARN package manager.

Logs

@rebecamurillo ➜ /workspaces/homestoresv-shop-sdk (main) $ npx @vue-storefront/cli create integration
┌  Welcome to Vue Storefront SDK Integration Boilerplate Generator!
│
◇  How we will name your integration?
│  npm-test
│
◇  What framework do you want to use?
│  Next
│
◇  What package manager do you want to use?
│  NPM
│
◇  Creating integration boilerplate in npm-test directory, using next framework...
│
◇  Integration boilerplate has been cloned successfully!
│
◇  SDK boilerplate has been cloned successfully!
│
◐  Installing SDK dependencies...      
Error installing dependencies: Error: Command failed with exit code 1: npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from [email protected]
npm ERR!   playground/app
npm ERR!     nuxt-app@undefined
npm ERR!     node_modules/nuxt-app
npm ERR!     [email protected]
npm ERR!     node_modules/next-app
npm ERR!       workspace playground/app from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^16.3.0 || ^15.5.4" from [email protected]
npm ERR! node_modules/react-json-view
npm ERR!   react-json-view@"^1.21.3" from [email protected]
npm ERR!   playground/app
npm ERR!     nuxt-app@undefined
npm ERR!     node_modules/nuxt-app
npm ERR!     [email protected]
npm ERR!     node_modules/next-app
npm ERR!       workspace playground/app 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 /home/codespace/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/codespace/.npm/_logs/2024-01-17T05_41_58_402Z-debug-0.log
    at makeError (/home/codespace/.npm/_npx/2af4553272673347/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/home/codespace/.npm/_npx/2af4553272673347/node_modules/execa/index.js:118:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async installDeps (/home/codespace/.npm/_npx/2af4553272673347/node_modules/@vue-storefront/cli/dist/utils/installDeps.js:18:9)
    at async installAppSdkDependencies (/home/codespace/.npm/_npx/2af4553272673347/node_modules/@vue-storefront/cli/dist/domains/create/integration/helpers/installAppSdkDependencies.js:6:5)
    at async GenerateSDK.run (/home/codespace/.npm/_npx/2af4553272673347/node_modules/@vue-storefront/cli/dist/commands/create/integration.js:34:9)
    at async GenerateSDK._run (/home/codespace/.npm/_npx/2af4553272673347/node_modules/@oclif/core/lib/command.js:80:22)
    at async Config.runCommand (/home/codespace/.npm/_npx/2af4553272673347/node_modules/@oclif/core/lib/config/config.js:301:25) {
  shortMessage: 'Command failed with exit code 1: npm install',
  command: 'npm install',
  escapedCommand: 'npm install',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: '',
  stderr: 'npm ERR! code ERESOLVE\n' +
    'npm ERR! ERESOLVE unable to resolve dependency tree\n' +
    'npm ERR! \n' +
    'npm ERR! While resolving: [email protected]\n' +
    'npm ERR! Found: [email protected]\n' +
    'npm ERR! node_modules/react\n' +
    'npm ERR!   react@"18.2.0" from [email protected]\n' +
    'npm ERR!   playground/app\n' +
    'npm ERR!     nuxt-app@undefined\n' +
    'npm ERR!     node_modules/nuxt-app\n' +
    'npm ERR!     [email protected]\n' +
    'npm ERR!     node_modules/next-app\n' +
    'npm ERR!       workspace playground/app from the root project\n' +
    'npm ERR! \n' +
    'npm ERR! Could not resolve dependency:\n' +
    'npm ERR! peer react@"^17.0.0 || ^16.3.0 || ^15.5.4" from [email protected]\n' +
    'npm ERR! node_modules/react-json-view\n' +
    'npm ERR!   react-json-view@"^1.21.3" from [email protected]\n' +
    'npm ERR!   playground/app\n' +
    'npm ERR!     nuxt-app@undefined\n' +
    'npm ERR!     node_modules/nuxt-app\n' +
    'npm ERR!     [email protected]\n' +
    'npm ERR!     node_modules/next-app\n' +
    'npm ERR!       workspace playground/app from the root project\n' +
    'npm ERR! \n' +
    'npm ERR! Fix the upstream dependency conflict, or retry\n' +
    'npm ERR! this command with --force, or --legacy-peer-deps\n' +
    'npm ERR! to accept an incorrect (and potentially broken) dependency resolution.\n' +
    'npm ERR! \n' +
    'npm ERR! See /home/codespace/.npm/eresolve-report.txt for a full report.\n' +
    '\n' +
    'npm ERR! A complete log of this run can be found in:\n' +
    'npm ERR!     /home/codespace/.npm/_logs/2024-01-17T05_41_58_402Z-debug-0.log',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
│
◓  Installing SDK dependencies....   
    Error: Command failed with exit code 127: npm run build
    sh: 1: lerna: not found

    > build
    > lerna run build