--use-pnp still downlaods node_modules

[ChuksFestus]

so i decided to try pnp after @gaearon tweet about it and i still get node_modules

comand: npx create-react-app --use-pnp yarn version: 1.12.0

[arcanis]

Can you share the output of the command? I'd like to be sure that Yarn 1.12 is being used. My guts tell me that maybe your 1.12 binary is somehow shadowed by a different, older Yarn.

Other possibility: are you on Windows, by any chance?

[ChuksFestus]

ok here

[arcanis]

I mean ... you basically removed from your screenshot the only part I'm interested in ... 😅

Cf the following screenshot, where the Yarn version is clearly reported by create-react-app. This is what I need to see, not yarn -v (which might not be picked up by create-react-app for some reason):

[ChuksFestus]

lol ok

[jimthedev]

Wait, isn't the whole point that you wouldn't use npx and instead would use yarn for this? (wrong) If you do npx create-react-app then you are effectively using npm to install create-react-app. From there create-react-app just uses whatever package manager was used to install it. (/wrong) Correct me if I am wrong (I have been corrected), but, --use-pnp doesn't magically tell CRA to use yarn. Can you try (edit) yarn create react-app my-app --use-pnp?

[jimthedev]

Whoops I mean yarn create react-app my-app --use-pnp.

[gaearon]

From there create-react-app just uses whatever package manager was used to install it.

No, CRA will detect whether yarnpkg exists on the system, and use it if it's there.

[ChuksFestus]

@jimthedev you can't really do yarn create-react-app myapp actually

[jimthedev]

@gaearon Thank you for clearing that up. I've edited my post accordingly.

@ChuksFestus I wasn't using that command. Yarn has a create command which is similar to npx although the syntax is slightly different (note the lack of a hyphen). With that said, it seems that --use-pnp isn't working with it either. Here are the ones I was trying (and their output):

yarn create react-app --use-pnp pnp-app

``` yarn create v1.12.0-20181002.1248 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 📃 Building fresh packages... success Installed "create-react-app@2.0.3" with binaries: - create-react-app error: unknown option `--use-pnp' error Command failed. Exit code: 1 Command: /usr/local/bin/create-react-app Arguments: --use-pnp pnp-app Directory: /Users/jcummins/projects Output: info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command. ```

yarn create react-app pnp-app --use-pnp

``` yarn create v1.12.0-20181002.1248 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 📃 Building fresh packages... success Installed "create-react-app@2.0.3" with binaries: - create-react-app Creating a new React app in /Users/jcummins/projects/pnp-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... yarn add v1.12.0-20181002.1248 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 📃 Building fresh packages... success Saved lockfile. success Saved 6 new dependencies. info Direct dependencies ├─ react-dom@16.5.2 ├─ react-scripts@2.0.4 └─ react@16.5.2 info All dependencies ├─ babel-preset-react-app@5.0.3 ├─ react-dev-utils@6.0.4 ├─ react-dom@16.5.2 ├─ react-error-overlay@5.0.4 ├─ react-scripts@2.0.4 └─ react@16.5.2 ✨ Done in 20.55s. Initialized a git repository. Success! Created pnp-app at /Users/jcummins/projects/pnp-app Inside that directory, you can run several commands: yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd pnp-app yarn start Happy hacking! ✨ Done in 24.06s. ``` Unfortunately, while it runs without erroring it yields a directory containing node_modules ``` . .git README.md package.json src .. .gitignore node_modules public yarn.lock ```

Naturally yarn create is not the same as npx but whoever takes this on might also want to test with that slightly different syntax too.

[ChuksFestus]

yeah thats the thing @jimthedev don't know why there's a node_module

[arcanis]

@ChuksFestus What's inside? Some packages sometimes use the node_modules to contain some kind of cache, so even if it exists it doesn't mean Yarn actually uses it.

[jimthedev]

@arcanis I can't speak for @ChuksFestus but in the case of yarn create react-app pnp-app --use-pnp it is the entire world:

contents inside node_modules

``` @babel json-stable-stringify-without-jsonify @csstools json-stringify-safe @svgr json3 @types json5 @webassemblyjs jsonfile @xtuc jsonify abab jsprim abbrev jsx-ast-utils accepts killable acorn kind-of acorn-dynamic-import kleur acorn-globals last-call-webpack-plugin acorn-jsx lazy-cache acorn-walk lcid address left-pad ajv leven ajv-errors levn ajv-keywords load-json-file alphanum-sort loader-fs-cache ansi-colors loader-runner ansi-escapes loader-utils ansi-html locate-path ansi-regex lodash ansi-styles lodash._reinterpolate anymatch lodash.camelcase append-transform lodash.debounce aproba lodash.memoize are-we-there-yet lodash.sortby argparse lodash.tail aria-query lodash.template arr-diff lodash.templatesettings arr-flatten lodash.uniq arr-union loglevel array-equal loose-envify array-filter lower-case array-flatten lru-cache array-includes make-dir array-map makeerror array-reduce mamacro array-union map-age-cleaner array-uniq map-cache array-unique map-visit arrify math-random asap md5.js asn1 mdn-data asn1.js media-typer assert mem assert-plus memory-fs assign-symbols merge ast-types-flow merge-deep astral-regex merge-descriptors async merge-stream async-each methods async-limiter micromatch asynckit miller-rabin atob mime autoprefixer mime-db aws-sign2 mime-types aws4 mimic-fn axobject-query mini-css-extract-plugin babel-code-frame minimalistic-assert babel-core minimalistic-crypto-utils babel-eslint minimatch babel-extract-comments minimist babel-generator minipass babel-helpers minizlib babel-jest mississippi babel-messages mixin-deep babel-plugin-istanbul mixin-object babel-plugin-jest-hoist mkdirp babel-plugin-macros move-concurrently babel-plugin-syntax-object-rest-spread ms babel-plugin-transform-dynamic-import multicast-dns babel-plugin-transform-object-rest-spread multicast-dns-service-types babel-plugin-transform-react-remove-prop-types mute-stream babel-preset-jest nan babel-preset-react-app nanomatch babel-register natural-compare babel-runtime needle babel-template negotiator babel-traverse neo-async babel-types nice-try babylon no-case balanced-match node-forge base node-int64 base64-js node-libs-browser batch node-notifier bcrypt-pbkdf node-pre-gyp bfj node-releases big.js nopt binary-extensions normalize-package-data bluebird normalize-path bn.js normalize-range body-parser normalize-url bonjour npm-bundled boolbase npm-packlist brace-expansion npm-run-path braces npmlog brorand nth-check browser-process-hrtime num2fraction browser-resolve number-is-nan browserify-aes nwsapi browserify-cipher oauth-sign browserify-des object-assign browserify-rsa object-copy browserify-sign object-hash browserify-zlib object-keys browserslist object-visit bser object.getownpropertydescriptors buffer object.omit buffer-from object.pick buffer-indexof object.values buffer-xor obuf builtin-modules on-finished builtin-status-codes on-headers bytes once cacache onetime cache-base opn caller-path optimist callsites optimize-css-assets-webpack-plugin camel-case optionator camelcase original caniuse-api os-browserify caniuse-lite os-homedir capture-exit os-locale case-sensitive-paths-webpack-plugin os-tmpdir caseless osenv chalk p-defer chardet p-finally check-types p-is-promise chokidar p-limit chownr p-locate chrome-trace-event p-map ci-info p-try cipher-base pako circular-json parallel-transform class-utils param-case clean-css parse-asn1 cli-cursor parse-glob cli-width parse-json cliui parse-passwd clone-deep parse5 co parseurl coa pascalcase code-point-at path-browserify collection-visit path-dirname color path-exists color-convert path-is-absolute color-name path-is-inside color-string path-key colors path-parse combined-stream path-to-regexp commander path-type common-tags pbkdf2 commondir performance-now component-emitter pify compressible pinkie compression pinkie-promise concat-map pkg-dir concat-stream pkg-up confusing-browser-globals pluralize connect-history-api-fallback pn console-browserify pnp-webpack-plugin console-control-strings portfinder constants-browserify posix-character-classes contains-path postcss content-disposition postcss-attribute-case-insensitive content-type postcss-calc convert-source-map postcss-color-functional-notation cookie postcss-color-hex-alpha cookie-signature postcss-color-mod-function copy-concurrently postcss-color-rebeccapurple copy-descriptor postcss-colormin core-js postcss-convert-values core-util-is postcss-custom-media cosmiconfig postcss-custom-properties create-ecdh postcss-custom-selectors create-hash postcss-dir-pseudo-class create-hmac postcss-discard-comments cross-spawn postcss-discard-duplicates crypto-browserify postcss-discard-empty css-color-names postcss-discard-overridden css-declaration-sorter postcss-env-function css-loader postcss-flexbugs-fixes css-select postcss-focus-visible css-select-base-adapter postcss-focus-within css-selector-tokenizer postcss-font-variant css-tree postcss-gap-properties css-unit-converter postcss-image-set-function css-url-regex postcss-initial css-what postcss-lab-function cssdb postcss-load-config cssesc postcss-loader cssnano postcss-logical cssnano-preset-default postcss-media-minmax cssnano-util-get-arguments postcss-merge-longhand cssnano-util-get-match postcss-merge-rules cssnano-util-raw-cache postcss-minify-font-values cssnano-util-same-parent postcss-minify-gradients csso postcss-minify-params cssom postcss-minify-selectors cssstyle postcss-modules-extract-imports cyclist postcss-modules-local-by-default damerau-levenshtein postcss-modules-scope dashdash postcss-modules-values data-urls postcss-nesting date-now postcss-normalize-charset debug postcss-normalize-display-values decamelize postcss-normalize-positions decode-uri-component postcss-normalize-repeat-style deep-equal postcss-normalize-string deep-extend postcss-normalize-timing-functions deep-is postcss-normalize-unicode default-gateway postcss-normalize-url default-require-extensions postcss-normalize-whitespace define-properties postcss-ordered-values define-property postcss-overflow-shorthand del postcss-page-break delayed-stream postcss-place delegates postcss-preset-env depd postcss-pseudo-class-any-link des.js postcss-reduce-initial destroy postcss-reduce-transforms detect-indent postcss-replace-overflow-wrap detect-libc postcss-safe-parser detect-newline postcss-selector-matches detect-node postcss-selector-not detect-port-alt postcss-selector-parser diff postcss-svgo diffie-hellman postcss-unique-selectors dns-equal postcss-value-parser dns-packet postcss-values-parser dns-txt prelude-ls doctrine preserve dom-converter prettier dom-serializer pretty-bytes domain-browser pretty-error domelementtype pretty-format domexception private domhandler process domutils process-nextick-args dot-prop progress dotenv promise dotenv-expand promise-inflight duplexer prompts duplexify prop-types ecc-jsbn proxy-addr ee-first prr electron-to-chromium pseudomap elliptic psl emoji-regex public-encrypt emojis-list pump encodeurl pumpify end-of-stream punycode enhanced-resolve q entities qs errno querystring error-ex querystring-es3 es-abstract querystringify es-to-primitive raf escape-html randomatic escape-string-regexp randombytes escodegen randomfill eslint range-parser eslint-config-react-app raw-body eslint-import-resolver-node rc eslint-loader react eslint-module-utils react-app-polyfill eslint-plugin-flowtype react-dev-utils eslint-plugin-import react-dom eslint-plugin-jsx-a11y react-error-overlay eslint-plugin-react react-scripts eslint-scope read-pkg eslint-utils read-pkg-up eslint-visitor-keys readable-stream espree readdirp esprima realpath-native esquery recursive-readdir esrecurse reduce-css-calc estraverse regenerate esutils regenerate-unicode-properties etag regenerator-runtime eventemitter3 regenerator-transform events regex-cache eventsource regex-not evp_bytestokey regexpp exec-sh regexpu-core execa regjsgen exit regjsparser expand-brackets relateurl expand-range remove-trailing-separator expand-tilde renderkid expect repeat-element express repeat-string extend repeating extend-shallow request external-editor request-promise-core extglob request-promise-native extsprintf require-directory fast-deep-equal require-from-string fast-json-stable-stringify require-main-filename fast-levenshtein require-uncached fastparse requires-port faye-websocket resolve fb-watchman resolve-cwd figgy-pudding resolve-dir figures resolve-from file-entry-cache resolve-url file-loader restore-cursor filename-regex ret fileset rgb-regex filesize rgba-regex fill-range rimraf finalhandler ripemd160 find-cache-dir rsvp find-up run-async flat-cache run-queue flatten rxjs flush-write-stream safe-buffer follow-redirects safe-regex for-in safer-buffer for-own sane forever-agent sass-loader form-data sax forwarded saxes fragment-cache schedule fresh schema-utils from2 select-hose fs-extra selfsigned fs-minipass semver fs-write-stream-atomic send fs.realpath serialize-javascript fsevents serve-index function-bind serve-static functional-red-black-tree set-blocking gauge set-value get-caller-file setimmediate get-own-enumerable-property-symbols setprototypeof get-stream sha.js get-value shallow-clone getpass shebang-command glob shebang-regex glob-base shell-quote glob-parent shellwords global-modules signal-exit global-prefix simple-swizzle globals sisteransi globby slash graceful-fs slice-ansi growly snapdragon gzip-size snapdragon-node h2x-core snapdragon-util h2x-generate sockjs h2x-parse sockjs-client h2x-plugin-jsx source-list-map h2x-traverse source-map h2x-types source-map-resolve handle-thing source-map-support handlebars source-map-url har-schema spdx-correct har-validator spdx-exceptions harmony-reflect spdx-expression-parse has spdx-license-ids has-ansi spdy has-flag spdy-transport has-symbols split-string has-unicode sprintf-js has-value sshpk has-values ssri hash-base stable hash.js stack-utils he static-extend hex-color-regex statuses hmac-drbg stealthy-require hoek stream-browserify home-or-tmp stream-each homedir-polyfill stream-http hoopy stream-shift hosted-git-info string-length hpack.js string-width hsl-regex string_decoder hsla-regex stringify-object html-comment-regex strip-ansi html-encoding-sniffer strip-bom html-entities strip-comments html-minifier strip-eof html-webpack-plugin strip-json-comments htmlparser2 style-loader http-deceiver stylehacks http-errors supports-color http-parser-js svgo http-proxy symbol-tree http-proxy-middleware table http-signature tapable https-browserify tar iconv-lite terser icss-replace-symbols terser-webpack-plugin icss-utils test-exclude identity-obj-proxy text-table ieee754 throat iferr through ignore through2 ignore-walk thunky import-cwd timers-browserify import-from timsort import-local tmp imurmurhash tmpl indexes-of to-arraybuffer indexof to-fast-properties inflight to-object-path inherits to-regex ini to-regex-range inquirer topo internal-ip tough-cookie invariant tr46 invert-kv trim-right ip tryer ip-regex tslib ipaddr.js tty-browserify is-absolute-url tunnel-agent is-accessor-descriptor tweetnacl is-arrayish type-check is-binary-path type-is is-buffer typedarray is-builtin-module uglify-es is-callable uglify-js is-ci uglifyjs-webpack-plugin is-color-stop unicode-canonical-property-names-ecmascript is-data-descriptor unicode-match-property-ecmascript is-date-object unicode-match-property-value-ecmascript is-descriptor unicode-property-aliases-ecmascript is-directory union-value is-dotfile uniq is-equal-shallow uniqs is-extendable unique-filename is-extglob unique-slug is-finite universalify is-fullwidth-code-point unpipe is-generator-fn unquote is-glob unset-value is-number upath is-obj upper-case is-path-cwd uri-js is-path-in-cwd urix is-path-inside url is-plain-object url-loader is-posix-bracket url-parse is-primitive use is-promise util is-regex util-deprecate is-regexp util.promisify is-resolvable utila is-root utils-merge is-stream uuid is-svg validate-npm-package-license is-symbol vary is-typedarray vendors is-utf8 verror is-windows vm-browserify is-wsl w3c-hr-time isarray walker isemail watch isexe watchpack isobject wbuf isstream webidl-conversions istanbul-api webpack istanbul-lib-coverage webpack-dev-middleware istanbul-lib-hook webpack-dev-server istanbul-lib-instrument webpack-log istanbul-lib-report webpack-manifest-plugin istanbul-lib-source-maps webpack-sources istanbul-reports websocket-driver jest websocket-extensions jest-changed-files whatwg-encoding jest-cli whatwg-fetch jest-config whatwg-mimetype jest-diff whatwg-url jest-docblock which jest-each which-module jest-environment-jsdom wide-align jest-environment-node wordwrap jest-get-type workbox-background-sync jest-haste-map workbox-broadcast-cache-update jest-jasmine2 workbox-build jest-leak-detector workbox-cache-expiration jest-matcher-utils workbox-cacheable-response jest-message-util workbox-core jest-mock workbox-google-analytics jest-pnp-resolver workbox-navigation-preload jest-regex-util workbox-precaching jest-resolve workbox-range-requests jest-resolve-dependencies workbox-routing jest-runner workbox-strategies jest-runtime workbox-streams jest-serializer workbox-sw jest-snapshot workbox-webpack-plugin jest-util worker-farm jest-validate wrap-ansi jest-watcher wrappy jest-worker write joi write-file-atomic js-levenshtein ws js-tokens xml-name-validator js-yaml xmlchars jsbn xregexp jsdom xtend jsesc y18n json-parse-better-errors yallist json-schema yargs json-schema-traverse yargs-parser json-stable-stringify ```

[ChuksFestus]

@arcanis same with @jimthedev

[arcanis]

Unfortunately I can't reproduce it, and got multiple reports that it was working, so I'm not sure how to help you. My best guess is that one of the tools in the pipeline (either yarn or create-react-app or react-scripts) isn't up-to-date, but I'm not sure which one. Yarn looks fine, so I'd think it's one of the two others.

[jimthedev]

Ok a few things:

Ignoring npx and yarn create for a second, I think something broke with pnp between 2.0.2 and 2.0.3.

Here is me just bumping from 2.0.2 to 2.0.3 of CRA and looking for installConfig in the package.json.

Somewhat related, I think there is going to be another issue introduced in 2.0.4 with this version check. Specifically the semver library won't parse nightly versions of yarn without dropping everything after the last period. Here it is in an example using my actual yarn version.

[jimthedev]

Yep ok I think that is it perhaps. There was simply something wrong in 2.0.3. @ChuksFestus can you confirm by trying npx create-react-app@2.0.2 pnp-app --use-pnp

And just a heads up that I have not tried using yarn create because I haven't found how to do is using a specific version like npx does. If npx will use yarn as @gaearon mentioned then I'll forego that option in favor of npx.

[ChuksFestus]

oh.... thats probably it @jimthedev just tried it and no node_modules well the .pnp folder cos with lots of dependences tho but thats progress 👍

[merceyz]

Closing as this has most likely been fixed now