From 7fd96e5a2bea1c8837fa7dbee8fb6e33a928a010 Mon Sep 17 00:00:00 2001 From: Stephen Kiers Date: Thu, 5 Jul 2018 12:28:43 -0600 Subject: [PATCH 1/3] added support for including node_module folders --- README.md | 11 +++++++++++ packages/react-scripts/config/paths.js | 6 ++++++ packages/react-scripts/config/webpack.config.dev.js | 5 ++++- packages/react-scripts/config/webpack.config.prod.js | 5 ++++- 4 files changed, 25 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2300fc11d..c76c9968e 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,17 @@ cd my-app/ npm start ``` +## Node_module packages that also need typescript processing +To enable typescript processing on node_module folders (npm packages) you may add the following environment variable to your package. +```sh +REACT_APP_TYPESCRIPT_NODE_MODULES_FOLDERS="$$folder name(s) space delimited$$" +``` +Ex. for internal, namespaced packages like `{root}/node_modules/@company-name/unique` you could set +```sh +REACT_APP_TYPESCRIPT_NODE_MODULES_FOLDERS="@company-name" +``` + + ## Migration In general, most upgrades won't require any migration steps to work, but if you experience problems after an upgrade, please file an issue, and we'll add it to the list of migration steps below. diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index cc6891d6a..8c9262390 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -68,6 +68,11 @@ module.exports = { // @remove-on-eject-begin const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath); +// create array of node_module folders that also need typescript processing +const folders = process.env.REACT_APP_TYPESCRIPT_NODE_MODULES_FOLDERS +const typescriptNodeModules = !folders ? [] : + folders.split(" ").map((folder) => resolveApp(`node_modules/${folder}`)); + // config before eject: we're in ./node_modules/react-scripts/config/ module.exports = { dotenv: resolveApp('.env'), @@ -90,6 +95,7 @@ module.exports = { // These properties only exist before ejecting: ownPath: resolveOwn('.'), ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3 + typescriptModules: typescriptNodeModules, }; const ownPackageJson = require('../package.json'); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 924e3e4f0..ec873b8e4 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -172,7 +172,10 @@ module.exports = { // Compile .tsx? { test: /\.(ts|tsx)$/, - include: paths.appSrc, + include: [ + paths.appSrc, + ...paths.typescriptModules + ], use: [ { loader: require.resolve('ts-loader'), diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 7cb33afd0..c0a886df4 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -176,7 +176,10 @@ module.exports = { // Compile .tsx? { test: /\.(ts|tsx)$/, - include: paths.appSrc, + include: [ + paths.appSrc, + ...paths.typescriptModules + ], use: [ { loader: require.resolve('ts-loader'), From a4e507889d25a07a0143deca97a30e8ef3418820 Mon Sep 17 00:00:00 2001 From: Stephen Kiers Date: Thu, 5 Jul 2018 12:49:01 -0600 Subject: [PATCH 2/3] fix tests --- packages/react-scripts/config/paths.js | 14 ++++++++------ .../react-scripts/config/webpack.config.dev.js | 5 +---- .../react-scripts/config/webpack.config.prod.js | 5 +---- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 8c9262390..e93da8896 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -41,8 +41,8 @@ const getPublicUrl = appPackageJson => // like /todos/42/static/js/bundle.7289d.js. We have to know the root. function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); - const servedUrl = envPublicUrl || - (publicUrl ? url.parse(publicUrl).pathname : '/'); + const servedUrl = + envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); return ensureSlash(servedUrl, true); } @@ -69,9 +69,10 @@ module.exports = { const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath); // create array of node_module folders that also need typescript processing -const folders = process.env.REACT_APP_TYPESCRIPT_NODE_MODULES_FOLDERS -const typescriptNodeModules = !folders ? [] : - folders.split(" ").map((folder) => resolveApp(`node_modules/${folder}`)); +const folders = process.env.REACT_APP_TYPESCRIPT_NODE_MODULES_FOLDERS; +const typescriptNodeModules = !folders + ? [] + : folders.split(' ').map(folder => resolveApp(`node_modules/${folder}`)); // config before eject: we're in ./node_modules/react-scripts/config/ module.exports = { @@ -100,7 +101,8 @@ module.exports = { const ownPackageJson = require('../package.json'); const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`); -const reactScriptsLinked = fs.existsSync(reactScriptsPath) && +const reactScriptsLinked = + fs.existsSync(reactScriptsPath) && fs.lstatSync(reactScriptsPath).isSymbolicLink(); // config before publish: we're in ./packages/react-scripts/config/ diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index ec873b8e4..8a2643ecb 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -172,10 +172,7 @@ module.exports = { // Compile .tsx? { test: /\.(ts|tsx)$/, - include: [ - paths.appSrc, - ...paths.typescriptModules - ], + include: [paths.appSrc, ...(paths.typescriptModules || [])], use: [ { loader: require.resolve('ts-loader'), diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c0a886df4..2340bad6a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -176,10 +176,7 @@ module.exports = { // Compile .tsx? { test: /\.(ts|tsx)$/, - include: [ - paths.appSrc, - ...paths.typescriptModules - ], + include: [paths.appSrc, ...(paths.typescriptModules || [])], use: [ { loader: require.resolve('ts-loader'), From d365a355b69be3c02131f78396ac9d7a3b9caffd Mon Sep 17 00:00:00 2001 From: Stephen Kiers Date: Mon, 9 Jul 2018 16:00:59 -0600 Subject: [PATCH 3/3] process @zept folder --- packages/react-scripts/scripts/utils/createJestConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index 515e56364..4fd78dbfb 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -41,7 +41,7 @@ module.exports = (resolve, rootDir, isEjecting) => { ), }, transformIgnorePatterns: [ - '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$', + '[/\\\\]node_modules[/\\\\](?!@zept).+\\.(js|jsx|mjs|ts|tsx)$', ], moduleNameMapper: { '^react-native$': 'react-native-web',