Cannot find module '2hV17' (process) inside webworker

[ProLoser]

🐛 bug report

I am getting an error with parcel nightly whenever a web worker tries to use the process global variable. I'm seeing the above error as parcel attempts to require('process')

🎛 Configuration (.babelrc, package.json, cli command)

// .parcelrc
{
  "extends": "@parcel/config-default",
  "transformers": {
    "rawjs:*": ["...", "@parcel/transformer-raw"]
  }
}

// package.json
...
  "browserslist": {
    "production": [
      "last 1 chrome version",x
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
...

🤔 Expected Behavior

I should be able to access the process global variable without issue

😯 Current Behavior

Missing imported module

encoderWorker.fb958c63.js:61 Uncaught Error: Cannot find module '2hV17'
    at newRequire (encoderWorker.fb958c63.js:61)
    at newRequire (encoderWorker.fb958c63.js:45)
    at localRequire (encoderWorker.fb958c63.js:83)
    at Object.7JFPS.process (encoderWorker.fb958c63.js:144)
    at newRequire (encoderWorker.fb958c63.js:71)
    at encoderWorker.fb958c63.js:120
    at encoderWorker.fb958c63.js:143

💁 Possible Solution

I'm not sure how to fix this. I upgraded to parcel nightly because of #5021

🔦 Context

My application fails because my webworkers won't run.

I have just been relying on evergreen javascript and have been trying to avoid custom transpilers and babel configurations.

💻 Code Sample

Here's the first 150 lines of the generated encoderWorker:

// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles

(function(modules, entry, mainEntry, parcelRequireName, globalName) {
  /* eslint-disable no-undef */
  var globalObject =
    typeof globalThis !== 'undefined'
      ? globalThis
      : typeof self !== 'undefined'
      ? self
      : typeof window !== 'undefined'
      ? window
      : typeof global !== 'undefined'
      ? global
      : {};
  /* eslint-enable no-undef */

  // Save the require from previous bundle to this closure if any
  var previousRequire =
    typeof globalObject[parcelRequireName] === 'function' &&
    globalObject[parcelRequireName];

  var cache = previousRequire.cache || {};
  // Do not use `require` to prevent Webpack from trying to bundle this call
  var nodeRequire =
    typeof module !== 'undefined' &&
    typeof module.require === 'function' &&
    module.require.bind(module);

  function newRequire(name, jumped) {
    if (!cache[name]) {
      if (!modules[name]) {
        // if we cannot find the module within our internal map or
        // cache jump to the current global require ie. the last bundle
        // that was added to the page.
        var currentRequire =
          typeof globalObject[parcelRequireName] === 'function' &&
          globalObject[parcelRequireName];
        if (!jumped && currentRequire) {
          return currentRequire(name, true);
        }

        // If there are other bundles on this page the require from the
        // previous one is saved to 'previousRequire'. Repeat this as
        // many times as there are bundles until the module is found or
        // we exhaust the require chain.
        if (previousRequire) {
          return previousRequire(name, true);
        }

        // Try the node require function if it exists.
        if (nodeRequire && typeof name === 'string') {
          return nodeRequire(name);
        }

        var err = new Error("Cannot find module '" + name + "'");
        err.code = 'MODULE_NOT_FOUND';
        throw err;
      }

      localRequire.resolve = resolve;
      localRequire.cache = {};

      var module = (cache[name] = new newRequire.Module(name));

      modules[name][0].call(
        module.exports,
        localRequire,
        module,
        module.exports,
        this
      );
    }

    return cache[name].exports;

    function localRequire(x) {
      return newRequire(localRequire.resolve(x));
    }

    function resolve(x) {
      return modules[name][1][x] || x;
    }
  }

  function Module(moduleName) {
    this.id = moduleName;
    this.bundle = newRequire;
    this.exports = {};
  }

  newRequire.isParcelRequire = true;
  newRequire.Module = Module;
  newRequire.modules = modules;
  newRequire.cache = cache;
  newRequire.parent = previousRequire;
  newRequire.register = function(id, exports) {
    modules[id] = [
      function(require, module) {
        module.exports = exports;
      },
      {},
    ];
  };

  Object.defineProperty(newRequire, 'root', {
    get: function() {
      return globalObject[parcelRequireName];
    },
  });

  globalObject[parcelRequireName] = newRequire;

  for (var i = 0; i < entry.length; i++) {
    newRequire(entry[i]);
  }

  if (mainEntry) {
    // Expose entry point to Node, AMD or browser globals
    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
    var mainExports = newRequire(mainEntry);

    // CommonJS
    if (typeof exports === 'object' && typeof module !== 'undefined') {
      module.exports = mainExports;

      // RequireJS
    } else if (typeof define === 'function' && define.amd) {
      define(function() {
        return mainExports;
      });

      // <script>
    } else if (globalName) {
      this[globalName] = mainExports;
    }
  }
})({"7JFPS":[function(require,module,exports) {
var process = require("process");
var __dirname = "/Users/dsofer/Sites/zeus/packages/browser/src/utils/mirror";
var Buffer = require("buffer").Buffer;
// The Module object: Our interface to the outside world. We import
// and export values on it. There are various ways Module can be used:
// 1. Not defined. We create it here
// 2. A function parameter, function(Module) { ..generated code.. }
// 3. pre-run appended it, var Module = {}; ..generated code..
// 4. External script tag defines var Module.

🌍 Your Environment

webworker

Software	Version(s)
Parcel	parcel@2.0.0-nightly.553
Node	v14.15.2
npm/Yarn	6.14.9 / 1.22.10
Operating System	OSX 10.15.7

[mischnic]

Please provide a code sample.

"rawjs:*": ["...", "@parcel/transformer-raw"]

I'm not sure what this is supposed to achieve, but this definitely sounds wrong.

[ProLoser]

A lot of this code is private and difficult to share. We specifically use that for the following:

// web-browser.js
import EC_PATH from 'rawjs:./encoderWorker.js';

// ...
audioContext.audioWorklet.addModule(EC_PATH)
// ...

Parcel did not seem to recognize audioWorklets and we made this as a workaround

[ProLoser]

When I dove through how the pipelines worked, it seemed like I wanted the javascript to be processed properly but I wanted it to be marked as a URL asset so I could pass the URL as an argument. So '...' seems to preserve the javascript processing and then I mark it as a URL asset.

[ProLoser]

@mischnic after your comment, I reviewed my code and decided that it may work correctly now on nightly.

So I removed that ^ and now it works completely! Thank you for helping!!!

One thing I will say is that I still couldn't figure out how to get class properties working on nightly but my latest code refactors drop classes.

[mischnic]

For example it doesn't mark it as a worker JS bundle and shared bundles probably also don't work. Here's the issue for audioworklets: #1093