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..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); } @@ -68,6 +68,12 @@ 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,11 +96,13 @@ 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'); 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 924e3e4f0..8a2643ecb 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -172,7 +172,7 @@ 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..2340bad6a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -176,7 +176,7 @@ 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/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',