Only typecheck relevant packages when building with webpack

.changeset/warm-rice-call.md

@@ -0,0 +1,6 @@
+---
+'modular-scripts': minor
+---
+
+When building with webpack, only typecheck the package being built and its
+dependants

packages/modular-scripts/src/build-scripts/buildStandalone.ts

@@ -126,6 +126,7 @@ export async function buildStandalone(
     // so --preserve-modules has no effect here
 
     const stats = await buildWebpack(
+      target,
       esbuildTargetFactory,
       isApp,
       importInfo,

packages/modular-scripts/src/build-scripts/webpack-scripts/buildWebpack.ts

@@ -15,6 +15,7 @@ import type { Paths } from '../common-scripts/determineTargetPaths';
 import type { ImportInfo } from '../../utils/importInfo';
 
 export default async function buildWebpack(
+  target: string,
   esbuildTargetFactory: string[],
   isApp: boolean,
   importInfo: ImportInfo,
@@ -23,6 +24,7 @@ export default async function buildWebpack(
   paths: Paths,
 ): Promise<StatsCompilation> {
   const webpackConfig: Configuration = await getConfig(
+    target,
     true,
     esbuildTargetFactory,
     isApp,

packages/modular-scripts/src/build-scripts/webpack-scripts/config/parts/pluginConfig.ts

@@ -10,6 +10,7 @@ import { createAppPluginConfig } from './appConfig';
 import { createDevelopmentPluginConfig } from './developmentConfig';
 import { createProductionPluginConfig } from './productionConfig';
 import getClientEnvironment from '../../../common-scripts/getClientEnvironment';
+import { selectWorkspaces } from '../../../../utils/selectWorkspaces';
 import type { Paths } from '../../../common-scripts/determineTargetPaths';
 
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
@@ -21,18 +22,36 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 // Get environment variables to inject into our app.
 
-export default function createPluginConfig(
+export default async function createPluginConfig(
+  target: string,
   isApp: boolean,
   isEnvProduction: boolean,
   shouldUseSourceMap: boolean,
   useTypeScript: boolean,
   styleImports: Set<string>,
   paths: Paths,
   indexPath: string | false,
-): Configuration {
+): Promise<Configuration> {
   const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
   const isEnvDevelopment = !isEnvProduction;
 
+  // Typecheck package to build and descendants
+  const packagesToTypecheck = await selectWorkspaces({
+    targets: [target],
+    ancestors: false,
+    descendants: true,
+    changed: false,
+  });
+
+  const pathsToTypecheck = packagesToTypecheck.map((pkg) => {
+    return {
+      file: `../${pkg}/src/**/*.{ts,tsx}`,
+    };
+  });
+  // For some reason the above doesn't work for the package we're building itself
+  // so we add it separately
+  pathsToTypecheck.push({ file: `**/src/**/*.{ts,tsx}` });
+
   const basePlugins: Configuration = {
     plugins: [
       // This gives some necessary context to module not found errors, such as
@@ -112,10 +131,7 @@ export default function createPluginConfig(
             // as micromatch doesn't match
             // '../cra-template-typescript/template/src/App.tsx'
             // otherwise.
-            include: [
-              { file: '../**/src/**/*.{ts,tsx}' },
-              { file: '**/src/**/*.{ts,tsx}' },
-            ],
+            include: pathsToTypecheck,
             exclude: [
               { file: '**/src/**/__tests__/**' },
               { file: '**/src/**/?(*.){spec|test}.*' },

packages/modular-scripts/src/build-scripts/webpack-scripts/config/webpack.config.ts

@@ -37,6 +37,7 @@ const imageInlineSizeLimit = parseInt(
  * @returns Promise containing webpack configuration
  */
 export default async function getWebpackConfig(
+  target: string,
   isEnvProduction: boolean,
   esbuildTargetFactory: string[],
   isApp: boolean,
@@ -91,7 +92,8 @@ export default async function getWebpackConfig(
   // If an index is provided, this is its path. Otherwise false.
   const indexPath = fs.existsSync(targetPaths.appHtml) && targetPaths.appHtml;
   // Plugin configuration
-  const pluginConfig = createPluginConfig(
+  const pluginConfig = await createPluginConfig(
+    target,
     isApp,
     isEnvProduction,
     shouldUseSourceMap,

packages/modular-scripts/src/build-scripts/webpack-scripts/startWebpack.ts

@@ -20,6 +20,7 @@ const DEFAULT_PORT = portEnv ? parseInt(portEnv, 10) : 3000;
 const HOST = process.env.HOST || '0.0.0.0';
 
 export default function startWebpack(
+  target: string,
   esbuildTargetFactory: string[],
   isApp: boolean,
   importInfo: ImportInfo,
@@ -50,6 +51,7 @@ export default function startWebpack(
       }
 
       const config = await getConfig(
+        target,
         false,
         esbuildTargetFactory,
         isApp,

packages/modular-scripts/src/start.ts

@@ -116,6 +116,7 @@ async function start(packageName: string): Promise<void> {
 
     logger.debug(`Using target: ${browserTarget.join(', ')}`);
     startWebpack(
+      target,
       esbuildTargetFactory,
       !isEsmView,
       importInfo,