Skip to content

Commit bee82ef

Browse files
authored
docs: replace create-react-app with create-vite in dlx example (#6792)
## What's the problem this PR addresses? - closes #6695 The https://yarnpkg.com/cli/dlx#examples instructions fail: > Use create-react-app to create a new React app : ```shell corepack enable yarn cd $(mktemp -d) yarn dlx create-react-app ./my-app ``` ```text $ yarn dlx create-react-app ./my-app ! Corepack is about to download https://repo.yarnpkg.com/4.6.0/packages/yarnpkg-cli/bin/yarn.js ? Do you want to continue? [Y/n] ➤ YN0000: · Yarn 4.6.0 ➤ YN0000: ┌ Resolution step ➤ YN0085: │ + create-react-app@npm:5.1.0, ansi-styles@npm:4.3.0, balanced-match@npm:1.0.2, block-stream@npm:0.0.9, and 60 more. ➤ YN0000: └ Completed in 0s 706ms ➤ YN0000: ┌ Fetch step ➤ YN0013: │ 64 packages were added to the project (+ 2.97 MiB). ➤ YN0000: └ Completed in 0s 815ms ➤ YN0000: ┌ Link step ➤ YN0000: └ Completed ➤ YN0000: · Done in 1s 717ms create-react-app is deprecated. You can find a list of up-to-date React frameworks on react.dev For more info see:https://react.dev/link/cra This error message will only be shown once per install. /tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:5739 throw EROFS(`open '${p}'`); ^ Error: EROFS: read-only filesystem, open '/node_modules/create-react-app/given-deprecation-warning' at makeError$1 (/tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:769:24) at EROFS (/tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:796:10) at ZipFS.prepareWriteFile (/tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:5739:13) at ZipFS.writeFileSync (/tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:5723:55) at /tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:3055:22 at /tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:3304:66 at ZipOpenFS.getMountSync (/tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:3412:14) at ZipOpenFS.makeCallSync (/tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:3304:17) at ZipOpenFS.writeFileSync (/tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:3052:17) at VirtualFS.writeFileSync (/tmp/xfs-4a58d078/dlx-14138/.pnp.cjs:2028:24) { code: 'EROFS' } Node.js v22.15.0 ``` ## How did you fix it? In [packages/plugin-dlx/sources/commands/dlx.ts](https://github.com/yarnpkg/berry/blob/master/packages/plugin-dlx/sources/commands/dlx.ts) replaced use of `create-react-app` in examples using instead [create-vite](https://www.npmjs.com/package/create-vite). To test, execute the following on Ubuntu `22.04.2` LTS, Node.js `22.15.0` LTS, Corepack `0.32.0`: ```shell corepack enable yarn cd $(mktemp -d) yarn dlx create-vite ``` take all defaults and confirm there is no error from Yarn, then execute: ```shell cd vite-project corepack use yarn@stable yarn yarn dev ``` Open http://localhost:5173 in web browser and confirm that Vite + TypeScript shows. For documentation: with `yarn/berry` and PR branch `dlx-example` ```shell cd packages/docusaurus yarn start ``` View http://localhost:3000/cli/dlx#examples in a browser and check that the text changes are showing correctly. ## Checklist - [X] I have read the [Contributing Guide](https://yarnpkg.com/advanced/contributing). - [X] I have set the packages that need to be released for my changes to be effective. - [x] I will check that all automated PR checks pass before the PR gets reviewed.
1 parent a08e883 commit bee82ef

File tree

2 files changed

+25
-2
lines changed

2 files changed

+25
-2
lines changed

.yarn/versions/28abe8f1.yml

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
releases:
2+
"@yarnpkg/cli": patch
3+
"@yarnpkg/plugin-dlx": patch
4+
5+
declined:
6+
- "@yarnpkg/plugin-compat"
7+
- "@yarnpkg/plugin-constraints"
8+
- "@yarnpkg/plugin-essentials"
9+
- "@yarnpkg/plugin-init"
10+
- "@yarnpkg/plugin-interactive-tools"
11+
- "@yarnpkg/plugin-nm"
12+
- "@yarnpkg/plugin-npm-cli"
13+
- "@yarnpkg/plugin-pack"
14+
- "@yarnpkg/plugin-patch"
15+
- "@yarnpkg/plugin-pnp"
16+
- "@yarnpkg/plugin-pnpm"
17+
- "@yarnpkg/plugin-stage"
18+
- "@yarnpkg/plugin-typescript"
19+
- "@yarnpkg/plugin-version"
20+
- "@yarnpkg/plugin-workspace-tools"
21+
- "@yarnpkg/builder"
22+
- "@yarnpkg/core"
23+
- "@yarnpkg/doctor"

packages/plugin-dlx/sources/commands/dlx.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export default class DlxCommand extends BaseCommand {
2020
Using \`yarn dlx\` as a replacement of \`yarn add\` isn't recommended, as it makes your project non-deterministic (Yarn doesn't keep track of the packages installed through \`dlx\` - neither their name, nor their version).
2121
`,
2222
examples: [[
23-
`Use create-react-app to create a new React app`,
24-
`yarn dlx create-react-app ./my-app`,
23+
`Use create-vite to scaffold a new Vite project`,
24+
`yarn dlx create-vite`,
2525
], [
2626
`Install multiple packages for a single command`,
2727
`yarn dlx -p typescript -p ts-node ts-node --transpile-only -e "console.log('hello!')"`,

0 commit comments

Comments
 (0)