Add support for yarn and lerna monorepos.

.travis.yml

@@ -15,11 +15,13 @@ script:
  - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi'
  - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi'
  - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi'
+ - 'if [ $TEST_SUITE = "monorepos" ]; then tasks/e2e-monorepos.sh; fi'
 env:
   matrix:
     - TEST_SUITE=simple
     - TEST_SUITE=installs
     - TEST_SUITE=kitchensink
+    - TEST_SUITE=monorepos
 matrix:
   include:
     - node_js: 0.10

appveyor.yml

@@ -8,13 +8,16 @@ environment:
       test_suite: "installs"
     - nodejs_version: 8
       test_suite: "kitchensink"
+    - nodejs_version: 8
+      test_suite: "monorepos"
     - nodejs_version: 6
       test_suite: "simple"
     - nodejs_version: 6
       test_suite: "installs"
     - nodejs_version: 6
       test_suite: "kitchensink"
-
+    - nodejs_version: 6
+      test_suite: "monorepos"
 cache:
   - node_modules -> appveyor.cleanup-cache.txt
   - packages\react-scripts\node_modules -> appveyor.cleanup-cache.txt

packages/react-scripts/config/jest/babelTransform.js

@@ -1,15 +1,18 @@
-// @remove-file-on-eject
+// @remove-on-eject-begin
 /**
  * Copyright (c) 2014-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.
  */
+// @remove-on-eject-end
 'use strict';
 
 const babelJest = require('babel-jest');
 
 module.exports = babelJest.createTransformer({
   presets: [require.resolve('babel-preset-react-app')],
+  // @remove-on-eject-begin
   babelrc: false,
+  // @remove-on-eject-end
 });

packages/react-scripts/config/paths.js

@@ -11,6 +11,8 @@
 const path = require('path');
 const fs = require('fs');
 const url = require('url');
+const findPkg = require('find-pkg');
+const globby = require('globby');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
@@ -63,6 +65,8 @@ module.exports = {
   servedPath: getServedPath(resolveApp('package.json')),
 };
 
+let checkForMonorepo = true;
+
 // @remove-on-eject-begin
 const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
 
@@ -86,17 +90,13 @@ module.exports = {
   ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
 };
 
-const ownPackageJson = require('../package.json');
-const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`);
-const reactScriptsLinked =
-  fs.existsSync(reactScriptsPath) &&
-  fs.lstatSync(reactScriptsPath).isSymbolicLink();
-
-// config before publish: we're in ./packages/react-scripts/config/
-if (
-  !reactScriptsLinked &&
-  __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1
-) {
+// detect if template should be used, ie. when cwd is react-scripts itself
+const useTemplate =
+  appDirectory === fs.realpathSync(path.join(__dirname, '..'));
+
+checkForMonorepo = !useTemplate;
+
+if (useTemplate) {
   module.exports = {
     dotenv: resolveOwn('template/.env'),
     appPath: resolveApp('.'),
@@ -117,3 +117,40 @@ if (
   };
 }
 // @remove-on-eject-end
+
+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 [];
+};
+
+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());
+}

packages/react-scripts/config/webpack.config.dev.js

@@ -145,18 +145,19 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              // @remove-on-eject-begin
               baseConfig: {
                 extends: [require.resolve('eslint-config-react-app')],
               },
+              // @remove-on-eject-begin
               ignore: false,
               useEslintrc: false,
               // @remove-on-eject-end
             },
             loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
+        include: paths.srcPaths,
+        exclude: [/[/\\\\]node_modules[/\\\\]/],
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -178,7 +179,8 @@ module.exports = {
           // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
             use: [
               // This loader parallelizes code compilation, it is optional but
               // improves compile time on larger projects
@@ -188,8 +190,8 @@ module.exports = {
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
                   // @remove-on-eject-end
+                  presets: [require.resolve('babel-preset-react-app')],
                   // This is a feature of `babel-loader` for webpack (not Babel itself).
                   // It enables caching results in ./node_modules/.cache/babel-loader/
                   // directory for faster rebuilds.
@@ -275,8 +277,8 @@ module.exports = {
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
                   // @remove-on-eject-end
+                  presets: [require.resolve('babel-preset-react-app')],
                   cacheDirectory: true,
                 },
               },

packages/react-scripts/config/webpack.config.prod.js

@@ -152,20 +152,21 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              // @remove-on-eject-begin
               // TODO: consider separate config for production,
               // e.g. to enable no-console and no-debugger only in production.
               baseConfig: {
                 extends: [require.resolve('eslint-config-react-app')],
               },
+              // @remove-on-eject-begin
               ignore: false,
               useEslintrc: false,
               // @remove-on-eject-end
             },
             loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
+        include: paths.srcPaths,
+        exclude: [/[/\\\\]node_modules[/\\\\]/],
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -186,7 +187,8 @@ module.exports = {
           // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
             use: [
               // This loader parallelizes code compilation, it is optional but
               // improves compile time on larger projects
@@ -196,8 +198,8 @@ module.exports = {
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
                   // @remove-on-eject-end
+                  presets: [require.resolve('babel-preset-react-app')],
                   compact: true,
                   highlightCode: true,
                 },
@@ -317,8 +319,8 @@ module.exports = {
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
                   // @remove-on-eject-end
+                  presets: [require.resolve('babel-preset-react-app')],
                   cacheDirectory: true,
                 },
               },

packages/react-scripts/fixtures/kitchensink/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-app"]
+}

packages/react-scripts/fixtures/monorepos/packages/comp1/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Comp1 = () => <div>Comp1</div>;
+
+export default Comp1;

packages/react-scripts/fixtures/monorepos/packages/comp1/index.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Comp1 from '.';
+
+it('renders Comp1 without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Comp1 />, div);
+});

packages/react-scripts/fixtures/monorepos/packages/comp1/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "comp1",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  }
+}

packages/react-scripts/fixtures/monorepos/packages/comp2/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import Comp1 from 'comp1';
+
+const Comp2 = () => (
+  <div>
+    Comp2, nested Comp1: <Comp1 />
+  </div>
+);
+
+export default Comp2;

packages/react-scripts/fixtures/monorepos/packages/comp2/index.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Comp2 from '.';
+
+it('renders Comp2 without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Comp2 />, div);
+});

packages/react-scripts/fixtures/monorepos/packages/comp2/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "comp2",
+  "dependencies": {
+    "comp1": "^1.0.0"
+  },
+  "devDependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}

packages/react-scripts/fixtures/monorepos/packages/cra-app1/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/react-scripts/fixtures/monorepos/packages/cra-app1/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "cra-app1",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "comp2": "^1.0.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "development": [
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 edge versions"
+    ],
+    "production": [
+      ">1%",
+      "last 4 versions",
+      "Firefox ESR",
+      "not ie < 11"
+    ]
+  }
+}