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

packages/react-scripts/config/config.js

@@ -0,0 +1,123 @@
+// @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');
+
+function isValidPath(path) {
+  return (
+    paths.relative(paths.appSrc, path) === '.' ||
+    paths.relative(paths.appNodeModules, path) === '.'
+  );
+}
+
+/**
+ * Get the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getBaseUrl(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return null;
+  }
+
+  const baseUrlResolved = path.resolve(paths.appDirectory, baseUrl);
+
+  if (!isValidPath(baseUrlResolved)) {
+    console.error(
+      chalk.red.bold(
+        "You tried to set baseUrl to anything other than 'src' or 'node_modules'.This is not supported in create-react-app and will be ignored."
+      )
+    );
+
+    return null;
+  }
+
+  return path.resolve(paths.appDirectory, 'src');
+}
+
+/**
+ * Get the alias of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAlias(options = {}) {
+  const paths = options.paths || {};
+
+  const alias = paths['@'];
+
+  const others = Object.keys(paths).filter(function(value) {
+    return value !== '@';
+  });
+
+  if (others.length) {
+    console.error(
+      chalk.red.bold(
+        'You tried to set one or more paths with an alias other than "@", this is currently not supported in create-react-app and will be ignored.'
+      )
+    );
+  }
+
+  if (!alias) {
+    return {};
+  }
+
+  if (alias.toString() !== 'src') {
+    console.error(
+      chalk.red.bold(
+        "You tried to set a path with alias '@' to anything other than ['src']. This is not supported in create-react-app and will be ignored."
+      )
+    );
+  }
+
+  return {
+    '@': path.resolve(paths.appDirectory, 'src'),
+  };
+}
+
+function getConfig() {
+  // 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 || {};
+
+  return {
+    alias: getAlias(options),
+    baseUrl: getBaseUrl(options),
+    useTypeScript,
+  };
+}
+
+module.exports = getConfig();

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/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,8 @@ 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 config = require('./config');
+console.log(JSON.stringify(config));
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
@@ -258,10 +260,7 @@ module.exports = function(webpackEnv) {
       // We placed these paths second because we want `node_modules` to "win"
       // 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: ['node_modules'].concat(config.baseUrl ? [config.baseUrl] : []),
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
       // some tools, although we do not recommend using it, see:
@@ -275,6 +274,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',
+        ...config.alias,
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
@@ -629,6 +629,7 @@ module.exports = function(webpackEnv) {
             isolatedModules: true,
             noEmit: true,
             jsx: 'preserve',
+            baseUrl: config.baseUrl,
           },
           reportFiles: [
             '**',

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": {
+      "@": ["src"]
+    }
+  }
+}

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);
     });
   });
 });

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

@@ -30,7 +30,7 @@ export default class extends Component {
 
   render() {
     return (
-      <div id="feature-node-path">
+      <div id="feature-base-url">
         {this.state.users.map(user => (
           <div key={user.id}>{user.name}</div>
         ))}

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

@@ -0,0 +1,19 @@
+/**
+ * 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 from 'react';
+import ReactDOM from 'react-dom';
+import BaseUrl from './BaseUrl';
+
+describe('baseUrl', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    return new Promise(resolve => {
+      ReactDOM.render(<BaseUrl onReady={resolve} />, div);
+    });
+  });
+});

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -10,6 +10,7 @@
 const fs = require('fs');
 const chalk = require('chalk');
 const paths = require('../../config/paths');
+const jsConfig = require('../../config/config');
 
 module.exports = (resolve, rootDir, isEjecting) => {
   // Use this instead of `paths.testsSetup` to avoid putting
@@ -57,6 +58,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
       '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
       '^.+\\.module\\.(css|sass|scss)$',
     ],
+    modulePaths: jsConfig.baseUrl ? [jsConfig.baseUrl] : [],
     moduleNameMapper: {
       '^react-native$': 'react-native-web',
       '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',