5

I've been trying to update a Create React App to use yarn 2 and plug and play (PNP). When I do use nodeLinker: node-modules in the .yarnrc.yml, I can successfully start the dev-server. Without it, I end up with

./src/App.scss (./.yarn/$$virtual/css-loader-virtual-fe3fa7be11/0/cache/css-loader-npm-3.4.2-300ee159b3-2.zip/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./.yarn/cache/postcss-loader-npm-3.0.0-f4ab99b685-2.zip/node_modules/postcss-loader/src??postcss!./.yarn/cache/resolve-url-loader-npm-3.1.1-cf1a268137-2.zip/node_modules/resolve-url-loader??ref--6-oneOf-5-3!./.yarn/unplugged/sass-loader-virtual-14ae4e1150/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
Error: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

Required package: node-sass (via "node-sass")
Required by: sass-loader@virtual:74ba539c0b6c6c8346ea151c91664bff0bef13782983a6f90ddf1a26160140360771dcf40d0863b46ff7add674bc2c42a37daea25f24f4ea96f7843786460ecd#npm:8.0.2 (via /Users/me/color-contrast-matrix/.yarn/unplugged/sass-loader-virtual-14ae4e1150/node_modules/sass-loader/dist/)
wegry
  • 7,046
  • 6
  • 39
  • 59

2 Answers2

6

It looks like yarn 2 provides a way of overriding a packages dependencies. You have to provide the missing dependency, at least in this case.

From the docs current link:

Some packages may have been specified incorrectly with regard to their dependencies - for example with one dependency being missing, causing Yarn to refuse it the access. The packageExtensions fields offer a way to extend the existing package definitions with additional information. If you use it, consider sending a PR upstream and contributing your extension to the plugin-compat database.

After installing node-sass and adding this config, compilation succeeded.

# .yarnrc.yml
packageExtensions:
  'sass-loader@*':
    optionalDependencies:
      node-sass: '*'
wegry
  • 7,046
  • 6
  • 39
  • 59
  • 1
    Cool. I have been looking for the answer for about a hour now. It resoled my problem. It works like a charm. Thank you. – Lane May 14 '20 at 02:54
  • 1
    This doesn't work with yarn 2.4.0. `Usage Error: Unrecognized configuration settings found: packageExtensions['sass-loader@*'].optionalDependencies` – Ray Shan Jan 01 '21 at 09:12
  • 2
    @RayShan take a look at https://github.com/wegry/yarn-2.4.0-package-extensions/pull/1/files for a more fleshed out example. – wegry Jan 01 '21 at 17:11
  • 2
    @wegry thanks, using `dependencies` instead of `optionalDependencies` worked for me too. – Ray Shan Jan 02 '21 at 01:05
4

Building on wegry's answer, a better way would be to fix up react-scripts, since that's where the missing peer dependency is.

#.yarnrc.yml

packageExtensions:
  'react-scripts@*':
    peerDependencies:
      node-sass: ^4.0.0 || ^5.0.0'    # Or sass: ^1.3.0'

I'm using versions that match the peerDependency of the version of sass-loader that is currently depended on by react-scripts. (I hope by the time the next version of react-scripts comes out, they'll have fixed this bug.)

What this is doing, is telling Yarn that react-scripts really should have peer-depended on sass (and also node-sass for that matter), so that sass-loader can use them.

sass-loader itself has defined its dependencies correctly.

limos
  • 1,526
  • 12
  • 13