Is Yarn 2 ready to use?
Yarn 2 had just released in January 2020. This was a big update. It comes with lots of new features such as speed and improved yarn workspaces implementation but can we start switching projects over?
Testing GatsbyJS site with Yarn 2
This blog is built with Gatsby. I'll go through migration steps to see what happens.
1. Checking for potential errors
Yarn doctor package @yarnpkg/doctor is provided by yarn team to ease migration pain. Not every JS package is compatible with the Yarn 2 update as node_modules is no longer there. By using this command you can get early warnings.
~/yarn2-punched-card (master ✔) ᐅ npx @yarnpkg/doctor .
npx: installed 303 in 40.404s
➤ YN0000: Found 1 package(s) to process
➤ YN0000: For a grand total of 26 file(s) to validate
➤ YN0000: ┌ ~/yarn2-punched-card/package.json
➤ YN0000: └ Completed in 19.68s
➤ YN0000: Done in 19.68sThere are no errors so we can switch to yarn 2.
2. Switching yarn version
Yarn recommends keeping the global yarn version to 1 and installing yarn 2 per project at a time. So following this advice, we will set up yarn version of this project to berry which is the name for yarn 2.
~/dev/yarn2-punched-card (master ✔) ᐅ yarn policies 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 ~/yarn2-punched-card/.yarn/releases/yarn-berry.js...
Updating ~/yarn2-punched-card/.yarnrc...
Done!This has created a yarnrc file with these contents:
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
lastUpdateCheck 1581197846934
yarn-path ".yarn/releases/yarn-berry.js"
It also created a .yarn folder with cache and releases folders:
Installing dependencies
Yarn 2 improves the log messages terminal.
~/yarn2-punched-card (master ✘)✭ ᐅ yarn install
➤ YN0000: ┌ Resolution step
➤ YN0032: │ nan@npm:2.14.0: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ sharp@npm:0.23.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ sharp@npm:0.22.1: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ fsevents@npm:2.1.2: Implicit dependencies on node-gyp are discouraged
...After the first installation is complete, we see that .yarn/cache folder is now populated with dependencies and .pnp.js file is created.
Yarn replaces node_moduels with something called Plug'n'Play(PnP). This file holds data about packages and allows yarn to link them.
Node modules folder usually gets quite large. This is partially because the packages get installed many times. For example, a package installs its dependencies and those dependencies install their dependencies and so on.
Yarn 2 changes this by taking over package resolution job from the node. Yarn will install the dependency only once even if it's required many times by different packages.
Building the project
Installation was fine but are we going to be able to build the project?
Firstly, I'll delete the node_modules as it's no longer required.
Let's make sure the project points out to the correct yarn version:
~/yarn2-punched-card (master ✘)✹✭ ᐅ yarn -v
2.0.0-rc.29And running gatsby build fails:
~/yarn2-punched-card (master ✘)✹✭ ᐅ yarn build
error gatsby build
Build a Gatsby project.
Options:
--verbose Turn on verbose output [boolean] [default: false]
--no-color, --no-colors Turn off the color in output [boolean] [default: false]
--prefix-paths Build site with link paths prefixed (set pathPrefix in your gatsby-config.js).
[boolean] [default: false]
--no-uglify Build site without uglifying JS bundles (for debugging). [boolean] [default: false]
--open-tracing-config-file Tracer configuration file (OpenTracing compatible). See https://gatsby.dev/tracing[string]
-h, --help Show help [boolean]
-v, --version Show version number [boolean]
error There was a problem loading the local build command. Gatsby may not be installed. Perhaps you need to run "npm
Error: A package is trying to access another package without the second one being listed as a dependency of the first
one
Required package: micromatch (via "micromatch")
Required by: gatsby@virtual:f5c3faa105f35f3e171ced69e4c669ca19ecdd1ea62de4d7268fd912d000076a2955665b8c2acb1c7e553e117f
cc978a8c6fbd9f6e98c0c9cf675eb1f6c846d7#npm:2.8.2 (via ~/yarn2-punched-card/.yarn/$$virtual/gats
by-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49a9922-2.zip/node_modules/gatsby/dist/redux/)
Require stack:
- ~/yarn2-punched-card/.yarn/$$virtual/gatsby-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49
a9922-2.zip/node_modules/gatsby/dist/redux/run-sift.js
- ~/yarn2-punched-card/.yarn/$$virtual/gatsby-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49
a9922-2.zip/node_modules/gatsby/dist/db/nodes-query.js
- ~/yarn2-punched-card/.yarn/$$virtual/gatsby-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49
a9922-2.zip/node_modules/gatsby/dist/db/nodes.js
- ~/yarn2-punched-card/.yarn/$$virtual/gatsby-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49
a9922-2.zip/node_modules/gatsby/dist/redux/actions.js
- ~/yarn2-punched-card/.yarn/$$virtual/gatsby-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49
a9922-2.zip/node_modules/gatsby/dist/utils/webpack.config.js
- ~/yarn2-punched-card/.yarn/$$virtual/gatsby-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49
a9922-2.zip/node_modules/gatsby/dist/commands/build-html.js
- ~/yarn2-punched-card/.yarn/$$virtual/gatsby-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49
a9922-2.zip/node_modules/gatsby/dist/commands/build.js
- ~/yarn2-punched-card/.yarn/cache/gatsby-cli-npm-2.6.4-c258e10bde-2.zip/node_modules/gatsby-cl
i/lib/create-cli.js
- ~/yarn2-punched-card/.yarn/cache/gatsby-cli-npm-2.6.4-c258e10bde-2.zip/node_modules/gatsby-cl
i/lib/index.js
- ~/yarn2-punched-card/.yarn/$$virtual/gatsby-virtual-0b2e55ecf3/0/cache/gatsby-npm-2.8.2-15b49
a9922-2.zip/node_modules/gatsby/dist/bin/gatsby.js
- .pnp.js:28065 Object.makeError
~/yarn2-punched-card/.pnp.js:28065:24
- .pnp.js:36963 resolveToUnqualified
~/yarn2-punched-card/.pnp.js:36963:35
- .pnp.js:37040 resolveRequest
~/yarn2-punched-card/.pnp.js:37040:27
- .pnp.js:37108 Object.resolveRequest
~/yarn2-punched-card/.pnp.js:37108:26
- .pnp.js:36337 Function.module_1.Module._resolveFilename
~/yarn2-punched-card/.pnp.js:36337:34
- .pnp.js:36222 Function.module_1.Module._load
~/yarn2-punched-card/.pnp.js:36222:40
errorI forgot to update Gatsby to the latest version. Updating Gatsby to 2.19.0 from 2.8.2 might fix this.
Building the project now gives a different error:
~/yarn2-punched-card (master ✘)✹✭ ᐅ yarn build
success open and validate gatsby-configs - 0.046s
⠋ load plugins
objc[61609]: Class GNotificationCenterDelegate is implemented in both ~/yarn2-punched-card/.yarn/unplugged/sharp-npm-0.22.1-390578ec67/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0x390d0a578) and ~/yarn2-punched-card/.yarn/unplugged/sharp-npm-0.23.2-311b5c9089/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0x3929425success load plugins - 1.106s
success onPreInit - 0.014s
success delete html and css files from previous builds - 0.018s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.026s
success copy gatsby files - 0.062s
ERROR #11321 PLUGIN
"gatsby-plugin-typography" threw an error while running the onPreBootstrap lifecycle:
EROFS: read-only filesystem, mkdir '/node_modules/gatsby-plugin-typography/.cache'
26 |
27 | if (!fs.existsSync(dir)) {
> 28 | fs.mkdirSync(dir);
| ^
29 | }
30 |
31 | fs.writeFileSync(dir + "/typography.js", module);
File: .yarn/$$virtual/gatsby-plugin-typography-virtual-ee89109303/0/cache/gatsby-plugin-typography-npm-2.2.13-ffc02bcf0b-2.zip/node_modules/gatsby-plugin-typography/gatsby-node.js:28:8
not finished onPreBootstrap - 0.060sIt looks like gatsby-plugin-typography is expecting node_modules to exist and it is not playing nicely with Plug'n'Play.
Conclusion
Yarn 2 brings an innovative solution to how we manage javascript packages. However, this is a big change and it will take some time for the projects in the open source to become compatible with it.
← Back home