Use yarn when running in monorepo, facebook#3997

Author: bradfordlemley

packages/create-react-app/createReactApp.js

@@ -49,7 +49,7 @@ const url = require('url');
 const hyperquest = require('hyperquest');
 const envinfo = require('envinfo');
 const os = require('os');
-
+const findMonorepo = require('react-dev-utils/workspaceUtils').findMonorepo;
 const packageJson = require('./package.json');
 
 // These files should be allowed to remain on a failed install,
@@ -206,7 +206,7 @@ function createApp(name, verbose, version, useNpm, usePnp, template) {
     JSON.stringify(packageJson, null, 2) + os.EOL
   );
 
-  const useYarn = useNpm ? false : shouldUseYarn();
+  const useYarn = useNpm ? false : shouldUseYarn(root);
   const originalDirectory = process.cwd();
   process.chdir(root);
   if (!useYarn && !checkThatNpmCanReadCwd()) {
@@ -277,7 +277,7 @@ function createApp(name, verbose, version, useNpm, usePnp, template) {
   );
 }
 
-function shouldUseYarn() {
+function isYarnAvailable() {
   try {
     execSync('yarnpkg --version', { stdio: 'ignore' });
     return true;
@@ -286,6 +286,11 @@ function shouldUseYarn() {
   }
 }
 
+function shouldUseYarn(appDir) {
+  const mono = findMonorepo(appDir);
+  return (mono.isYarnWs && mono.isAppIncluded) || isYarnAvailable();
+}
+
 function install(root, useYarn, usePnp, dependencies, verbose, isOnline) {
   return new Promise((resolve, reject) => {
     let command;

packages/create-react-app/package.json

@@ -28,6 +28,7 @@
     "envinfo": "5.10.0",
     "fs-extra": "5.0.0",
     "hyperquest": "2.1.3",
+    "react-dev-utils": "6.0.4",
     "semver": "5.5.1",
     "tar-pack": "3.4.1",
     "tmp": "0.0.33",

packages/react-dev-utils/package.json

@@ -38,7 +38,8 @@
     "printHostingInstructions.js",
     "WatchMissingNodeModulesPlugin.js",
     "WebpackDevServerUtils.js",
-    "webpackHotDevClient.js"
+    "webpackHotDevClient.js",
+    "workspaceUtils.js"
   ],
   "dependencies": {
     "@babel/code-frame": "7.0.0",
@@ -49,8 +50,10 @@
     "detect-port-alt": "1.1.6",
     "escape-string-regexp": "1.0.5",
     "filesize": "3.6.1",
+    "find-pkg": "1.0.0",
     "find-up": "3.0.0",
     "global-modules": "1.0.0",
+    "globby": "7.1.1",
     "gzip-size": "5.0.0",
     "inquirer": "6.2.0",
     "is-root": "2.0.0",

packages/react-dev-utils/workspaceUtils.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2018-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const findPkg = require('find-pkg');
+const globby = require('globby');
+
+const findPkgs = (rootPath, globPatterns) => {
+  if (!globPatterns) {
+    return [];
+  }
+  const globOpts = {
+    cwd: rootPath,
+    strict: true,
+    absolute: true,
+  };
+  return globPatterns
+    .reduce(
+      (pkgs, pattern) =>
+        pkgs.concat(globby.sync(path.join(pattern, 'package.json'), globOpts)),
+      []
+    )
+    .map(f => path.dirname(path.normalize(f)));
+};
+
+const findMonorepo = appDir => {
+  const monoPkgPath = findPkg.sync(path.resolve(appDir, '..'));
+  const monoPkg = monoPkgPath && require(monoPkgPath);
+  const patterns = monoPkg && monoPkg.workspaces;
+  const isYarnWs = Boolean(patterns);
+  const allPkgs = patterns && findPkgs(path.dirname(monoPkgPath), patterns);
+  const isIncluded = dir => allPkgs && allPkgs.indexOf(dir) !== -1;
+  const isAppIncluded = isIncluded(appDir);
+  const pkgs = allPkgs
+    ? allPkgs.filter(f => fs.realpathSync(f) !== appDir)
+    : [];
+
+  return {
+    isAppIncluded,
+    isYarnWs,
+    pkgs,
+  };
+};
+
+module.exports = {
+  findMonorepo,
+};

packages/react-scripts/config/paths.js

@@ -11,8 +11,7 @@
 const path = require('path');
 const fs = require('fs');
 const url = require('url');
-const findPkg = require('find-pkg');
-const globby = require('globby');
+const findMonorepo = require('react-dev-utils/workspaceUtils').findMonorepo;
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
@@ -58,7 +57,6 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
@@ -81,7 +79,6 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
-  yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
@@ -108,7 +105,6 @@ if (useTemplate) {
     appIndexJs: resolveOwn('template/src/index.js'),
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
-    yarnLockFile: resolveOwn('template/yarn.lock'),
     testsSetup: resolveOwn('template/src/setupTests.js'),
     proxySetup: resolveOwn('template/src/setupProxy.js'),
     appNodeModules: resolveOwn('node_modules'),
@@ -123,37 +119,16 @@ if (useTemplate) {
 
 module.exports.srcPaths = [module.exports.appSrc];
 
-const findPkgs = (rootPath, globPatterns) => {
-  const globOpts = {
-    cwd: rootPath,
-    strict: true,
-    absolute: true,
-  };
-  return globPatterns
-    .reduce(
-      (pkgs, pattern) =>
-        pkgs.concat(globby.sync(path.join(pattern, 'package.json'), globOpts)),
-      []
-    )
-    .map(f => path.dirname(path.normalize(f)));
-};
-
-const getMonorepoPkgPaths = () => {
-  const monoPkgPath = findPkg.sync(path.resolve(appDirectory, '..'));
-  if (monoPkgPath) {
-    // get monorepo config from yarn workspace
-    const pkgPatterns = require(monoPkgPath).workspaces;
-    const pkgPaths = findPkgs(path.dirname(monoPkgPath), pkgPatterns);
-    // only include monorepo pkgs if app itself is included in monorepo
-    if (pkgPaths.indexOf(appDirectory) !== -1) {
-      return pkgPaths.filter(f => fs.realpathSync(f) !== appDirectory);
-    }
-  }
-  return [];
-};
+module.exports.useYarn = fs.existsSync(
+  path.join(module.exports.appPath, 'yarn.lock')
+);
 
 if (checkForMonorepo) {
   // if app is in a monorepo (lerna or yarn workspace), treat other packages in
   // the monorepo as if they are app source
-  Array.prototype.push.apply(module.exports.srcPaths, getMonorepoPkgPaths());
+  const mono = findMonorepo(appDirectory);
+  if (mono.isAppIncluded) {
+    Array.prototype.push.apply(module.exports.srcPaths, mono.pkgs);
+  }
+  module.exports.useYarn = module.exports.useYarn || mono.isYarnWs;
 }

packages/react-scripts/package.json

@@ -43,9 +43,7 @@
     "eslint-plugin-jsx-a11y": "6.1.1",
     "eslint-plugin-react": "7.11.1",
     "file-loader": "2.0.0",
-    "find-pkg": "1.0.0",
     "fs-extra": "7.0.0",
-    "globby": "7.1.1",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",

packages/react-scripts/scripts/build.js

@@ -45,7 +45,6 @@ const printBuildError = require('react-dev-utils/printBuildError');
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
 
 // These sizes are pretty large. We'll warn for bundles exceeding them.
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
@@ -118,7 +117,7 @@ checkBrowsers(paths.appPath, isInteractive)
         publicUrl,
         publicPath,
         buildFolder,
-        useYarn
+        paths.useYarn
       );
     },
     err => {

packages/react-scripts/scripts/eject.js

@@ -224,7 +224,7 @@ inquirer
       }
     }
 
-    if (fs.existsSync(paths.yarnLockFile)) {
+    if (paths.useYarn) {
       const windowsCmdFilePath = path.join(
         appPath,
         'node_modules',

packages/react-scripts/scripts/start.js

@@ -29,7 +29,6 @@ if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') {
 }
 // @remove-on-eject-end
 
-const fs = require('fs');
 const chalk = require('chalk');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
@@ -46,7 +45,6 @@ const paths = require('../config/paths');
 const config = require('../config/webpack.config.dev');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 
-const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
@@ -93,7 +91,13 @@ checkBrowsers(paths.appPath, isInteractive)
     const appName = require(paths.appPackageJson).name;
     const urls = prepareUrls(protocol, HOST, port);
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    const compiler = createCompiler(
+      webpack,
+      config,
+      appName,
+      urls,
+      paths.useYarn
+    );
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);