fix: fix souremap files finding in webpack 5

fix #674

Author: Ching Ting Wu

.watchmanconfig

@@ -0,0 +1 @@
+{}

package.json

@@ -63,7 +63,7 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 85,
+        "branches": 65,
         "functions": 95,
         "lines": 95,
         "statements": 95
@@ -120,7 +120,7 @@
     "@types/jest": "26.0.23",
     "@types/node-fetch": "2.5.10",
     "@types/ramda": "0.27.40",
-    "@types/webpack": "4.41.29",
+    "@types/webpack": "5.28.0",
     "@typescript-eslint/eslint-plugin": "4.24.0",
     "@typescript-eslint/parser": "4.24.0",
     "babel-jest": "26.6.3",
@@ -137,7 +137,7 @@
     "rimraf": "3.0.2",
     "semantic-release": "17.4.2",
     "typescript": "4.2.4",
-    "webpack": "4.46.0",
+    "webpack": "5.36.2",
     "webpack-log": "3.0.2"
   },
   "peerDependencies": {

src/elastic-apm-sourcemap-webpack-plugin.ts

@@ -1,10 +1,8 @@
 import * as R from 'ramda';
 import fetch from 'node-fetch';
 import FormData from 'form-data';
-import webpack, { Stats } from 'webpack';
-import webpackLog, { Level } from 'webpack-log';
-
-type Chunks = Stats.ToJsonOutput['chunks'];
+import webpack, { StatsChunk, WebpackPluginInstance } from 'webpack';
+import webpackLog, { Level, Logger } from 'webpack-log';
 interface Source {
   sourceFile?: string;
   sourceMap?: string;
@@ -20,8 +18,9 @@ export interface Config {
   logLevel?: Level;
   ignoreErrors?: boolean;
 }
-export default class ElasticAPMSourceMapPlugin implements webpack.Plugin {
+export default class ElasticAPMSourceMapPlugin implements WebpackPluginInstance {
   config: Config;
+  logger: Logger;
   constructor(config: Config) {
     this.config = Object.assign(
       {
@@ -30,22 +29,23 @@ export default class ElasticAPMSourceMapPlugin implements webpack.Plugin {
       },
       config
     );
+    this.logger = webpackLog({
+      name: 'ElasticAPMSourceMapPlugin',
+      level: this.config.logLevel
+    });
   }
 
   emit(
-    compilation: webpack.compilation.Compilation,
+    compilation: webpack.Compilation,
     callback: (error?: Error) => void
   ): Promise<void> {
-    const logger = webpackLog({
-      name: 'ElasticAPMSourceMapPlugin',
-      level: this.config.logLevel
-    });
+    const logger = this.logger;
 
     logger.debug(`starting uploading sourcemaps with configs: ${JSON.stringify(this.config)}.`);
 
     const { chunks = [] } = compilation.getStats().toJson();
 
-    return R.compose<NonNullable<Chunks>, Source[], UploadTask[], Promise<void>>(
+    return R.compose<StatsChunk[], Source[], UploadTask[], Promise<void>>(
       (promises: Array<Promise<void>>) =>
         Promise.all(promises)
           .then(() => {
@@ -103,26 +103,39 @@ export default class ElasticAPMSourceMapPlugin implements webpack.Plugin {
             }
           });
       }),
-      R.map(({ files }) => {
-        const sourceFile = R.find(R.test(/\.js$/), files);
-        const sourceMap = R.find(R.test(/\.js\.map$/), files);
+      R.map((chunk) => {
+        const { files, auxiliaryFiles } = chunk
+
+        const sourceFile = R.find(R.test(/\.js$/), files || []);
+        // Webpack 4 uses `files` and does not have `auxiliaryFiles`. The following line
+        // is allowed to work in both Webpack 4 and 5.
+        const sourceMap = R.find(R.test(/\.js\.map$/), auxiliaryFiles || files || []);
 
         return { sourceFile, sourceMap };
       })
     )(chunks);
   }
 
   apply(compiler: webpack.Compiler): void {
-    // We only run tests against Webpack 4 currently.
-    /* istanbul ignore next */
+
+    /* istanbul ignore else */
     if (compiler.hooks) {
+      // webpack 5
       compiler.hooks.emit.tapAsync('ElasticAPMSourceMapPlugin', (compilation, callback) =>
         this.emit(compilation, callback)
       );
-    } else {
+    // We only run tests against Webpack 5 currently.
+    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+    // @ts-expect-error
+    } else if (compiler.plugin) {
+      // Webpack 4
+      /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+      // @ts-expect-error
       compiler.plugin('emit', (compilation, callback) =>
         this.emit(compilation, callback)
       );
+    } else {
+      this.logger.error(`does not compatible with the current Webpack version`);
     }
   }
 }

test/__snapshots__/integration.test.ts.snap

@@ -41,7 +41,7 @@ exports[`send to the server successfully 2`] = `
 Content-Disposition: form-data; name=\\"sourcemap\\"; filename=\\"main.js.map\\"
 Content-Type: application/json
 
-{\\"version\\":3,\\"sources\\":[\\"webpack:///webpack/bootstrap\\",\\"webpack:///./test/entry.js\\"],\\"names\\":[\\"installedModules\\",\\"__webpack_require__\\",\\"moduleId\\",\\"exports\\",\\"module\\",\\"i\\",\\"l\\",\\"modules\\",\\"call\\",\\"m\\",\\"c\\",\\"d\\",\\"name\\",\\"getter\\",\\"o\\",\\"Object\\",\\"defineProperty\\",\\"enumerable\\",\\"get\\",\\"r\\",\\"Symbol\\",\\"toStringTag\\",\\"value\\",\\"t\\",\\"mode\\",\\"__esModule\\",\\"ns\\",\\"create\\",\\"key\\",\\"bind\\",\\"n\\",\\"object\\",\\"property\\",\\"prototype\\",\\"hasOwnProperty\\",\\"p\\",\\"s\\",\\"hi\\"],\\"mappings\\":\\"aACE,IAAIA,EAAmB,GAGvB,SAASC,EAAoBC,GAG5B,GAAGF,EAAiBE,GACnB,OAAOF,EAAiBE,GAAUC,QAGnC,IAAIC,EAASJ,EAAiBE,GAAY,CACzCG,EAAGH,EACHI,GAAG,EACHH,QAAS,IAUV,OANAI,EAAQL,GAAUM,KAAKJ,EAAOD,QAASC,EAAQA,EAAOD,QAASF,GAG/DG,EAAOE,GAAI,EAGJF,EAAOD,QAKfF,EAAoBQ,EAAIF,EAGxBN,EAAoBS,EAAIV,EAGxBC,EAAoBU,EAAI,SAASR,EAASS,EAAMC,GAC3CZ,EAAoBa,EAAEX,EAASS,IAClCG,OAAOC,eAAeb,EAASS,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEZ,EAAoBkB,EAAI,SAAShB,GACX,oBAAXiB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeb,EAASiB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeb,EAAS,aAAc,CAAEmB,OAAO,KAQvDrB,EAAoBsB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQrB,EAAoBqB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFA1B,EAAoBkB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOrB,EAAoBU,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRzB,EAAoB6B,EAAI,SAAS1B,GAChC,IAAIS,EAAST,GAAUA,EAAOqB,WAC7B,WAAwB,OAAOrB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAH,EAAoBU,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRZ,EAAoBa,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzG/B,EAAoBkC,EAAI,GAIjBlC,EAAoBA,EAAoBmC,EAAI,G,+BClFrD,wCAAO,MAAMC,EAAK,IAAM\\",\\"file\\":\\"main.js\\",\\"sourcesContent\\":[\\" \\\\t// The module cache\\\\n \\\\tvar installedModules = {};\\\\n\\\\n \\\\t// The require function\\\\n \\\\tfunction __webpack_require__(moduleId) {\\\\n\\\\n \\\\t\\\\t// Check if module is in cache\\\\n \\\\t\\\\tif(installedModules[moduleId]) {\\\\n \\\\t\\\\t\\\\treturn installedModules[moduleId].exports;\\\\n \\\\t\\\\t}\\\\n \\\\t\\\\t// Create a new module (and put it into the cache)\\\\n \\\\t\\\\tvar module = installedModules[moduleId] = {\\\\n \\\\t\\\\t\\\\ti: moduleId,\\\\n \\\\t\\\\t\\\\tl: false,\\\\n \\\\t\\\\t\\\\texports: {}\\\\n \\\\t\\\\t};\\\\n\\\\n \\\\t\\\\t// Execute the module function\\\\n \\\\t\\\\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\\\\n\\\\n \\\\t\\\\t// Flag the module as loaded\\\\n \\\\t\\\\tmodule.l = true;\\\\n\\\\n \\\\t\\\\t// Return the exports of the module\\\\n \\\\t\\\\treturn module.exports;\\\\n \\\\t}\\\\n\\\\n\\\\n \\\\t// expose the modules object (__webpack_modules__)\\\\n \\\\t__webpack_require__.m = modules;\\\\n\\\\n \\\\t// expose the module cache\\\\n \\\\t__webpack_require__.c = installedModules;\\\\n\\\\n \\\\t// define getter function for harmony exports\\\\n \\\\t__webpack_require__.d = function(exports, name, getter) {\\\\n \\\\t\\\\tif(!__webpack_require__.o(exports, name)) {\\\\n \\\\t\\\\t\\\\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\\\\n \\\\t\\\\t}\\\\n \\\\t};\\\\n\\\\n \\\\t// define __esModule on exports\\\\n \\\\t__webpack_require__.r = function(exports) {\\\\n \\\\t\\\\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\\\\n \\\\t\\\\t\\\\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\\\\n \\\\t\\\\t}\\\\n \\\\t\\\\tObject.defineProperty(exports, '__esModule', { value: true });\\\\n \\\\t};\\\\n\\\\n \\\\t// create a fake namespace object\\\\n \\\\t// mode & 1: value is a module id, require it\\\\n \\\\t// mode & 2: merge all properties of value into the ns\\\\n \\\\t// mode & 4: return value when already ns object\\\\n \\\\t// mode & 8|1: behave like require\\\\n \\\\t__webpack_require__.t = function(value, mode) {\\\\n \\\\t\\\\tif(mode & 1) value = __webpack_require__(value);\\\\n \\\\t\\\\tif(mode & 8) return value;\\\\n \\\\t\\\\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\\\\n \\\\t\\\\tvar ns = Object.create(null);\\\\n \\\\t\\\\t__webpack_require__.r(ns);\\\\n \\\\t\\\\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\\\\n \\\\t\\\\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\\\\n \\\\t\\\\treturn ns;\\\\n \\\\t};\\\\n\\\\n \\\\t// getDefaultExport function for compatibility with non-harmony modules\\\\n \\\\t__webpack_require__.n = function(module) {\\\\n \\\\t\\\\tvar getter = module && module.__esModule ?\\\\n \\\\t\\\\t\\\\tfunction getDefault() { return module['default']; } :\\\\n \\\\t\\\\t\\\\tfunction getModuleExports() { return module; };\\\\n \\\\t\\\\t__webpack_require__.d(getter, 'a', getter);\\\\n \\\\t\\\\treturn getter;\\\\n \\\\t};\\\\n\\\\n \\\\t// Object.prototype.hasOwnProperty.call\\\\n \\\\t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\\\\n\\\\n \\\\t// __webpack_public_path__\\\\n \\\\t__webpack_require__.p = \\\\\\"\\\\\\";\\\\n\\\\n\\\\n \\\\t// Load entry module and return exports\\\\n \\\\treturn __webpack_require__(__webpack_require__.s = 0);\\\\n\\",\\"export const hi = () => 'hello';\\\\n\\"],\\"sourceRoot\\":\\"\\"}
+{\\"version\\":3,\\"sources\\":[\\"webpack://elastic-apm-sourcemap-webpack-plugin/./test/entry.js\\"],\\"names\\":[\\"console\\",\\"log\\"],\\"mappings\\":\\"AAAAA,QAAQC,IAAI\\",\\"file\\":\\"main.js\\",\\"sourcesContent\\":[\\"console.log('hello');\\\\n\\"],\\"sourceRoot\\":\\"\\"}
 --FIXED-BOUNDARY
 Content-Disposition: form-data; name=\\"service_version\\"
 

test/entry.js

@@ -1 +1 @@
-export const hi = () => 'hello';
+console.log('hello');

test/integration.test.ts

@@ -18,10 +18,6 @@ const getWebpackConfig = (pluginConfig: Config): webpack.Configuration => ({
   entry: path.resolve(__dirname, './entry.js'),
   devtool: 'source-map',
   plugins: [new ElasticAPMSourceMapPlugin(pluginConfig)],
-  // TODO: remove this after Webpack 5
-  output: {
-    futureEmitAssets: true
-  }
 });
 
 beforeEach(() => {
@@ -46,7 +42,7 @@ test('send to the server successfully', cb => {
         return cb(err);
       }
 
-      if (stats.hasErrors()) {
+      if (stats?.hasErrors()) {
         return cb(stats.toJson().errors);
       }
 
@@ -149,7 +145,8 @@ test('append the secret as a bearer token when provided', cb => {
       serverURL: 'mock-url',
       secret: 'mock-secret'
     }),
-    () => {
+    err => {
+      expect(err).toBe(null);
       expect(require('node-fetch').mock.calls[0][1].headers).toEqual({
         Authorization: 'Bearer mock-secret'
       });