Initial monorepo support, facebook#3741.

Author: bradfordlemley

.travis.yml

@@ -19,13 +19,15 @@ script:
   - 'if [ $TEST_SUITE = "kitchensink-eject" ]; then tasks/e2e-kitchensink-eject.sh; fi'
   - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi'
   - 'if [ $TEST_SUITE = "behavior" ]; then tasks/e2e-behavior.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=kitchensink-eject
     - TEST_SUITE=behavior
+    - TEST_SUITE=monorepos
 matrix:
   include:
     - os: osx

appveyor.yml

@@ -20,6 +20,8 @@ environment:
       test_suite: 'kitchensink'
     - nodejs_version: 8
       test_suite: 'kitchensink-eject'
+    - nodejs_version: 8
+      test_suite: "monorepos"
 cache:
   - '%APPDATA%\npm-cache -> appveyor.cleanup-cache.txt'
   - '%LOCALAPPDATA%\Yarn\Cache -> appveyor.cleanup-cache.txt'

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

@@ -1,16 +1,19 @@
-// @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,
   configFile: 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/facebook/create-react-app/issues/637
@@ -92,6 +94,8 @@ module.exports = {
   servedPath: getServedPath(resolveApp('package.json')),
 };
 
+let checkForMonorepo = true;
+
 // @remove-on-eject-begin
 const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
 
@@ -119,17 +123,13 @@ module.exports = {
   ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
 };
 
-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('.'),
@@ -156,3 +156,40 @@ if (
 // @remove-on-eject-end
 
 module.exports.moduleFileExtensions = moduleFileExtensions;
+
+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

@@ -153,9 +153,11 @@ module.exports = {
     // https://github.com/facebook/create-react-app/issues/290
     // `web` extension prefixes have been added for better support
     // for React Native Web.
-    extensions: paths.moduleFileExtensions
-      .map(ext => `.${ext}`)
-      .filter(ext => useTypeScript || !ext.includes('ts')),
+    extensions: paths.jsExts.concat(
+      paths.moduleFileExtensions
+        .map(ext => `.${ext}`)
+        .filter(ext => useTypeScript || !ext.includes('ts'))
+    ),
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -196,19 +198,20 @@ module.exports = {
             options: {
               formatter: require.resolve('react-dev-utils/eslintFormatter'),
               eslintPath: require.resolve('eslint'),
-              // @remove-on-eject-begin
               baseConfig: {
                 extends: [require.resolve('eslint-config-react-app')],
                 settings: { react: { version: '999.999.999' } },
               },
+              // @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
@@ -230,7 +233,8 @@ module.exports = {
           // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|mjs|jsx|ts|tsx)$/,
-            include: paths.appSrc,
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
             loader: require.resolve('babel-loader'),
             options: {
               customize: require.resolve(

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

@@ -270,21 +270,22 @@ module.exports = {
             options: {
               formatter: require.resolve('react-dev-utils/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')],
                 settings: { react: { version: '999.999.999' } },
               },
+              // @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
@@ -305,8 +306,8 @@ module.exports = {
           // The preset includes JSX, Flow, TypeScript and some ESnext features.
           {
             test: /\.(js|mjs|jsx|ts|tsx)$/,
-            include: paths.appSrc,
-
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
             loader: require.resolve('babel-loader'),
             options: {
               customize: require.resolve(

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;