parcelRequire is not defined (among other problems)

[mischnic]

🐛 bug report

1. parcelRequire is used before it's defined

(function () {
  var $a08e08a6fc4cf4272cd3bacd0a9f1$init = parcelRequire("012a08e08a6fc4cf4272cd3bacd0a9f1");
  var $parcel$modules = {};
  var $parcel$bundles = {};
  var globalObject = typeof globalThis !== 'undefined' ? globalThis : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {};

  if (globalObject.parcelRequire == null) {
    globalObject.parcelRequire = function (name) {
      // Execute the bundle wrapper function if there is one registered.
      if (name in $parcel$bundles) {
        $parcel$bundles[name]();
        delete $parcel$bundles[name];
      }
// ...

2. Even when correcting problem (1), the module to import is not defined. Because the sibling bundle <script> tag in the html file was inserted after instead of before.

3. After fixing (2), notice that there are actually three bundles (two would make more sense here) and that it contains

parcelRequire.registerBundle("012a08e08a6fc4cf4272cd3bacd0a9f1", function () {
  parcelRequire.register("012a08e08a6fc4cf4272cd3bacd0a9f1", $a08e08a6fc4cf4272cd3bacd0a9f1$exports);
});

so that exports object is missing. (This is the bundle that is dynamically imported).

The corresponding bundle graph is also very odd (an empty bundle?)

💻 Code Sample

<script type="text/javascript" src="index.js"></script>

// index.js
import lodash from "lodash";
console.log(lodash.add(1, 2));

import "./async";

// async.js
import("lodash").then(lodash => console.log(lodash.add(1, 2)));

🌍 Your Environment

Software	Version(s)
Parcel	a1a2515

[wbinnssmith]

The corresponding bundle graph is also very odd (an empty bundle?)

This is because we unconditionally create new bundles when we encounter async dependencies, and then deduplicate assets when they're present in all ancestries in the graph.

We should either not create the bundle in the first place when encountering the async dependency (this is probably difficult because we don't know all the assets in the bundle until we've fully traversed its children) or remove it after the fact.

[wbinnssmith]

In this case, the runtime for the async dependency when the resolved asset is available already should be something along the lines of Promise.resolve(require('lodash')).

[mischnic]

Will's recent PR doesn't really work for the esmodule output format, the sibling bundle for lodash doesn't export lodash anymore (only the init function):

import { $ebea73fc7ce3b38e2743ca9f71cd7c$init } from "./lodash.ea34a757.js";

function $parcel$interopDefault(a) {
  return a && a.__esModule ? a.default : a;
}

var $cef71d82488a316df67312338816c3bf$exports = {};

// on here, only the init funciton from above exists, not `.default` = require("lodash")
$cef71d82488a316df67312338816c3bf$exports = import("./" + "lodash.ea34a757.js");

$cef71d82488a316df67312338816c3bf$exports.then(lodash => console.log("async", lodash.add(1, 2)));
var $ebea73fc7ce3b38e2743ca9f71cd7c$$interop$default = $parcel$interopDefault($ebea73fc7ce3b38e2743ca9f71cd7c$init());
console.log("sync", $ebea73fc7ce3b38e2743ca9f71cd7c$$interop$default.add(1, 2));

[mischnic]

This seems to work correctly now (probably because of the async internalization system)

[Andrew-Dyachenko]

Got the same error.
--no-scope-hoist flag helped for me too.

"parcel": "^2.0.0-beta.2"

[mohdfurkan01]

How we can handle this error---
"Uncaught ReferenceError: parcelRequire is not defined"
at :1234/src.6ebfba02.js:112:17
at :1234/src.6ebfba02.js:120:3