diff --git a/app/client/.babelrc b/app/client/.babelrc
index bad109521ae8..b933a21da7ed 100644
--- a/app/client/.babelrc
+++ b/app/client/.babelrc
@@ -1,4 +1,16 @@
{
+ "presets": [
+ ["@babel/preset-env", {
+ "useBuiltIns": "entry",
+ "corejs": 3
+ }],
+ ["@babel/preset-react", {
+ "runtime": "automatic",
+ "development": true,
+ "importSource": "@welldone-software/why-did-you-render"
+ }],
+ "@babel/preset-typescript"
+ ],
"plugins": [
["module-resolver", {
"root": ["./src"],
@@ -10,11 +22,20 @@
"components": "./src/components/",
"selectors": "./src/selectors/",
"reducers": "./src/reducers/",
- "actions":"./src/actions/",
+ "actions": "./src/actions/",
"api": "./src/api/",
"assets": "./src/assets/",
- "sagas": "./src/sagas/"
+ "sagas": "./src/sagas/",
+ "ee": "./src/ee/",
+ "workbox-*": "../node_modules/workbox-*"
}
- }, "babel-plugin-styled-components"]
+ }],
+ "@babel/plugin-transform-runtime",
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-proposal-private-methods", { "loose": true }],
+ ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+ ["@babel/plugin-proposal-object-rest-spread", { "loose": true }],
+ "babel-plugin-styled-components"
]
}
diff --git a/app/client/.eslintrc.base.json b/app/client/.eslintrc.base.json
index 8b4f5036e02e..95aa0ec2422d 100644
--- a/app/client/.eslintrc.base.json
+++ b/app/client/.eslintrc.base.json
@@ -1,7 +1,14 @@
-// This file is a base for all package-specific ESLint configurations
{
"$schema": "http://json.schemastore.org/eslintrc",
"root": true,
+ "extends": [
+ "plugin:@typescript-eslint/recommended",
+ "plugin:@typescript-eslint/strict-type-checked",
+ "plugin:@typescript-eslint/stylistic-type-checked",
+ "plugin:react/recommended",
+ "plugin:react-hooks/recommended",
+ "prettier"
+ ],
"parser": "@typescript-eslint/parser",
"ignorePatterns": [
"jest.config.js",
@@ -10,9 +17,9 @@
".eslintrc.js"
],
"plugins": [
- "react",
- "eslint-plugin-react-compiler",
"@typescript-eslint",
+ "react",
+ "react-hooks",
"prettier",
"sort-destructure-keys",
"cypress",
@@ -21,67 +28,171 @@
"@appsmith",
"react-perf"
],
- "extends": [
- "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
- "plugin:@typescript-eslint/recommended",
- "plugin:cypress/recommended",
- "plugin:testing-library/react",
- "plugin:react-hooks/recommended",
- "plugin:@appsmith/recommended",
- "plugin:react-perf/recommended",
- // Note: Please keep this as the last config to make sure that this (and by extension our .prettierrc file) overrides all configuration above it
- // https://www.npmjs.com/package/eslint-plugin-prettier#recommended-configuration
- "plugin:prettier/recommended"
- ],
"parserOptions": {
- "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
- "sourceType": "module", // Allows for the use of imports
+ "ecmaVersion": 2024,
+ "sourceType": "module",
+ "project": true,
+ "tsconfigRootDir": ".",
"ecmaFeatures": {
- "jsx": true // Allows for the parsing of JSX
- },
- "project": "./tsconfig.json"
+ "jsx": true
+ }
},
"rules": {
- "react-compiler/react-compiler": "warn",
+ "@typescript-eslint/consistent-type-assertions": "warn",
+ "@typescript-eslint/prefer-function-type": "warn",
+ "@typescript-eslint/no-empty-interface": "warn",
+ "@typescript-eslint/no-empty-function": "warn",
+ "@typescript-eslint/prefer-string-starts-ends-with": "warn",
+ "@typescript-eslint/prefer-reduce-type-parameter": "warn",
+ "@typescript-eslint/prefer-for-of": "warn",
+ "@typescript-eslint/no-unnecessary-type-arguments": "warn",
+ "@typescript-eslint/no-unnecessary-boolean-literal-compare": "warn",
+ "@typescript-eslint/dot-notation": "warn",
+ "@typescript-eslint/no-unnecessary-type-assertion": "warn",
+ "@typescript-eslint/prefer-includes": "warn",
+ "@typescript-eslint/no-inferrable-types": "warn",
+ "@typescript-eslint/no-throw-literal": "warn",
+ "@typescript-eslint/prefer-optional-chain": "warn",
+ "@typescript-eslint/array-type": "warn",
+ "@typescript-eslint/consistent-generic-constructors": "warn",
+ "@typescript-eslint/consistent-indexed-object-style": "warn",
+ "@typescript-eslint/no-confusing-void-expression": "warn",
+ "@typescript-eslint/non-nullable-type-assertion-style": "warn",
+ "@typescript-eslint/no-useless-template-literals": "warn",
+ "@typescript-eslint/no-unnecessary-condition": "warn",
+ "@typescript-eslint/no-implied-eval": "warn",
+ "@typescript-eslint/restrict-plus-operands": "warn",
+ "@typescript-eslint/no-base-to-string": "warn",
+ "@typescript-eslint/no-unused-vars": "warn",
+ "@typescript-eslint/no-for-in-array": "warn",
+ "@typescript-eslint/no-extraneous-class": "warn",
+ "@typescript-eslint/no-redundant-type-constituents": "warn",
+ "@typescript-eslint/restrict-template-expressions": "warn",
+ "@typescript-eslint/no-invalid-void-type": "warn",
+ "@typescript-eslint/no-useless-constructor": "warn",
+ "@typescript-eslint/no-misused-promises": "warn",
+ "@typescript-eslint/no-non-null-assertion": "warn",
+ "@typescript-eslint/require-await": "warn",
+ "@typescript-eslint/no-floating-promises": "warn",
+ "@typescript-eslint/await-thenable": "warn",
+ "@typescript-eslint/no-dynamic-delete": "warn",
+ "@typescript-eslint/no-unsafe-enum-comparison": "warn",
+ "@typescript-eslint/no-use-before-define": "warn",
+ "@typescript-eslint/unbound-method": "warn",
+ "@typescript-eslint/no-unsafe-argument": "warn",
+ "@typescript-eslint/no-unsafe-assignment": "warn",
+ "@typescript-eslint/no-unsafe-call": "warn",
+ "@typescript-eslint/no-unsafe-return": "warn",
+ "@typescript-eslint/no-unsafe-member-access": "warn",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/no-explicit-any": "warn",
+ "@typescript-eslint/consistent-type-imports": [
+ "error",
+ {
+ "prefer": "type-imports",
+ "fixStyle": "separate-type-imports"
+ }
+ ],
+ "@typescript-eslint/no-import-type-side-effects": "error",
+ "react/react-in-jsx-scope": "off",
+ "react/prop-types": "off",
+ "@typescript-eslint/no-restricted-imports": [
+ "error",
+ {
+ "patterns": [
+ {
+ "group": [
+ "@blueprintjs/core/lib/esnext/*"
+ ],
+ "message": "Reason: @blueprintjs/core has both lib/esnext and lib/esm directories which export the same components. To avoid duplicating components in the bundle, please import only from the lib/esm directory."
+ },
+ {
+ "group": [
+ "*.svg"
+ ],
+ "importNames": [
+ "ReactComponent"
+ ],
+ "message": "Reason: Please don't import SVG icons statically. (They won't always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please either import them as SVG paths (e.g. import starIconUrl from './star.svg'), or use the importSvg wrapper from @appsmith/ads-old (e.g. const StarIcon = importSvg(() => import('./star.svg')))."
+ },
+ {
+ "group": [
+ "remixicon-react/*"
+ ],
+ "message": "Reason: Please don't import Remix icons statically. (They won't always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please use the importRemixIcon wrapper from @appsmith/ads-old (e.g. const StarIcon = importRemixIcon(() => import('remixicon-react/Star')))."
+ }
+ ]
+ }
+ ],
"padding-line-between-statements": [
"error",
- { "blankLine": "always", "prev": "*", "next": "return" },
{
"blankLine": "always",
"prev": "*",
- "next": ["if", "for", "while"]
+ "next": "return"
},
{
"blankLine": "always",
- "prev": ["if", "for", "while"],
+ "prev": "*",
+ "next": [
+ "if",
+ "for",
+ "while"
+ ]
+ },
+ {
+ "blankLine": "always",
+ "prev": [
+ "if",
+ "for",
+ "while"
+ ],
+ "next": "*"
+ },
+ {
+ "blankLine": "always",
+ "prev": [
+ "const",
+ "let"
+ ],
"next": "*"
},
- { "blankLine": "always", "prev": ["const", "let"], "next": "*" },
{
"blankLine": "any",
- "prev": ["const", "let"],
- "next": ["const", "let"]
+ "prev": [
+ "const",
+ "let"
+ ],
+ "next": [
+ "const",
+ "let"
+ ]
+ },
+ {
+ "blankLine": "always",
+ "prev": "*",
+ "next": "function"
},
- { "blankLine": "always", "prev": "*", "next": "function" },
- { "blankLine": "always", "prev": "function", "next": "*" }
+ {
+ "blankLine": "always",
+ "prev": "function",
+ "next": "*"
+ }
],
"testing-library/consistent-data-testid": [
"warn",
{
"testIdPattern": "^t--[a-zA-Z0-9_.-]*$",
- "testIdAttribute": ["data-testid"]
+ "testIdAttribute": [
+ "data-testid"
+ ]
}
],
- "@typescript-eslint/consistent-type-definitions": "error",
"@typescript-eslint/prefer-nullish-coalescing": "error",
"@typescript-eslint/promise-function-async": "error",
"@typescript-eslint/strict-boolean-expressions": "error",
- "@typescript-eslint/no-explicit-any": "error",
- "@typescript-eslint/no-unused-vars": "error",
"jest/no-focused-tests": "error",
"jest/no-disabled-tests": "error",
- // enforce `import type` for all type-only imports so the bundler knows to erase them
- "@typescript-eslint/consistent-type-imports": "error",
"react/jsx-boolean-value": "error",
"react/self-closing-comp": "error",
"react/jsx-sort-props": "error",
@@ -89,7 +200,9 @@
"react/jsx-no-useless-fragment": "error",
"sort-destructure-keys/sort-destructure-keys": [
"error",
- { "caseSensitive": false }
+ {
+ "caseSensitive": false
+ }
],
"no-console": "error",
"no-debugger": "error",
@@ -99,30 +212,8 @@
"react-perf/jsx-no-new-object-as-prop": [
"warn",
{
- // we are disabling this rule here for native component since it won't make much difference in performance
- // we want to target react components more since there is possibility they can be pure components and new istance props should be avoided for them
"nativeAllowList": "all"
}
- ],
- "@typescript-eslint/no-restricted-imports": [
- "error",
- {
- "patterns": [
- {
- "group": ["@blueprintjs/core/lib/esnext/*"],
- "message": "Reason: @blueprintjs/core has both lib/esnext and lib/esm directories which export the same components. To avoid duplicating components in the bundle, please import only from the lib/esm directory."
- },
- {
- "group": ["*.svg"],
- "importNames": ["ReactComponent"],
- "message": "Reason: Please don’t import SVG icons statically. (They won’t always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please either import them as SVG paths (e.g. import starIconUrl from './star.svg'), or use the importSvg wrapper from @appsmith/ads-old (e.g. const StarIcon = importSvg(() => import('./star.svg')))."
- },
- {
- "group": ["remixicon-react/*"],
- "message": "Reason: Please don’t import Remix icons statically. (They won’t always be needed, but they *will* always be present in the bundle and will increase the bundle size.) Instead, please use the importRemixIcon wrapper from @appsmith/ads-old (e.g. const StarIcon = importRemixIcon(() => import('remixicon-react/Star')))."
- }
- ]
- }
]
},
"settings": {
@@ -131,7 +222,6 @@
},
"react": {
"pragma": "React",
- // Tells eslint-plugin-react to automatically detect the version of React to use
"version": "detect"
}
},
@@ -141,4 +231,4 @@
"cypress/globals": true,
"worker": true
}
-}
+}
\ No newline at end of file
diff --git a/app/client/build.sh b/app/client/build.sh
index c42a32a0c366..0afae6b9a3c7 100755
--- a/app/client/build.sh
+++ b/app/client/build.sh
@@ -18,6 +18,6 @@ export REACT_APP_SENTRY_RELEASE=$GIT_SHA
export REACT_APP_CLIENT_LOG_LEVEL=ERROR
# Disable CRA built-in ESLint checks since we have our own config and a separate step for this
export DISABLE_ESLINT_PLUGIN=true
-craco --max-old-space-size=10240 build --config craco.build.config.js
+node --max-old-space-size=16000 scripts/build.js
echo "build finished"
diff --git a/app/client/config/env.js b/app/client/config/env.js
new file mode 100644
index 000000000000..ffa7e496aacd
--- /dev/null
+++ b/app/client/config/env.js
@@ -0,0 +1,104 @@
+'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.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+ throw new Error(
+ 'The NODE_ENV environment variable is required but was not specified.'
+ );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+ `${paths.dotenv}.${NODE_ENV}.local`,
+ // Don't include `.env.local` for `test` environment
+ // since normally you expect tests to produce the same
+ // results for everyone
+ NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+ `${paths.dotenv}.${NODE_ENV}`,
+ paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set. Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+ if (fs.existsSync(dotenvFile)) {
+ require('dotenv-expand')(
+ require('dotenv').config({
+ path: dotenvFile,
+ })
+ );
+ }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// 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);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+ const raw = Object.keys(process.env)
+ .filter(key => REACT_APP.test(key))
+ .reduce(
+ (env, key) => {
+ env[key] = process.env[key];
+ return env;
+ },
+ {
+ // Useful for determining whether we’re running in production mode.
+ // Most importantly, it switches React into the correct mode.
+ NODE_ENV: process.env.NODE_ENV || 'development',
+ // Useful for resolving the correct path to static assets in `public`.
+ // For example,
.
+ // This should only be used as an escape hatch. Normally you would put
+ // images into the `src` and `import` them in code to get their paths.
+ PUBLIC_URL: publicUrl,
+ // We support configuring the sockjs pathname during development.
+ // These settings let a developer run multiple simultaneous projects.
+ // They are used as the connection `hostname`, `pathname` and `port`
+ // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+ // and `sockPort` options in webpack-dev-server.
+ WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+ WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+ WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+ // Whether or not react-refresh is enabled.
+ // It is defined here so it is available in the webpackHotDevClient.
+ FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+ }
+ );
+ // Stringify all values so we can feed into webpack DefinePlugin
+ const stringified = {
+ 'process.env': Object.keys(raw).reduce((env, key) => {
+ env[key] = JSON.stringify(raw[key]);
+ return env;
+ }, {}),
+ };
+
+ return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;
diff --git a/app/client/config/getHttpsConfig.js b/app/client/config/getHttpsConfig.js
new file mode 100644
index 000000000000..013d493c1bbe
--- /dev/null
+++ b/app/client/config/getHttpsConfig.js
@@ -0,0 +1,66 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
+
+// Ensure the certificate and key provided are valid and if not
+// throw an easy to debug error
+function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+ let encrypted;
+ try {
+ // publicEncrypt will throw an error with an invalid cert
+ encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+ } catch (err) {
+ throw new Error(
+ `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+ );
+ }
+
+ try {
+ // privateDecrypt will throw an error with an invalid key
+ crypto.privateDecrypt(key, encrypted);
+ } catch (err) {
+ throw new Error(
+ `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+ err.message
+ }`
+ );
+ }
+}
+
+// Read file and throw an error if it doesn't exist
+function readEnvFile(file, type) {
+ if (!fs.existsSync(file)) {
+ throw new Error(
+ `You specified ${chalk.cyan(
+ type
+ )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+ );
+ }
+ return fs.readFileSync(file);
+}
+
+// Get the https config
+// Return cert files if provided in env, otherwise just true or false
+function getHttpsConfig() {
+ const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+ const isHttps = HTTPS === 'true';
+
+ if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+ const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+ const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+ const config = {
+ cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+ key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+ };
+
+ validateKeyAndCerts({ ...config, keyFile, crtFile });
+ return config;
+ }
+ return isHttps;
+}
+
+module.exports = getHttpsConfig;
diff --git a/app/client/config/jest/babelTransform.js b/app/client/config/jest/babelTransform.js
new file mode 100644
index 000000000000..5b391e405562
--- /dev/null
+++ b/app/client/config/jest/babelTransform.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const babelJest = require('babel-jest').default;
+
+const hasJsxRuntime = (() => {
+ if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+ return false;
+ }
+
+ try {
+ require.resolve('react/jsx-runtime');
+ return true;
+ } catch (e) {
+ return false;
+ }
+})();
+
+module.exports = babelJest.createTransformer({
+ presets: [
+ [
+ require.resolve('babel-preset-react-app'),
+ {
+ runtime: hasJsxRuntime ? 'automatic' : 'classic',
+ },
+ ],
+ ],
+ babelrc: false,
+ configFile: false,
+});
diff --git a/app/client/config/jest/cssTransform.js b/app/client/config/jest/cssTransform.js
new file mode 100644
index 000000000000..8f65114812a4
--- /dev/null
+++ b/app/client/config/jest/cssTransform.js
@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+ process() {
+ return 'module.exports = {};';
+ },
+ getCacheKey() {
+ // The output is always the same.
+ return 'cssTransform';
+ },
+};
diff --git a/app/client/config/jest/fileTransform.js b/app/client/config/jest/fileTransform.js
new file mode 100644
index 000000000000..aab67618c38b
--- /dev/null
+++ b/app/client/config/jest/fileTransform.js
@@ -0,0 +1,40 @@
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+ process(src, filename) {
+ const assetFilename = JSON.stringify(path.basename(filename));
+
+ if (filename.match(/\.svg$/)) {
+ // Based on how SVGR generates a component name:
+ // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+ const pascalCaseFilename = camelcase(path.parse(filename).name, {
+ pascalCase: true,
+ });
+ const componentName = `Svg${pascalCaseFilename}`;
+ return `const React = require('react');
+ module.exports = {
+ __esModule: true,
+ default: ${assetFilename},
+ ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+ return {
+ $$typeof: Symbol.for('react.element'),
+ type: 'svg',
+ ref: ref,
+ key: null,
+ props: Object.assign({}, props, {
+ children: ${assetFilename}
+ })
+ };
+ }),
+ };`;
+ }
+
+ return `module.exports = ${assetFilename};`;
+ },
+};
diff --git a/app/client/config/modules.js b/app/client/config/modules.js
new file mode 100644
index 000000000000..c483279e3481
--- /dev/null
+++ b/app/client/config/modules.js
@@ -0,0 +1,85 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('react-dev-utils/chalk');
+const resolve = require('resolve');
+const ts = require('typescript');
+
+/**
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePaths(options = {}) {
+ const baseUrl = options.baseUrl;
+
+ // We need to explicitly check for null and undefined (and not a falsy value) because
+ // TypeScript can be explicitly configured to use [''] as the baseUrl.
+ if (baseUrl == null) {
+ const config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+ const { baseUrl: tsConfigBaseUrl } = config.compilerOptions || {};
+ if (tsConfigBaseUrl) {
+ return [path.resolve(paths.appPath, tsConfigBaseUrl)];
+ }
+ }
+
+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+ // We don't need to do any glob matching since TypeScript's path mappings are based on baseUrl
+ if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+ return null;
+ }
+
+ if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+ return null;
+ }
+
+ // 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 webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+ const baseUrl = options.baseUrl;
+
+ if (!baseUrl) {
+ const config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+ const { baseUrl: tsConfigBaseUrl, paths: tsConfigPaths } = config.compilerOptions || {};
+
+ if (tsConfigBaseUrl && tsConfigPaths) {
+ const webpackAliases = {};
+ Object.keys(tsConfigPaths).forEach(key => {
+ const path = tsConfigPaths[key][0];
+ if (path) {
+ webpackAliases[key.replace('/*', '')] = path.replace('/*', '');
+ }
+ });
+ return webpackAliases;
+ }
+ return {};
+ }
+
+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+ if (path.relative(paths.appPath, baseUrlResolved) === '') {
+ return {
+ src: paths.appSrc,
+ };
+ }
+}
+
+module.exports = {
+ getAdditionalModulePaths,
+ getWebpackAliases,
+};
diff --git a/app/client/config/paths.js b/app/client/config/paths.js
new file mode 100644
index 000000000000..9909a3161e1d
--- /dev/null
+++ b/app/client/config/paths.js
@@ -0,0 +1,71 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right