create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

CRA fails with npm error in yarn project using "workspace:" dependencies

Open hwinkler opened this issue 1 year ago • 0 comments

Describe the bug

In a yarn project, when CRA gets to the "Installing template dependencies using npm..." part, it uses, well, npm.

npm seems unable to understand dependencies of the form

    "module": "workspace:*"

in package.json.

yarn dlx create-react-app appname  #same problem using npx

fails when run in a project with such workspace:* dependencies.

In a multi-workspace project, CRA seems to process all the peer-level workspaces (via npm despite the fact that it is running in a yarn project). npm encounters dependencies of that workspace:* form, and errors out with

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

Environment

$ npx create-react-app --info

  System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 4.2.2 - ~/.nvm/versions/node/v20.12.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
  Browsers:
    Chrome: 124.0.6367.119
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    react:  18.3.1 
    react-dom:  18.3.1 
    react-scripts:  5.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

File hierarchy:

package.json
workspace1
    package.json
workspace2
    package.json

top-level package.json:

{
  "name": "cra-yarn",
  "packageManager": "[email protected]",
  "workspaces": [
    "workspace1",
    "workspace2",
    "cra"
  ]
}

workspace1/package.json:

{
  "name": "workspace1",
  "packageManager": "[email protected]",
  "dependencies": {
    "workspace2": "workspace:*"
  }
}

workspace2/package.json:

{
  "name": "workspace2",
  "packageManager": "[email protected]"
}

Run yarn in the top level directory, then execute:

npx create-react-app cra

Expected behavior

Create an app in the cra subdirectory with no errors.

Actual behavior

$ npx create-react-app cra   # similarly for yarn dlx create-react-app cra

Creating a new React app in /path/to/tmp/cra-yarn/cra.

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

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

When you run using yarn dlx, you'll see:

Installing template dependencies using npm...
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

Note that the package.json files declare that they use yarn. So it would make sense for the "nstalling template dependencies" action also to use yarn?

Reproducible demo

I'm attaching an archive with the above files. cra-yarn.tar.gz

hwinkler avatar May 08 '24 23:05 hwinkler