Webpack 5: ParserHelpers.addParsedVariableToModule is not a function

[balloob]

Using Webpack 5 beta 25 (latest as of today) and worker plugin 5.0.0.

Initially reported at https://github.com/GoogleChromeLabs/worker-plugin/pull/84#issuecomment-657003936 but realized should have opened an issue.

TypeError: ParserHelpers.addParsedVariableToModule is not a function
    at /home/paulus/dev/hass/frontend/node_modules/worker-plugin/dist/worker-plugin.js:120:25
    at Hook.eval [as call] (eval at create (/home/paulus/dev/hass/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:16)
    at JavascriptParser.callHooksForInfoWithFallback (/home/paulus/dev/hass/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2784:24)
    at JavascriptParser.callHooksForExpression (/home/paulus/dev/hass/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2666:16)
    at JavascriptParser.walkNewExpression (/home/paulus/dev/hass/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2379:23)
    at JavascriptParser.walkExpression (/home/paulus/dev/hass/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2131:10)
    at JavascriptParser.walkExpressions (/home/paulus/dev/hass/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2078:10)
    at /home/paulus/dev/hass/frontend/node_modules/webpack/lib/dependencies/HarmonyImportDependencyParserPlugin.js:136:22
    at Hook.eval [as call] (eval at create (/home/paulus/dev/hass/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:16)
    at JavascriptParser.callHooksForInfoWithFallback (/home/paulus/dev/hass/frontend/node_modules/webpack/lib/javascript/JavascriptParser.js:2768:26)

Webpack 5 source for ParserHelpers does indeed not contain that function. Searching the Webpack 5 codebase also doesn't find it 🤔

I tried using the Webpack 4 definition on Webpack 5 does bundle, but doesn't work:

ReferenceError: webpackworker__0 is not defined

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "renderMarkdown": () => /* binding */ renderMarkdown
/* harmony export */ });
/* harmony import */ var comlink__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! comlink */ "./node_modules/comlink/dist/esm/comlink.mjs");

let worker;
const renderMarkdown = async (content, markedOptions, hassOptions) => {
  if (!worker) {
    worker = (0,comlink__WEBPACK_IMPORTED_MODULE_0__.wrap)(new Worker(__webpack__worker__0, undefined));
  }

  return await worker.renderMarkdown(content, markedOptions, hassOptions);
};//# sourceURL=[module]

original source of above code (which works on webpack 4)

[balloob]

The function was removed in https://github.com/webpack/webpack/pull/7781 (commit https://github.com/webpack/webpack/commit/5553166603c9f813bc99d4e77d102080bfcdb9ad)

[developit]

Yikes - I didn't know about this removal, thanks for looking into this.

I believe the following should work as a replacement for the usage, to support both Webpack 4 and 5:

let ModuleDecoratorDependency;
try {
  ModuleDecoratorDependency = require("./dependencies/ModuleDecoratorDependency");
} catch (e) {}

// ... then replacing the above lines:

            } else if (ModuleDecoratorDependency) {
              const dep = new ModuleDecoratorDependency(
                ParserHelpers.getModulePath(parser.state.module.context, loaderRequest),
                parser.state.module
              );
              dep.loc = expr.loc;
              parser.state.module.addDependency(dep);
            }
          } else {
            // For CommonJS/Auto
            const req = `require(${JSON.stringify(loaderRequest)})`;
            ParserHelpers.toConstantDependency(parser, id)(expr.arguments[0]);
            ParserHelpers.addParsedVariableToModule(parser, id, req);
          }

[tsavo-vdb-knott]

This is also an issue for me. I attempted to add your above code however the error persists.

[phyllisstein]

I wound up with a fresh error after making that change:

ERROR in ./src/development/client.js
Module parse failed: ParserHelpers.getModulePath is not a function
File was processed with these loaders:
 * ../../../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
TypeError: ParserHelpers.getModulePath is not a function
    at /Users/daniel/Code/NY/choreographer/node_modules/worker-plugin/src/index.js:123:29
    at Hook.eval (eval at create (/Users/daniel/Code/NY/choreographer/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Hook.CALL_DELEGATE [as _call] (/Users/daniel/Code/NY/choreographer/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at JavascriptParser.callHooksForInfoWithFallback (/Users/daniel/Code/NY/choreographer/node_modules/webpack/lib/javascript/JavascriptParser.js:2871:24)
    at JavascriptParser.callHooksForExpressionWithFallback (/Users/daniel/Code/NY/choreographer/node_modules/webpack/lib/javascript/JavascriptParser.js:2782:16)
    at JavascriptParser.callHooksForExpression (/Users/daniel/Code/NY/choreographer/node_modules/webpack/lib/javascript/JavascriptParser.js:2750:15)
    at JavascriptParser.walkNewExpression (/Users/daniel/Code/NY/choreographer/node_modules/webpack/lib/javascript/JavascriptParser.js:2457:23)
    at JavascriptParser.walkExpression (/Users/daniel/Code/NY/choreographer/node_modules/webpack/lib/javascript/JavascriptParser.js:2185:10)
    at JavascriptParser.walkVariableDeclaration (/Users/daniel/Code/NY/choreographer/node_modules/webpack/lib/javascript/JavascriptParser.js:2007:33)
    at JavascriptParser.walkStatement (/Users/daniel/Code/NY/choreographer/node_modules/webpack/lib/javascript/JavascriptParser.js:1528:10)

Did a little digging in the Webpack sources; couldn't find anything germane.

[developit]

FWIW Webpack 5 seems to have landed its own worker-plugin, which I guess means this plugin shouldn't be used with it.

[balloob]

For people exploring the Webpack 5 syntax:

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

No extra plugin loading is required.

[phyllisstein]

Oh wow, thanks! Totally missed that.

[yamafaktory]

I was playing around with Webpack 5 + esbuild and now I think I'm clearly missing this plugin. The issue is that Webpack is now relying on import.meta.url which is not always available depending on your loader and on the selected target, see https://github.com/webpack/webpack/pull/11439#issuecomment-706769072.

[vanduc1102]

Same for typescript

const worker = new Worker(new URL('./workers/foo.worker.ts', import.meta.url));

https://github.com/azangru/web-worker-ts-webpack-test/blob/master/src/index.ts#L11

[axetroy]

Unfortunately, Webpack5's Web Worker solution relies on import.meta.url, which is not compatible friendly.