Make preset-create-react-app compatible with Yarn PnP/Yarn 2

packages/preset-create-react-app/@types/nodejs.d.ts

@@ -0,0 +1,8 @@
+// Extend types of NodeJS to add `pnp` attribute to `process.versions`
+// When operating under PnP environments, this value will be set to a number
+// indicating the version of the PnP standard, see: https://yarnpkg.com/advanced/pnpapi#processversionspnp
+declare namespace NodeJS {
+  interface Process {
+    versions: ProcessVersions & { pnp?: number };
+  }
+}

packages/preset-create-react-app/@types/pnp-webpack-plugin.d.ts

@@ -0,0 +1 @@
+declare module 'pnp-webpack-plugin';

packages/preset-create-react-app/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@storybook/node-logger": "^5.3.14",
     "@types/webpack": "^4.41.7",
+    "pnp-webpack-plugin": "^1.6.4",
     "semver": "^7.1.3"
   },
   "devDependencies": {

packages/preset-create-react-app/src/helpers/getReactScriptsPath.ts

@@ -55,4 +55,27 @@ const getReactScriptsPath = (): string => {
   return '';
 };
 
-export { getReactScriptsPath };
+const getReactScriptsPathWithYarnPnp = (
+  packageName = 'react-scripts',
+): string => {
+  // Use Plug'n'Play API to introspect the dependency tree at runtime, see: https://yarnpkg.com/advanced/pnpapi
+  // eslint-disable-next-line import/no-unresolved,@typescript-eslint/no-var-requires,global-require
+  const pnpApi = require('pnpapi');
+
+  // Get list of all dependencies of the project
+  const { packageDependencies } = pnpApi.getPackageInformation({
+    name: null,
+    reference: null,
+  });
+
+  // Get location of the package named `packageName`, this package must be
+  // listed as dependency to be able to find it's location (and no more just
+  // be present in node_modules folder)
+  const { packageLocation } = pnpApi.getPackageInformation(
+    pnpApi.getLocator(packageName, packageDependencies.get(packageName)),
+  );
+
+  return packageLocation;
+};
+
+export { getReactScriptsPath, getReactScriptsPathWithYarnPnp };

packages/preset-create-react-app/src/index.ts

@@ -1,20 +1,30 @@
 import { join, relative, resolve, dirname } from 'path';
 import { Configuration } from 'webpack'; // eslint-disable-line import/no-extraneous-dependencies
 import { logger } from '@storybook/node-logger';
+import PnpWebpackPlugin from 'pnp-webpack-plugin';
 import { mergePlugins } from './helpers/mergePlugins';
-import { getReactScriptsPath } from './helpers/getReactScriptsPath';
+import {
+  getReactScriptsPath,
+  getReactScriptsPathWithYarnPnp,
+} from './helpers/getReactScriptsPath';
 import { processCraConfig } from './helpers/processCraConfig';
 import { checkPresets } from './helpers/checkPresets';
 import { getModulePath } from './helpers/getModulePath';
 import { Options } from './options';
 
 const CWD = process.cwd();
-const REACT_SCRIPTS_PATH = getReactScriptsPath();
+// When operating under PnP environments, this value will be set to a number
+// indicating the version of the PnP standard, see: https://yarnpkg.com/advanced/pnpapi#processversionspnp
+const IS_USING_YARN_PNP = typeof process.versions.pnp !== 'undefined';
+const REACT_SCRIPTS_PATH = IS_USING_YARN_PNP
+  ? getReactScriptsPathWithYarnPnp()
+  : getReactScriptsPath();
 const OPTION_SCRIPTS_PACKAGE = 'scriptsPackageName';
 
 // This loader is shared by both the `managerWebpack` and `webpack` functions.
 const resolveLoader = {
   modules: ['node_modules', join(REACT_SCRIPTS_PATH, 'node_modules')],
+  plugins: [PnpWebpackPlugin.moduleLoader(module)],
 };
 
 // Ensure that loaders are resolved from react-scripts.
@@ -37,9 +47,9 @@ const webpack = (
   const scriptsPackageName = options[OPTION_SCRIPTS_PACKAGE];
   if (typeof scriptsPackageName === 'string') {
     try {
-      scriptsPath = dirname(
-        require.resolve(`${scriptsPackageName}/package.json`),
-      );
+      scriptsPath = IS_USING_YARN_PNP
+        ? getReactScriptsPathWithYarnPnp(scriptsPackageName)
+        : dirname(require.resolve(`${scriptsPackageName}/package.json`));
     } catch (e) {
       logger.warn(
         `A \`${OPTION_SCRIPTS_PACKAGE}\` was provided, but couldn't be resolved.`,
@@ -107,7 +117,7 @@ const webpack = (
         join(REACT_SCRIPTS_PATH, 'node_modules'),
         ...getModulePath(CWD),
       ],
-      plugins,
+      plugins: [...plugins, PnpWebpackPlugin],
     },
     resolveLoader,
   };

yarn.lock

@@ -11677,6 +11677,13 @@ pnp-webpack-plugin@1.6.0:
   dependencies:
     ts-pnp "^1.1.2"
 
+pnp-webpack-plugin@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
+  integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==
+  dependencies:
+    ts-pnp "^1.1.6"
+
 polished@^3.3.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.2.tgz#b4780dad81d64df55615fbfc77acb52fd17d88cd"
@@ -15644,6 +15651,11 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec"
   integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA==
 
+ts-pnp@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"
+  integrity sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ==
+
 tsconfig-paths@^3.9.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"