SourceMap during debugging points to loader code instead of source code

[richtera]

• Operating System: Windows 10 Pro
• Node Version: v12.16.2
• NPM Version: 6.14.5 yarn: 1.22.4
• webpack Version: 4.43.0
• worker-loader Version: 2.0.0

Expected Behavior

When pointing to the source code of the webworker in webpack it should show the source of the worker and not the loader. My webworker....

self.addEventListener("message", (event) => {
  const {
    data: { id, call },
  } = event;
  const resolve = (data) => {
    self.postMessage({
      data: { id, data },
    });
  };
  const reject = (err) => {
    if (err instanceof Error) {
      err = err.message;
    }
  };
  switch (call.type) {
    default:
      error = "Undefined call";
      break;
  }
  console.log(event);
  self.postMessage({
    data: event.data,
  });
});

This is what should show so I could step through the code.

Actual Behavior

What's shown when browsing to it in webpack://

module.exports = function() {
  return new Worker("/" + "app/js/data.worker-sw.403314db8c2ad54e8494.js");
};

Code

... rules: [
        {
          test: /\.worker\.js$/,
          use: {
            loader: "worker-loader",
            options: {
              publicPath: "/",
              name: "app/js/[name].[hash].js",
            },
          },
        },
...

// additional code, HEY YO remove this block if you don't need it

How Do We Reproduce?

According to this debugging any webworker with the same versions should show this problem. I have previously used worker-loader in another version of webpack/node/npm and did not have this problem. I am suspecting it's webpack or a new version of worker-loader that's somehow mixing the source code of the loader and the actual worker when outputting it to the map files. But it could also be a webpack issue only allowing a single map to be output. Not sure, but currently I'd have to turn off mapfiles during debugging.

[alexander-akait]

Same problems for inline, I will look solution in near future

[alexander-akait]

Very strange, reproduced on Chrome, but works fine in Firefox

[alexander-akait]

https://bugs.chromium.org/p/chromium/issues/detail?id=1111297

[alexander-akait]

Let's wait answer from chromium teams

[miginmrs]

@evilebottnawi, shouldn't the devtoolNamespace be different for the new entry, to prevent collusion for browsers that keep a single source map for all threads (like chrome) ?

[edenhermelin]

@alexander-akait any updates on this issue? (or a workaround?)

[alexander-akait]

@edenhermelin What is webpack version?

[edenhermelin]

@edenhermelin What is webpack version?

@alexander-akait these are the versions:

        "webpack": "4.46.0",
        "webpack-cli": "4.6.0",

[alexander-akait]

Still not fixed by chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1111297, you can try to look at this in Firefox, should work

[alexander-akait]

Moved to Hotlist (Hotlist-DevTools-SourceMaps), so should be fixed in near future (hope)

[edenhermelin]

@alexander-akait thanks for the quick reply! unfortunately Im using Electron so it's not possible for me to try that in electron 😞

[alexander-akait]

@edenhermelin Maybe make sense to migrate on webpack v5 and avoid using this loader due

const worket = new Worker(new URL('./worker.js', import.meta.url));

[edenhermelin]

@edenhermelin Maybe make sense to migrate on webpack v5 and avoid using this loader due

const worket = new Worker(new URL('./worker.js', import.meta.url));

Migration is quite tricky as the vue-electron-builder plugin doesn't support it yet. I opened another issue for the chromium team, hope it'll help too.

[AprilArcus]

Is there an option to disable source maps for worker-loader?

[alexander-akait]

@AprilArcus Please migrate from worker-loader if you use webpack v5

[AprilArcus]

Impossible at this time due to https://github.com/webpack/webpack/issues/13801