chore: plan isWebpack5 refactor

Agent-Logs-Url: https://github.com/TypeStrong/ts-loader/sessions/e322b7ed-e010-4d60-9a2d-3672c9d55324

Co-authored-by: johnnyreilly <1010525+johnnyreilly@users.noreply.github.com>

Author: Copilot

.github/workflows/push.yml

@@ -50,6 +50,7 @@ jobs:
       matrix:
         node: [26, 24, 22]
         ts: [5.0.4, 5.1.3, 5.2.2, 5.3.3, 5.4.2, 5.5.3, 5.6.2, 5.7.2, 5.8.2, 5.9.2, 6.0.2] # next excluded for now
+        webpack: [4, 5]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
@@ -68,6 +69,10 @@ jobs:
       - name: install typescript
         run: yarn add typescript@${{ matrix.ts }}
 
+      - name: install webpack 4
+        if: matrix.webpack == 4
+        run: yarn add webpack@^4.47.0 karma-webpack@^4.0.2
+
       - name: test
         run: yarn execution-tests
 
@@ -77,6 +82,7 @@ jobs:
       matrix:
         node: [26, 24, 22]
         ts: [5.0.4, 5.1.3, 5.2.2, 5.3.3, 5.4.2, 5.5.3, 5.6.2, 5.7.2, 5.8.2, 5.9.2, 6.0.2] # next excluded for now
+        webpack: [4, 5]
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v6
@@ -104,6 +110,11 @@ jobs:
         run: yarn add typescript@${{ matrix.ts }}
         working-directory: C:\source\ts-loader
 
+      - name: install webpack 4
+        if: matrix.webpack == 4
+        run: yarn add webpack@^4.47.0 karma-webpack@^4.0.2
+        working-directory: C:\source\ts-loader
+
       - name: test
         run: yarn execution-tests
         working-directory: C:\source\ts-loader

README.md

@@ -136,7 +136,7 @@ If you'd like to see a simple setup take a look at [our example](examples/fork-t
 * webpack: 4.x+ and 5.x+
 * node: 12.x+
 
-A full test suite runs each night (and on each pull request). It runs both on Linux and Windows, testing `ts-loader` against major releases of TypeScript. Execution tests continue to run against webpack 5 in CI, and the test suite also runs against TypeScript@next (because we want to use it as much as you do).
+A full test suite runs each night (and on each pull request). It runs both on Linux and Windows, testing `ts-loader` against major releases of TypeScript and against both webpack 4 and webpack 5. Comparison tests run against webpack 5 only; execution tests run against both webpack 4 and webpack 5. The test suite also runs against TypeScript@next (because we want to use it as much as you do).
 
 If you become aware of issues not caught by the test suite then please let us know. Better yet, write a test and submit it in a PR!
 

package.json

@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@types/micromatch": "^4.0.0",
-    "@types/node": "*",
+    "@types/node": "^25.9.1",
     "@types/semver": "^7.3.4",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",

src/after-compile.ts

@@ -398,11 +398,20 @@ function outputFileToAsset(
     // According to @alexander-akait (and @sokra) we should always '/' https://github.com/TypeStrong/ts-loader/pull/1251#issuecomment-799606985
     .replace(/\\/g, '/');
 
-  // As suggested by @JonWallsten here: https://github.com/TypeStrong/ts-loader/pull/1251#issuecomment-800032753
-  compilation.emitAsset(
-    assetPath,
-    new webpack.sources.RawSource(outputFile.text)
-  );
+  if (typeof compilation.emitAsset === 'function') {
+    // webpack 5+
+    // As suggested by @JonWallsten here: https://github.com/TypeStrong/ts-loader/pull/1251#issuecomment-800032753
+    compilation.emitAsset(
+      assetPath,
+      new webpack.sources.RawSource(outputFile.text)
+    );
+  } else {
+    // webpack 4 fallback: assign directly to compilation.assets
+    (compilation as any).assets[assetPath] = {
+      source: () => outputFile.text,
+      size: () => Buffer.byteLength(outputFile.text, 'utf8'),
+    };
+  }
 }
 
 function outputFilesToAsset<T extends ts.OutputFile>(
@@ -461,23 +470,56 @@ function removeCompilationTSLoaderErrors(
   compilation: webpack.Compilation,
   loaderOptions: LoaderOptions
 ) {
+  const loaderSource = tsLoaderSource(loaderOptions);
+  // Filter out ts-loader's own errors so they can be re-added fresh each
+  // compilation. The `details` field is set on every error created by makeError().
+  // We check the property directly rather than instanceof webpack.WebpackError
+  // so this works with both webpack 4 (where WebpackError was not a public export)
+  // and webpack 5.
   compilation.errors = compilation.errors.filter(
-    error => error instanceof webpack.WebpackError && error.details !== tsLoaderSource(loaderOptions)
+    error => (error as any).details !== loaderSource
   );
 }
 
 function removeModuleTSLoaderError(
   module: webpack.Module,
   loaderOptions: LoaderOptions
 ) {
-  const warnings = module.getWarnings();
-  const errors = module.getErrors();
-  module.clearWarningsAndErrors();
+  // webpack 5 exposes getWarnings()/getErrors()/clearWarningsAndErrors() methods.
+  // webpack 4 uses direct .warnings / .errors arrays on the module object.
+  const webpackModule = module as any;
+  const warnings: webpack.WebpackError[] =
+    typeof webpackModule.getWarnings === 'function'
+      ? Array.from(webpackModule.getWarnings() || [])
+      : (webpackModule.warnings || []).slice();
+  const errors: webpack.WebpackError[] =
+    typeof webpackModule.getErrors === 'function'
+      ? Array.from(webpackModule.getErrors() || [])
+      : (webpackModule.errors || []).slice();
+
+  if (typeof webpackModule.clearWarningsAndErrors === 'function') {
+    webpackModule.clearWarningsAndErrors();
+  } else {
+    webpackModule.warnings = [];
+    webpackModule.errors = [];
+  }
 
-  Array.from(warnings || []).forEach(warning => module.addWarning(warning));
-  Array.from(errors || [])
+  warnings.forEach(warning => {
+    if (typeof module.addWarning === 'function') {
+      module.addWarning(warning);
+    } else {
+      webpackModule.warnings.push(warning);
+    }
+  });
+  errors
     .filter(
       (error: any) => error.loaderSource !== tsLoaderSource(loaderOptions)
     )
-    .forEach(error => module.addError(error));
+    .forEach(error => {
+      if (typeof module.addError === 'function') {
+        module.addError(error);
+      } else {
+        webpackModule.errors.push(error);
+      }
+    });
 }

src/instances.ts

@@ -149,7 +149,10 @@ function successfulTypeScriptInstance(
   const { configFilePath, configFile } = configFileAndPath;
 
   if (configFilePath) {
-    loader.addBuildDependency(configFilePath);
+    // addBuildDependency is a webpack 5+ API; guard for webpack 4 compatibility
+    if (typeof (loader as any).addBuildDependency === 'function') {
+      loader.addBuildDependency(configFilePath);
+    }
   }
 
   const filePathKeyMapper = createFilePathKeyMapper(compiler, loaderOptions);
@@ -320,26 +323,39 @@ function addAssetHooks(
     instance.configFilePath
   );
 
-  const makeAssetsCallback = (compilation: webpack.Compilation) => {
-    compilation.hooks.processAssets.tap(
-      {
-        name: 'ts-loader',
-        stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
-      },
-      () => {
-        cachedMakeAfterCompile(compilation, () => {
-          return null;
-        });
-      }
-    );
-  };
+  // webpack 5+: assets must be emitted via the processAssets hook so they do not
+  // conflict with other plugins that use afterCompile for asset emission.
+  // webpack 4: afterCompile handles both errors and assets in a single pass.
+  if ('processAssets' in loader._compilation!.hooks) {
+    const makeAssetsCallback = (compilation: webpack.Compilation) => {
+      (compilation.hooks as any).processAssets.tap(
+        {
+          name: 'ts-loader',
+          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        },
+        () => {
+          cachedMakeAfterCompile(compilation, () => {
+            return null;
+          });
+        }
+      );
+    };
 
-  // We need to add the hook above for each run.
-  // For the first run, we just need to add the hook to loader._compilation
-  makeAssetsCallback(loader._compilation!);
+    // We need to add the hook above for each run.
+    // For the first run, we just need to add the hook to loader._compilation
+    makeAssetsCallback(loader._compilation!);
 
-  // For future calls in watch mode we need to watch for a new compilation and add the hook
-  loader._compiler!.hooks.compilation.tap('ts-loader', makeAssetsCallback);
+    // For future calls in watch mode we need to watch for a new compilation and add the hook
+    loader._compiler!.hooks.compilation.tap('ts-loader', makeAssetsCallback);
+  } else {
+    // webpack 4 fallback: use afterCompile which fires after every compilation
+    loader._compiler!.hooks.afterCompile.tapAsync(
+      'ts-loader',
+      (compilation: webpack.Compilation, callback: () => void) => {
+        cachedMakeAfterCompile(compilation, callback);
+      }
+    );
+  }
 }
 
 export function initializeInstance(

src/utils.ts

@@ -144,14 +144,22 @@ export function fsReadFile(
   }
 }
 
+// Cache the WebpackError constructor at module load time.
+// In webpack 4, WebpackError was an internal class not exported from the main package.
+const WebpackErrorClass = (webpack as any).WebpackError as
+  | (typeof webpack.WebpackError)
+  | undefined;
+
 export function makeError(
   loaderOptions: LoaderOptions,
   message: string,
   file: string,
   location?: FileLocation,
   endLocation?: FileLocation
 ): webpack.WebpackError {
-  const error = new webpack.WebpackError(message);
+  const error: webpack.WebpackError = WebpackErrorClass
+    ? new WebpackErrorClass(message)
+    : (new Error(message) as unknown as webpack.WebpackError);
   error.file = file;
   error.loc =
     location === undefined
@@ -160,16 +168,6 @@ export function makeError(
   error.details = tsLoaderSource(loaderOptions);
 
   return error;
-
-  // return {
-  //   message,
-  //   file,
-  //   loc:
-  //     location === undefined
-  //       ? { name: file }
-  //       : makeWebpackLocation(location, endLocation),
-  //   details: tsLoaderSource(loaderOptions),
-  // };
 }
 
 /** Not exported from webpack so declared locally */

test/comparison-tests/colors/expectedOutput/output.txt

@@ -1,5 +1,5 @@
 asset bundle.js 1.4 KiB [emitted] (name: main)
-./app.ts 28 bytes [built] [code generated] [1 error]
+./app.ts 28 bytes [built] [code generated] [2 errors]
 
 ERROR in ./app.ts 3:1
 Module parse failed: Unexpected token (3:1)

yarn.lock

@@ -202,6 +202,13 @@
   dependencies:
     undici-types "~7.10.0"
 
+"@types/node@^25.9.1":
+  version "25.9.1"
+  resolved "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz"
+  integrity sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==
+  dependencies:
+    undici-types ">=7.24.0 <7.24.7"
+
 "@types/node@>=10.0.0":
   version "14.14.37"
   resolved "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz"
@@ -4745,6 +4752,11 @@ ua-parser-js@^0.7.30:
   version "0.7.31"
   resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz"
 
+"undici-types@>=7.24.0 <7.24.7":
+  version "7.24.6"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz"
+  integrity sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==
+
 undici-types@~7.10.0:
   version "7.10.0"
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz"