Inline workers does not work in Edge Legacy anymore #292

mpk · 2020-09-29T17:15:06Z

Operating System: Windows 10
Node Version: 12.14.0
NPM Version: 6.13.4
webpack Version: 4.44.2
worker-loader Version: 3.0.3

Expected Behavior

Inline worker should execute in Edge Legacy

Actual Behavior

Inline worker does not execute in Edge Legacy

Code

// webpack.config.js
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './index.js',
	plugins: [new HtmlWebpackPlugin()]
};

// index.js
import TestWorker from 'worker-loader?inline=no-fallback!./worker';

let worker = new TestWorker();
console.log(worker);

// worker.js
console.log('Log from worker');

How Do We Reproduce?

The code should write "Log from worker" into the console. However, it does not work in Edge Legacy browser (tested on version 18.18363). The worker is created successfully, but its contents are not executed, so nothing gets logged into the console.

I have looked at the worker-loader code and found out that the problem is in URL.revokeObjectURL(objectURL); line in inline.js. When I commented out that line, Edge executed the worker contents. Wrapping the call in setTimeout with 1000ms delay worked as well, but that solution seems quite hacky.

This issue is not present in worker-loader 2.0.0

The text was updated successfully, but these errors were encountered:

alexander-akait · 2020-09-29T17:32:45Z

Feel free to send a fix:

if (URL.revokeObjectURL) {
  URL.revokeObjectURL(objectURL);
}

Should be easy

mpk · 2020-09-29T17:53:58Z

No, Edge Legacy actually supports URL.revokeObjectURL, but it does not like when the Blob URL is revoked "too quickly".

Rush · 2020-10-02T01:26:46Z

inline workers stopped working for me after upgrading to 3.x and changing inline: true to inline: 'no-fallback'

Investigating network shows a script with contents:

importScripts('http://localhost:4000/[object%20Module]');

alexander-akait · 2020-10-02T10:27:20Z

@mpk Can you create reproducible test repo?

alexander-akait · 2020-10-02T10:27:46Z

@Rush It is not you problem, please provide reproducible test repo, I will help

mpk · 2020-10-02T14:05:15Z

@evilebottnawi Sure, here you go: https://github.com/mpk/worker-loader-edge

alexander-akait · 2020-12-02T12:39:21Z

@mpk to be honestly I can't reproduce 😕

KallynGowdy · 2020-12-07T20:35:37Z

I'm having a similar issue with Chrome (87.0.4280.88) and Edgium (87.0.664.55) on worker-loader v3.0.6 with webpack v5.10.0.
It is worth noting that the worker loads fine on Firefox.

Definitely seems like a race condition because if I put a breakpoint at inline.js line 31 and continue after half a second then the worker loads correctly but if I disable the breakpoint then it does not load.

In light of this, the root cause appears to actually be a Chrome bug however I haven't found anything in their bug tracker.

- Will have changes to fix the Chrome loading issue. (webpack-contrib/worker-loader#292)

Shravan-Joopally · 2021-03-11T17:45:54Z

I could reproduce this issue consistently on IE 11. Definitely revoking the object url immediately is issue. If I tried below code its working fine.

import TestWorker from 'worker-loader?inline=no-fallback!./worker';

let tmp = URL.revokeObjectURL;
URL.revokeObjectURL = function() {};

let worker = new TestWorker();

URL.revokeObjectURL = tmp;

console.log(worker);

alexander-akait · 2021-03-11T17:48:49Z

Can you check revokeObjectURL is exist?

Shravan-Joopally · 2021-03-11T17:49:43Z

yes its there

alexander-akait · 2021-03-11T17:50:17Z

Weird, it should work, no errors? Can you add try/catch for revokeObjectURL and check again

Shravan-Joopally · 2021-03-11T17:50:59Z

yeah, no errors

alexander-akait · 2021-03-11T17:51:21Z

Looks bug in browser...

lawrence-witt · 2021-03-11T23:21:30Z

I'm also running into this issue with inline workers in IE11. Changing the URL revocation in inline.js to the following fixes it in my use case:

setTimeout(function() { URL.revokeObjectURL(objectURL) });

alexander-akait · 2021-03-12T12:09:56Z

Very very very weird, somebody can provide versions and steps to reproduce, I am not against to fix it using setTimeout, but I want to investigate it

elasim · 2021-05-10T00:24:30Z

Is there any chance to merge the patch about setTimeout on above or the other plan for this issue?

alexander-akait · 2021-05-10T13:17:38Z

@elasim Can you provide screenshot/etc of the problem?

elasim · 2021-05-10T14:29:06Z

In this case, the screenshot is useless. there are no exception or error throws for this.
following is the information about reproduced environment.

UA: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; rv:11.0) like Gecko
WinVer 20H2.19042.928

test-project
├── @babel/plugin-transform-runtime@7.13.15
├── @babel/preset-env@7.14.1
├── @babel/runtime-corejs3@7.14.0
├── eslint@7.25.0
├── typescript@4.2.4
├── webpack@5.35.1
├── webpack-dev-server@3.11.0
├── babel-loader@8.2.2
├── eventemitter3@4.0.7
├── fast-xml-parser@3.19.0
├── source-map-loader@2.0.1
├── tslib@2.2.0
└── worker-loader@3.0.8

// webpack.config.js
const path = require("path");

module.exports = ({ production }) => {
  const webpackConfig = {
    // Documentation: https://webpack.js.org/configuration/mode/
    mode: production ? "production" : "development",
    resolve: {
      extensions: [".js", ".jsx", ".json"],
    },
    module: {
      rules: [
        {
          test: /\-worker\.js$/,
          use: {
            loader: "worker-loader",
            options: {
              inline: "no-fallback",
            },
          },
        },
        {
          test: /\.js$/,
          exclude: [/node_modules/],
          use: [
            {
              loader: "babel-loader",
              options: {
                presets: [
                  [
                    "@babel/preset-env",
                    {
                      targets: {
                        browsers: [
                          "chrome >= 51",
                          "firefox >= 51",
                          "ie >= 11",
                          "safari >= 8",
                          "ios >= 9",
                          "android >= 5",
                        ],
                      },
                    },
                  ],
                ],
                plugins: [
                  [
                    "@babel/plugin-transform-runtime",
                    {
                      absoluteRuntime: false,
                      corejs: 3,
                      helpers: true,
                      regenerator: true,
                    },
                  ],
                ],
              },
            },
          ],
        },
        {
          test: /\.js$/,
          enforce: "pre",
          use: ["source-map-loader"],
        },
      ],
    },
    entry: {
      test: path.join(__dirname, "lib", "index.js"),
    },
    output: {
      path: path.join(__dirname, "dist"),
      filename: "[name].es5.js",
      environment: {
        arrowFunction: false,
        bigIntLiteral: false,
        const: true,
        destructuring: false,
        dynamicImport: false,
        forOf: false,
        module: false,
      },
    },
    performance: {
      maxEntrypointSize: 250000,
      maxAssetSize: 250000,
    },
    devtool: production ? undefined : "source-map",
  };

  return webpackConfig;
};

alexander-akait · 2021-05-10T14:40:17Z

hm, code is just not executed? Can you add console.log('BEFORE') and ``console.log('After')` between https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L35 in your bundled code?

elasim · 2021-05-10T14:45:32Z

seems like worker is forked with empty script.

alexander-akait · 2021-05-10T14:48:29Z

Can you console log https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L23 content and blob and show me it here?

elasim · 2021-05-10T15:02:20Z

Can you console log https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L23 content and blob and show me it here?

Are you sure L23 is the place what you want to put logpoint? (Blob is supported natively, so that line wasn't executed.)
btw, it is the log of content and blob

Chrome

IE11

/******/ (function() { // webpackBootstrap
/******/ 	"use strict";
/******/ 	// The require scope
/******/ 	var __webpack_require__ = {};
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/define property getters */
/******/ 	!function() {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = function(exports, definition) {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	}();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	!function() {
/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ 	}();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	!function() {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = function(exports) {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	}();
/******/ 	
/************************************************************************/
var __webpack_exports__ = {};
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** ../../common/temp/node_modules/.pnpm/babel-loader@8.2.2/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[1].use[0]!../../common/temp/node_modules/.pnpm/source-map-loader@2.0.1/node_modules/source-map-loader/dist/cjs.js!./lib/ie-worker.js ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": function() { return __WEBPACK_DEFAULT_EXPORT__; }
/* harmony export */ });
function handleMessage(event) {
  self.postMessage(event.data);
}

self.addEventListener("message", handleMessage);

var default_1 =
/** @class */
function () {
  function default_1() {}

  return default_1;
}();

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (default_1);
/******/ })()
;

alexander-akait · 2021-05-10T16:32:02Z

I want to look at blob content here https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L29, maybey BlobBuilder or getBlob is broken

elasim · 2021-05-10T17:14:20Z

It's not. BlobBuilder won't used. https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L14-L25 is never reached because globalScope.Blob is available.

and Blob data is not broken either as you can see.

alexander-akait · 2021-05-10T17:35:51Z

Can you show blob value here https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L29, here two places for bug

blob generation is broken
URL.createObjectURL is broken with blob
URL.revokeObjectURL is broken without any reports

Also do you have CORS or other security headers?

elasim · 2021-05-11T03:00:10Z

I've already attached. see the last line of logs.

blob generation is broken: No. It's working If I commented out revokeObjectURL or give some delay using setTimeout.
CORS or Security Header: No. this script served via webpack-dev-server. there are no such a security header.
URL.createObjectURL is broken with blob: No. As you can see the last image, We can read blob data via xhr and there are no error.
URL.revokeObjectURL is broken without any reports: Maybe. but no way to figure out.

alexander-akait · 2021-05-11T13:33:40Z

What about setImmediate? Can you try? Maybe we can check setImmediate is defined and use logic, so for good browser we will keep original logic

elasim · 2021-05-11T14:06:54Z

https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L35

~~Replacing that line with globalScope.setImmediate(URL.revokeObjectURL, objectURL); works.~~

~~oops, no. Above approach throws an error on safari. I'll try another way.~~

It works now.

if (globalScope.setImmediate) {
  globalScope.setImmediate(URL.revokeObjectURL, objectURL);
} else {
  globalScope.setTimeout(0, URL.revokeObjectURL, objectURL);
}

alexander-akait · 2021-05-11T14:23:53Z

Ideally we need if (globalScope.setImmediate) { globalScope.setImmediate(() => { URL.revokeObjectURL(objectURL) }); } else { URL.revokeObjectURL(objectURL); }

elasim · 2021-05-11T14:27:23Z

Ideally we need if (globalScope.setImmediate) { globalScope.setImmediate(() => { URL.revokeObjectURL(objectURL) }); } else { URL.revokeObjectURL(objectURL); }

This one also works.

It seems like IE/Edge wasn't implement Web Worker API properly like the other API implementations does. 😢

alexander-akait · 2021-05-11T14:43:19Z

Feel free to send a fix to our runtime if it is work https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L35, no need tests, just add comment about version and problem

elasim · 2021-05-11T19:38:12Z

if (globalScope.setImmediate) { globalScope.setImmediate(() => { URL.revokeObjectURL(objectURL) }); } else { URL.revokeObjectURL(objectURL); }

I've found a bug for this approach.
After blob url is revoked, Invoking URL.createObjectURL from IE11 worker context throws an error.
Perhaps we should have to leave object url without revoking or revoke that when the worker terminated.

alexander-akait · 2021-05-12T11:41:55Z

Can you clarify?

elasim · 2021-05-12T18:36:38Z

Here is pseudo code to reproduce.

// inline-worker.js
self.addEventListener('message', ({ data }) => {
  // (IE bug) this line throw an error If objectUrl is revoked for this inline worker
  const url = URL.createObjectURL(new Blob(['something']));

  self.postMessage({ url });
});

// main.js
const objectUrl = URL.createObjectUrl(inlineWorkerBlob);
const worker = new Worker(objectUrl);

worker.addEventListener('message', () => {
  URL.revokeObjectUrl(objectUrl);
});

setTimeout(() => {
  // expect to success, actual also succeed.
  worker.postMessage(1);
}, 1000);
setTimeout(() => {
  // expect to success, actual is fail because of bug on IE.
  // objectUrl was revoked at first callback event
  worker.postMessage(2);
}, 2000);

alexander-akait · 2021-05-12T18:39:10Z

I don't understand...

elasim · 2021-05-12T18:41:17Z

Okay, maybe I'll capture some video stub with example repo for your understand.

alexander-akait · 2021-05-12T18:43:40Z

What are you trying to achieve? I don't understand at all, here is a browser problem and that's it. We need search approach to fix it.

elasim · 2021-05-12T19:21:50Z

Oh, sorry to keep bother you. I was completely lost.
I was telling you what's the issue is.

So, back to how to fix it.
Maybe we got 2 options.

Give up self-closing and delegate revoking to the author who people using it.

// inline.js
worker = new Worker(objectUrl);
worker.objectUrl = objectUrl;

return worker

// usage.js
const worker = new InlineWorker();

worker.close();
URL.revokeObjectURL(worker.objectUrl); // revoke by author

Putting some codes to revoke when it closed. perhaps we need some special message for this and it will need to change original behavior. like following stub.
(I know it's messy. but I want to review all the option we can try)

// Inject stub if worker launched inline worker. (but we can't determine that at compile-time.)
// maybe here? https://github.com/webpack-contrib/worker-loader/blob/22275e9cb0b67bc008ea2b008542303493eede18/src/utils.js#L84
var origTerminate = worker.terminate;
worker.terminate = () => {
  URL.revokeObjectURL(objectUrl);
  return origTerminate.call(worker);
};
worker.addEventListener('message', ({ data }) => {
  if (data === ''$specialMessageForClosing'') {
    URL.revokeObjectURL(objectUrl);
  }
});

var origClose = self.close;
self.close = () => {
  self.postMessage('$specialMessageForClosing');
  origClose.call(self);
}

I think option-1 is reasonable.

alexander-akait · 2021-05-13T12:49:21Z

If you forget to run URL.revokeObjectURL, you will have memory leak, If this problem is so complex I would rather say that we do not support workers in Edge Legacy browsers due bug in browsers and you can write workaround on application side.

If you need deeply help, please create reproducible repo, provide version of browser(s) and os information. I will write to Microsoft and ask them how we can fix it.

elasim · 2021-05-13T13:58:51Z

What about adding new option for manual revoke? Is it too complicated?
I'll post reproducible repo anyway.

alexander-akait · 2021-05-13T14:18:33Z

I want to avoid new options if we can solve it on code level

elasim · 2021-05-13T14:29:33Z

I attached reproducible link and test results.
Also, I'm not used webpack or worker-loader on this testbed intentionally to make it sure the issue is coming from URL.revokeObjectURL.

https://elasim.github.io/test/ie-inline-worker-bug

Browser version	Result
Win7 IE 11	X
Win11 IE 11	X
Edge 15	X
Edge 16	X
Edge 17	X
Edge 18	X
Edge 80	O

alexander-akait · 2021-05-13T14:50:13Z

hm, we can add window.navigator.msSaveOrOpenBlob check and if it is true we should always run https://github.com/webpack-contrib/worker-loader/blob/master/src/runtime/inline.js#L39

elasim · 2021-05-13T16:16:45Z

there are security error with using data-uri.
temporal URL.revokeObjectURL patching isn't useful with core-js is used.
app side workaround isn't acceptable with some use-case because of heavy workload.

by the way, we probably can merge PR #316 and write caveat about this issue on document or just close that. I'll respect your decision.

alexander-akait · 2021-05-13T16:20:19Z

there are security error with using data-uri.

What is the problem? Do you mean CORS?

elasim · 2021-05-13T16:54:34Z

What is the problem? Do you mean CORS?

Umm.. It was script5022: securityerror. and seems like a restriction rather than CORS.
https://docs.microsoft.com/en-us/previous-versions//cc848897(v=vs.85)?redirectedfrom=MSDN

Also, It could be CORS. After some investigation, I've found the information about spec for data-uri and same-origin-policy from stackoverflow. (https://stackoverflow.com/a/23895830)
It said same-origin-policy was changed for data-uri and that wasn't applied to data-uri before.

alexander-akait · 2021-05-13T17:08:07Z

But this problem should be same with blob too

elasim · 2021-05-13T17:24:25Z

I agree that too. But spec and actual behavior is does.
(IE is annoying and frustrating always does 🤣)

Back to solution.

I want to suggest about two loader which is splited from current implementation.

first is child compiler which output will be string.
second is code injector which are depend first one and output will be same as current implements

author can choose one of them.
and if you don't want to make any breaking changes,
Perhaps I need to make fork version of this. (Only if you and CLA agree with this)

alexander-akait · 2021-05-13T19:37:04Z

What is webpack version you are use?

elasim · 2021-05-14T02:00:36Z

I'm using 5.

alexander-akait · 2021-05-14T11:35:47Z

You need this loader only for inline? Because webpack 5 support worker out of box without this loader

elasim · 2021-05-14T12:55:43Z

Yes. This is the only loader can apply babel-loader for inline-worker as far as I know.
By the way, I'm afraid bothering you because of this. If you are busy or it's annoying you, I'll handle this issue own myself.

alexander-akait · 2021-05-14T14:53:16Z

Honestly because webpack v5 supports workers out of box I think we need new loader, which covert module code to blob, so you can built-in new Worker('./file.js', import.meta.url) feature without this loader.

I think we need deprecate it in near future in favor new Worker('./file.js', import.meta.url), more abilities, more options, better support.

KallynGowdy added a commit to KallynGowdy/casualos that referenced this issue Dec 7, 2020

feat: Add a fork of worker-loader

6bc7323

- Will have changes to fix the Chrome loading issue. (webpack-contrib/worker-loader#292)

KallynGowdy mentioned this issue Dec 8, 2020

Update to Webpack 5 casual-simulation/casualos#197

Merged

elasim mentioned this issue May 11, 2021

fix: make inline workers work from IE/Edge legacy #316

Open

6 tasks

Inline workers does not work in Edge Legacy anymore #292

Inline workers does not work in Edge Legacy anymore #292

Comments

mpk commented Sep 29, 2020

Expected Behavior

Actual Behavior

Code

How Do We Reproduce?

alexander-akait commented Sep 29, 2020

mpk commented Sep 29, 2020

Rush commented Oct 2, 2020

alexander-akait commented Oct 2, 2020

alexander-akait commented Oct 2, 2020

mpk commented Oct 2, 2020

alexander-akait commented Dec 2, 2020

KallynGowdy commented Dec 7, 2020

Shravan-Joopally commented Mar 11, 2021 • edited

alexander-akait commented Mar 11, 2021

Shravan-Joopally commented Mar 11, 2021

alexander-akait commented Mar 11, 2021 • edited

Shravan-Joopally commented Mar 11, 2021

alexander-akait commented Mar 11, 2021

lawrence-witt commented Mar 11, 2021

alexander-akait commented Mar 12, 2021

elasim commented May 10, 2021 • edited

alexander-akait commented May 10, 2021

elasim commented May 10, 2021 • edited

alexander-akait commented May 10, 2021

elasim commented May 10, 2021

alexander-akait commented May 10, 2021

elasim commented May 10, 2021 • edited

alexander-akait commented May 10, 2021

elasim commented May 10, 2021 • edited

alexander-akait commented May 10, 2021

elasim commented May 11, 2021

alexander-akait commented May 11, 2021

elasim commented May 11, 2021 • edited

alexander-akait commented May 11, 2021 • edited

elasim commented May 11, 2021 • edited

alexander-akait commented May 11, 2021

elasim commented May 11, 2021

alexander-akait commented May 12, 2021

elasim commented May 12, 2021 • edited

alexander-akait commented May 12, 2021

elasim commented May 12, 2021

alexander-akait commented May 12, 2021

elasim commented May 12, 2021 • edited

alexander-akait commented May 13, 2021

elasim commented May 13, 2021 • edited

alexander-akait commented May 13, 2021

elasim commented May 13, 2021 • edited

alexander-akait commented May 13, 2021

elasim commented May 13, 2021

alexander-akait commented May 13, 2021

elasim commented May 13, 2021 • edited

alexander-akait commented May 13, 2021

elasim commented May 13, 2021 • edited

alexander-akait commented May 13, 2021

elasim commented May 14, 2021

alexander-akait commented May 14, 2021

elasim commented May 14, 2021 • edited

alexander-akait commented May 14, 2021

Shravan-Joopally commented Mar 11, 2021 •

edited

alexander-akait commented Mar 11, 2021 •

edited

elasim commented May 10, 2021 •

edited

elasim commented May 10, 2021 •

edited

elasim commented May 10, 2021 •

edited

elasim commented May 10, 2021 •

edited

elasim commented May 11, 2021 •

edited

alexander-akait commented May 11, 2021 •

edited

elasim commented May 11, 2021 •

edited

elasim commented May 12, 2021 •

edited

elasim commented May 12, 2021 •

edited

elasim commented May 13, 2021 •

edited

elasim commented May 13, 2021 •

edited

elasim commented May 13, 2021 •

edited

elasim commented May 13, 2021 •

edited

elasim commented May 14, 2021 •

edited