Set module resolution based on baseUrl in jsconfig/tsconfig.json

packages/react-scripts/config/env.js

@@ -9,7 +9,6 @@
 'use strict';
 
 const fs = require('fs');
-const path = require('path');
 const paths = require('./paths');
 
 // Make sure that including paths.js after env.js will read .env variables.
@@ -48,21 +47,14 @@ dotenvFiles.forEach(dotenvFile => {
   }
 });
 
-// We support resolving modules according to `NODE_PATH`.
+// We used to support resolving modules according to `NODE_PATH`.
+// This now has been deprecated in favor of jsconfig/tsconfig.json
 // This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebook/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
+if (process.env.NODE_PATH) {
+  console.log(
+    'Setting NODE_PATH to resolves modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using Typescript) to achieve the same behaviour.'
+  );
+}
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in Webpack configuration.

packages/react-scripts/config/modules.js

@@ -0,0 +1,183 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-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 fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const paths = require('./paths');
+
+/**
+ * Get the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePath(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  // We need to explicitly check for null and undefined (and not a falsy value) because
+  // TypeScript treats an empty string as `.`.
+  if (baseUrl == null) {
+    return null;
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
+  // the default behavior.
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Allow the user set the `baseUrl` to `appSrc`.
+  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+    return paths.appSrc;
+  }
+
+  // Otherwise, throw an error.
+  throw new Error(
+    chalk.red.bold(
+      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+        ' Create React App does not support other values at this time.'
+    )
+  );
+}
+
+/**
+ * Get the alias of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAliases(options = {}) {
+  // This is an object with the alias as key
+  // and an array of paths as value.
+  // e.g. '@': ['src']
+  const aliases = options.paths || {};
+
+  return Object.keys(aliases).reduce(function(prev, alias) {
+    // Value contains the paths of the alias.
+    const value = aliases[alias];
+
+    // The value should be an array but we have to verify
+    // that because it's user input.
+    if (!Array.isArray(value) || value.length > 1) {
+      throw new Error(
+        chalk.red.bold(
+          "Your project's `alias` can only be set to an array containing `src` or a subfolder of `src`." +
+            ' Create React App does not support other values at this time.'
+        )
+      );
+    }
+
+    const aliasPath = value[0];
+
+    // Alias paths are relative to the baseurl.
+    // If there is no baseUrl set, it will default to the root of the app.
+    const baseUrl = options.baseUrl
+      ? path.resolve(paths.appPath, options.baseUrl)
+      : paths.appPath;
+    const resolvedAliasPath = path.resolve(baseUrl, aliasPath);
+
+    // We then check if the resolved alias path is src or a sub folder of src.
+    const relativePath = path.relative(paths.appSrc, resolvedAliasPath);
+    const isSrc = relativePath === '';
+    const isSubfolderOfSrc =
+      !relativePath.startsWith('../') && !relativePath.startsWith('..\\');
+
+    if (!isSrc && !isSubfolderOfSrc) {
+      throw new Error(
+        chalk.red.bold(
+          "Your project's `alias` can only be set to ['src'] or a subfolder of `src`." +
+            ' Create React App does not support other values at this time.'
+        )
+      );
+    }
+
+    prev[alias] = resolvedAliasPath;
+    return prev;
+  }, {});
+}
+
+function getWebpackAliases(aliases) {
+  return Object.keys(aliases).reduce(function(prev, alias) {
+    let aliasPath = aliases[alias];
+    const endsWithWilcard = alias.endsWith('*');
+    // Remove trailing wildcards (/*)
+    alias = alias.replace(/\/?\*$/, '');
+    aliasPath = aliasPath.replace(/\/\*$/, '');
+    // Webpack aliases work a little bit different than jsconfig/tsconfig.json paths
+    // By default webpack aliases act as a wildcard and for an exact match you have
+    // to suffix it with a dollar sign.
+    // tsconfig/jsconfig.json work the other way around and are an exact match unless
+    // suffixed by a wildcard.
+    const webpackAlias = endsWithWilcard ? alias : alias + '$';
+    prev[webpackAlias] = aliasPath;
+    return prev;
+  }, {});
+}
+
+function getJestAliases(aliases) {
+  return Object.keys(aliases).reduce(function(prev, alias) {
+    const endsWithWilcard = alias.endsWith('*');
+    let aliasPath = aliases[alias];
+
+    alias = alias.replace(/\/?\*$/, '');
+    const match = endsWithWilcard ? alias + '(.*)$' : alias;
+
+    aliasPath = aliasPath.replace(/\*$/, '');
+    const relativeAliasPath = path.relative(paths.appPath, aliasPath);
+    const target = '<rootDir>/' + relativeAliasPath;
+
+    prev[match] = target + (endsWithWilcard ? '/$1' : '');
+    return prev;
+  }, {});
+}
+
+function getModules() {
+  // Check if TypeScript is setup
+  const useTypeScript = fs.existsSync(paths.appTsConfig);
+  const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+  if (useTypeScript && hasJsConfig) {
+    throw new Error(
+      'You have both a tsconfig.json and a jsconfig.json. If you are using Typescript please remove your jsconfig.json file.'
+    );
+  }
+
+  let config;
+
+  // If there's a tsconfig.json we assume it's a
+  // Typescript project and set up the config
+  // based on tsconfig.json
+  if (useTypeScript) {
+    config = require(paths.appTsConfig);
+    // Otherwise we'll check if there is jsconfig.json
+    // for non TS projects.
+  } else if (hasJsConfig) {
+    config = require(paths.appJsConfig);
+  }
+
+  config = config || {};
+  const options = config.compilerOptions || {};
+
+  const aliases = getAliases(options);
+  const jestAliases = getJestAliases(aliases);
+  const webpackAliases = getWebpackAliases(aliases);
+  const additionalModulePath = getAdditionalModulePath(options);
+
+  return {
+    aliases: aliases,
+    jestAliases: jestAliases,
+    webpackAliases: webpackAliases,
+    additionalModulePath: additionalModulePath,
+    useTypeScript,
+  };
+}
+
+module.exports = getModules();

packages/react-scripts/config/paths.js

@@ -84,6 +84,7 @@ module.exports = {
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
@@ -106,6 +107,7 @@ module.exports = {
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
@@ -140,6 +142,7 @@ if (
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     appTsConfig: resolveOwn('template/tsconfig.json'),
+    appJsConfig: resolveOwn('template/jsconfig.json'),
     yarnLockFile: resolveOwn('template/yarn.lock'),
     testsSetup: resolveModule(resolveOwn, 'template/src/setupTests'),
     proxySetup: resolveOwn('template/src/setupProxy.js'),

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

@@ -30,6 +30,7 @@ const paths = require('./paths');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
+const modules = require('./modules');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
@@ -259,8 +260,7 @@ module.exports = function(webpackEnv) {
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
       modules: ['node_modules'].concat(
-        // It is guaranteed to exist because we tweak it in `env.js`
-        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+        modules.additionalModulePath ? [modules.additionalModulePath] : []
       ),
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
@@ -275,6 +275,7 @@ module.exports = function(webpackEnv) {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
+        ...modules.webpackAliases,
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding

packages/react-scripts/fixtures/kitchensink/integration/config.test.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2015-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.
+ */
+
+import initDOM from './initDOM';
+
+describe('Integration', () => {
+  describe('jsconfig.json/tsconfig.json', () => {
+    it('Supports setting baseUrl to src', async () => {
+      const doc = await initDOM('base-url');
+
+      expect(doc.getElementById('feature-base-url').childElementCount).toBe(4);
+      doc.defaultView.close();
+    });
+
+    it('Supports setting @ as alias to src', async () => {
+      const doc = await initDOM('alias');
+
+      expect(doc.getElementById('feature-alias').childElementCount).toBe(4);
+      doc.defaultView.close();
+    });
+  });
+});

packages/react-scripts/fixtures/kitchensink/integration/env.test.js

@@ -37,13 +37,6 @@ describe('Integration', () => {
       doc.defaultView.close();
     });
 
-    it('NODE_PATH', async () => {
-      const doc = await initDOM('node-path');
-
-      expect(doc.getElementById('feature-node-path').childElementCount).toBe(4);
-      doc.defaultView.close();
-    });
-
     it('PUBLIC_URL', async () => {
       const doc = await initDOM('public-url');
 

packages/react-scripts/fixtures/kitchensink/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@*": ["*"]
+    }
+  }
+}

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -149,8 +149,13 @@ class App extends Component {
           this.setFeature(f.default)
         );
         break;
-      case 'node-path':
-        import('./features/env/NodePath').then(f => this.setFeature(f.default));
+      case 'base-url':
+        import('./features/config/BaseUrl').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
+      case 'alias':
+        import('./features/config/Alias').then(f => this.setFeature(f.default));
         break;
       case 'no-ext-inclusion':
         import('./features/webpack/NoExtInclusion').then(f =>

packages/react-scripts/fixtures/kitchensink/src/features/config/Alias.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2015-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.
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import load from '@/absoluteLoad';
+
+export default class extends Component {
+  static propTypes = {
+    onReady: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { users: [] };
+  }
+
+  async componentDidMount() {
+    const users = load();
+    this.setState({ users });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
+  }
+
+  render() {
+    return (
+      <div id="feature-alias">
+        {this.state.users.map(user => (
+          <div key={user.id}>{user.name}</div>
+        ))}
+      </div>
+    );
+  }
+}

packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js → packages/react-scripts/fixtures/kitchensink/src/features/config/Alias.test.js

@@ -7,13 +7,13 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import NodePath from './NodePath';
+import Alias from './Alias';
 
-describe('NODE_PATH', () => {
+describe('alias', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<NodePath onReady={resolve} />, div);
+      ReactDOM.render(<Alias onReady={resolve} />, div);
     });
   });
 });