create-snowpack-app, app-template-react with latest yarn crashes

[Kjaer]

Hello there.

I wanted to create blank react app for some playground with new Recoil and for a by-product I wanted use yarn as well just to leave my comfort zone with NPM a bit. But I realised, app-template-react does not fully compatible with the latest version of yarn. I created a repo for reproduce the error, and I am gonna post my terminal output here as well
This is repo: https://github.com/Kjaer/snowpack-latest-yarn-issue

[Kjaer]

This is my terminal output. (it's a long output due to yarn installs etc.)

~/Playground 
➜ yarn --version
1.22.4

~/Playground 
➜ npx create-snowpack-app snowpack-latest-yarn-issue --template @snowpack/app-template-react --use-yarn
npx: installed 30 in 3.429s

  - Using template @snowpack/app-template-react
  - Creating a new project in /Users/halilkayer/Playground/snowpack-latest-yarn-issue
  - Installing package dependencies. This might take a couple of minutes.

warning @snowpack/app-scripts-react > babel-jest > @jest/transform > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @snowpack/app-scripts-react > babel-jest > @jest/transform > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142

  - Initializing git repo.

  - Success!

Quickstart:

  cd snowpack-latest-yarn-issue
  yarn start

All Commands:

  yarn install     Install your dependencies. (We already ran this one for you!)
  yarn start       Start your development server.
  yarn run build   Build your website for production.
  yarn test        Run your tests.


~/Playground took 16s 
➜ cd snowpack-latest-yarn-issue 

snowpack-latest-yarn-issue on  master via ⬢ v14.7.0 
➜ yarn set version berry
Resolving berry to a url...
Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js...
Saving it into /Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-berry.js...
Updating /Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarnrc.yml...
Done!

snowpack-latest-yarn-issue on  master [?] via ⬢ v14.7.0 took 2s 
➜ yarn set version latest
➤ YN0000: Downloading https://github.com/yarnpkg/berry/raw/master/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-2.2.2.cjs
➤ YN0000: Done in 0.74s

snowpack-latest-yarn-issue on  master [?] via ⬢ v14.7.0 
➜ yarn --version
2.2.2

--
snowpack-latest-yarn-issue on  master [?] via ⬢ v14.7.0 
➜ yarn start
Internal Error: root-workspace-0b6124@workspace:.: This package doesn't seem to be present in your lockfile; try to make an install to update your resolutions
    at H.getCandidates (/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:2:298255)
    at i.getCandidates (/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:2:287498)
    at /Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:2:308721
    at Array.map (<anonymous>)
    at ie.resolveEverything (/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:2:308437)
    at async ie.applyLightResolution (/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:2:330958)
    at async ie.restoreInstallState (/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:2:330688)
    at async Re.execute (/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:2:87214)
    at async Re.validateAndExecute (/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:2:559450)
    at async j.run (/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/releases/yarn-2.2.2.cjs:17:19046)


snowpack-latest-yarn-issue on  master [?] via ⬢ v14.7.0 
➜ yarn install
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.1.3: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ rollup-plugin-inject@npm:3.0.2 is deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
➤ YN0032: │ fsevents@npm:2.1.3: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ request@npm:2.88.2 is deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
➤ YN0061: │ har-validator@npm:5.1.5 is deprecated: this library is no longer supported
➤ YN0061: │ request-promise-native@npm:1.0.9 is deprecated: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
➤ YN0061: │ resolve-url@npm:0.2.1 is deprecated: https://github.com/lydell/resolve-url#deprecated
➤ YN0061: │ urix@npm:0.1.0 is deprecated: Please see https://github.com/lydell/urix#deprecated
➤ YN0002: │ @snowpack/app-scripts-react@npm:1.10.0 doesn't provide react-dom@>=16.10.0 requested by @snowpack/plugin-react-refresh@npm:2.1.0
➤ YN0002: │ @snowpack/app-scripts-react@npm:1.10.0 doesn't provide react@>=16.10.0 requested by @snowpack/plugin-react-refresh@npm:2.1.0
➤ YN0002: │ snowpack@npm:2.10.3 doesn't provide @babel/core@^7.0.0-0 requested by @babel/plugin-syntax-import-meta@npm:7.10.4
➤ YN0000: └ Completed in 13.74s
➤ YN0000: ┌ Fetch step
➤ YN0013: │ y18n@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yaml@npm:1.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs-parser@npm:18.1.3 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:15.4.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 1.36s
➤ YN0000: ┌ Link step
➤ YN0031: │ One or more node_modules have been detected and will be removed. This operation may take some time.
➤ YN0007: │ core-js@npm:3.6.5 must be built because it never did before or the last one failed
➤ YN0007: │ core-js-pure@npm:3.6.5 must be built because it never did before or the last one failed
➤ YN0007: │ esbuild@npm:0.6.34 must be built because it never did before or the last one failed
➤ YN0000: └ Completed in 4.15s
➤ YN0000: Done with warnings in 19.35s

Until here, I upgraded and yarn and reinstalled the deps.

[Kjaer]

When I ran the app I've got this error:

snowpack-latest-yarn-issue on  master [?] via ⬢ v14.7.0 
➜ yarn start

snowpack

  http://localhost:8080 • http://192.168.0.141:8080
  Server started.

▼ Console

[snowpack] ! updating dependencies...
[snowpack] ! installing dependencies…
[snowpack] ✔ install complete [3.28s]
[snowpack] 
  ⦿ web_modules/                 size       gzip       brotli   
    ├─ react-dom.js              931 KB     217.62 KB  171.18 KB  
    └─ react.js                  1.57 KB    0.5 KB     0.44 KB    
  ⦿ web_modules/common/ (Shared)
    └─ index-ee0922dd.js         67.88 KB   18.77 KB   15.97 KB   


[@snowpack/plugin-babel] Error: Cannot find module 'react-refresh/babel' from '/Users/halilkayer/Playground/snowpack-latest-yarn-issue/.yarn/cache/@snowpack-app-scripts-react-npm-1.10.0-79faa14800-39f10e6528.zip/node_modules/@snowpack/app-scripts-react'

[FredKSchott]

Yea, we've seen this before, it's a Yarn + Babel issue around how configs are extended from one package to another, where "react-refresh/babel" is a dependency of a dependency.

Now that Snowpack is more baked and settled than it was in the v1.0 days, it may make sense to remove some of our base "app-scripts" packages and just maintain the Create Snowpack App templates directly. That would resolve this issue by making react-refresh a direct dependency of your project.