Invalid result from new URL() when included from multiple entry points

[oyamauchi]

🐛 bug report

A new URL(..., import.meta.url) call results in an invalid URL when the file containing the call is included from two separate .js entry points.

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

package.json config:

  "targets": {
    "default": {
      "source": [
        "src/a.js",
        "src/b.js"
      ],
      "outputFormat": "global",
      "context": "browser"
    }
  }

a.js and b.js are identical and contain only:

import './element';

element.js:

const styleUrl = new URL("./style.css", import.meta.url).toString();
console.log(styleUrl);

style.css exists, but its contents are irrelevant.

I build these files and serve them over HTTP. On a separate HTML page, I include the built a.js:

<script type="module" src="http://localhost:3000/a.js></script>

Then visit that page in a browser.

🤔 Expected Behavior

A URL is logged to console like http://localhost:3000/style.[hash].css. Going to that URL returns the contents of style.css.

😯 Current Behavior

A URL is logged to console like http://localhost:3000/9Lg9I. Going to this URL is a 404.

If I delete the src/b.js entry, the expected behavior happens instead.

💁 Possible Solution

This is the built a.js (prettified). The problem is that the call o("2v0ZA"), which creates a mapping of 9Lg9I to the actual built style.css's path, happens after the call o("8uc4t"), which corresponds to the top-level code in element.js. I don't know why this happens, or why deleting the second entry point works around the bug.

(() => {
  var t,
    e = globalThis,
    r = {},
    n = {},
    o = e.parcelRequireedbf;
  null == o &&
    (((o = function (t) {
      if (t in r) return r[t].exports;
      if (t in n) {
        var e = n[t];
        delete n[t];
        var o = { id: t, exports: {} };
        return (r[t] = o), e.call(o.exports, o, o.exports), o.exports;
      }
      var i = Error("Cannot find module '" + t + "'");
      throw ((i.code = "MODULE_NOT_FOUND"), i);
    }).register = function (t, e) {
      n[t] = e;
    }),
    (e.parcelRequireedbf = o));
  var i = o.register;
  i("2v0ZA", function (t, e) {
    Object.assign((o.i ??= {}), { "9Lg9I": "style.1f40dcbf.css" });
  }),
    i("8uc4t", function (t, e) {
      let r = new URL(o("9zMPZ")).toString();
      console.log(r),
        (document.getElementById("put-text-here").textContent = r);
    }),
    i("9zMPZ", function (e, r) {
      e.exports = (function (e) {
        if (((e = o.i?.[e] || e), !t))
          try {
            throw Error();
          } catch (n) {
            var r = ("" + n.stack).match(
              /(https?|file|ftp|(chrome|moz|safari-web)-extension):\/\/[^)\n]+/g
            );
            if (!r) return "./" + e;
            t = r[0];
          }
        return new URL("./" + e, t).toString();
      })("9Lg9I");
    }),
    o("8uc4t"),
    o("2v0ZA");
})();

🔦 Context

I'm building an embeddable custom component that embedders can use by including a JS file from my server. That's why I need to have a JS file as an entry point. There are already embedders referencing two different versions of this file, which is why I have two nearly-identical copies of it.

I've worked around the bug by only having Parcel build one of the files, and copying and modifying it to create the other file after the fact.

💻 Code Sample

This repo has a live repro, with instructions in the readme:

https://github.com/oyamauchi/parcel-bug

🌍 Your Environment

Software	Version(s)
Parcel	2.15.4
Node	22.18.0
npm/Yarn	Yarn 1.22.19
Operating System	macOS 15.6.1