Yarn pnp compatibility

[fazouane-marouane]

Is this a bug report?

Yes.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

yarn pnp

Environment

Environment Info:

  System:
    OS: macOS 10.14.3
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 10.10.0 - ~/.nvm/versions/node/v10.10.0/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.10.0/bin/npm
  Browsers:
    Chrome: 72.0.3626.121
    Safari: 12.0.3
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: 2.1.8

Note: the script doesn't display versions of react, react-dom and react-scripts since I'm using yarn pnp (and the script doesn't appear to support it)

Steps to Reproduce

There are mainly two issues related to pnp compatibility:

1. create-react-app my-app --use-pnp doesn't use yarn pnp
2. using yarn pnp anyway will result in issues

$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/index.js
Error: Error while loading rule 'react/no-direct-mutation-state': You cannot require a package ("react") that is not declared in your dependencies (via "/Users/marouanefazouane/Projects/monorepo-sample/packages/app")
    at Array.forEach (<anonymous>)

You can try it using https://github.com/fazouane-marouane/monorepo-sample/tree/master/packages/app

Expected Behavior

yarn build should have built the app as expected

Actual Behavior

I get issues related to some eslint rules that cannot be imported.

Reproducible Demo

https://github.com/fazouane-marouane/monorepo-sample/tree/master/packages/app

[fazouane-marouane]

Okay I had an epiphany and took another look at this. It looks like the issue is in linting step that tries to detect react's version:

create-react-app/packages/eslint-config-react-app/index.js

Line 51 in b5887dc

version: 'detect',

And eslint-plugin-react doesn't use plain old require.resolve but used https://github.com/browserify/resolve#readme instead ( https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/util/version.js#L14 )

Tracking this issue in jsx-eslint/eslint-plugin-react#2192

[ljharb]

As commented in jsx-eslint/eslint-plugin-react#2192:

resolve already has PnP compatibility (via browserify/resolve#170). If it's not working, please file a bug on yarn.

[fazouane-marouane]

Well it turns out that we just can't really check react's version when using yarn workspaces + pnp + create-react-app. One workaround, for people that need this, is to depend on react from your workspace's toplevel: https://github.com/fazouane-marouane/monorepo-sample/blob/master/package.json#L23

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.