`url:` imports fail with `Could not resolve bundle with id` #7609

danieltroger · 2022-01-26T18:40:10Z

🐛 bug report

It seems like #4365 has risen from the dead.

When having a <script> tag with type="module" which imports something which lazily imports something which imports something using the url: scheme, running the code results in a runtime error.

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

package.json:

{
  "scripts": {
    "build": "parcel build src/index.html",
    "serve": "parcel serve src/index.html"
  },
  "dependencies": {
    "@parcel/babel-plugin-transform-runtime": "nightly",
    "@parcel/babel-preset-env": "nightly",
    "@parcel/bundler-default": "nightly",
    "@parcel/compressor-raw": "nightly",
    "@parcel/config-default": "nightly",
    "@parcel/core": "nightly",
    "@parcel/css": "latest",
    "@parcel/fs": "nightly",
    "@parcel/namer-default": "nightly",
    "@parcel/optimizer-css": "nightly",
    "@parcel/optimizer-cssnano": "nightly",
    "@parcel/optimizer-htmlnano": "nightly",
    "@parcel/optimizer-terser": "nightly",
    "@parcel/packager-css": "nightly",
    "@parcel/packager-html": "nightly",
    "@parcel/packager-js": "nightly",
    "@parcel/packager-raw-url": "nightly",
    "@parcel/resolver-default": "nightly",
    "@parcel/runtime-browser-hmr": "nightly",
    "@parcel/runtime-js": "nightly",
    "@parcel/runtime-react-refresh": "nightly",
    "@parcel/runtime-service-worker": "nightly",
    "@parcel/transformer-babel": "nightly",
    "@parcel/transformer-css": "nightly",
    "@parcel/transformer-css-experimental": "nightly",
    "@parcel/transformer-html": "nightly",
    "@parcel/transformer-inline-string": "nightly",
    "@parcel/transformer-js": "nightly",
    "@parcel/transformer-postcss": "nightly",
    "@parcel/transformer-posthtml": "nightly",
    "@parcel/transformer-react-refresh-wrap": "nightly",
    "@parcel/transformer-sass": "nightly",
    "@parcel/transformer-webmanifest": "nightly",
    "@parcel/utils": "nightly",
    "parcel": "nightly"
  }
}

cli command: yarn install && yarn build && http-server -p 1234 dist/

🤔 Expected Behavior

The URL to the SVG should be logged to the console.

😯 Current Behavior

lazy.e20bce0f.js:1 Uncaught (in promise) Error: Could not resolve bundle with id 2vcPw
    at Object.r (lazy.e20bce0f.js:1:666)
    at Object.<anonymous> (lazy.e20bce0f.js:1:487)
    at o ((index):1:416)
    at Object.<anonymous> (lazy.e20bce0f.js:1:378)
    at o ((index):1:416)
    at (index):1:673
    at async (index):1:716

💁 Possible Solution

Fix so that it no longer throws but instead correctly gives the URL of the SVG.

Alternatively, please fix #5683 which forced me to use a <script> tag instead of <script src=" and triggered this error.

🔦 Context

Was happily on parcel 2.0.1. Then my colleague wanted to import a style sheet per module on our react project. Reason being readability and that unused CSS doesn't load too early.

It worked out of the box (like parcel usually does) 😋 but the precedence was wrong.

When doing

in entrypoint:

import "./low-precedence.scss"; // general styling
import "./script.ts";

in script.ts:

import "./high-precedence.scss";

The output bundle first contained high-precedence and then low-precedence, making it impossible to override general styling without making every selector more specific.

I was about to report an issue but then I discovered https://github.com/parcel-bundler/parcel-css, which fixed all issues and made the scss build time much faster 🎉

Buuutt to install that I had to update to the latest parcel, where I was greeted with #5683.

After figuring out the workaround I thought I could finally be happy but then this happened 😔

💻 Code Sample

parcel_lazy_error.zip

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.984+74fcc3fb
Node	v17.4.0
npm/Yarn	3.1.1
Operating System	macOS 12.1 (21C52)

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

danieltroger · 2022-01-28T13:09:00Z

I debugged this a bit and the problem is that this register function isn't called with an object mapping jycCC to atom.7f133627.svg.

That should be done by

parcel/packages/runtimes/js/src/JSRuntime.js

Line 542 in e0440dc

function getRegisterCode(

which gets called here:

parcel/packages/runtimes/js/src/JSRuntime.js

Line 234 in e0440dc

assets.push({

but now it's getting complicated.

danieltroger · 2022-01-28T15:19:59Z

I see that @mischnic has arrived, very cool :) Here's just some more stuff I found that might help:

Something's wrong with some graph. You can see that jycCC is the SVG.

Here

parcel/packages/runtimes/js/src/JSRuntime.js

Line 69 in e0440dc

apply({bundle, bundleGraph, options}) {

in bundleGraph.#graph._graph.nodes[19] the SVG jycCC exists but it's not in bundleGraph.#graph._assetPublicIds. Maybe it's not supposed to because idk but it sounds like it should be a public asset.

spointecker · 2022-02-02T15:46:49Z

Hey,
I am also struggling with this issue. I am on Parcel v2.2.1.

In my case it only happens in production build when loading the page. The parcel build process itself works.
I already tried to:

exclude IE 11 from browserlist (as @danieltroger suggested in Regression: Uncaught error: Cannot find module #5683 (comment)) without success
I changed the loading of index.js (as @danieltroger suggested in Regression: Uncaught error: Cannot find module #5683 (comment)) without success

danieltroger · 2022-02-04T19:04:04Z

I stepped a bit further and here is where it adds the reference to the unexisting SVG:

parcel/packages/runtimes/js/src/JSRuntime.js

Line 191 in e0440dc

assets.push(getURLRuntime(dependency, bundle, mainBundle, options));

DUnno where the place where it's missing is though

spointecker · 2022-02-05T10:26:40Z

@danieltroger thanks for digging.
can you reproduce the issue in dev mode too? Would like to debug that with my setting too, for now I really don't know why it is happening and I also don't know if it is the same issue with an url import.

danieltroger · 2022-02-05T11:35:50Z

I had a ton of issues too when targetting ie11, even without url imports. I think the url imports breaking are just another symptom of the issue.

It doesn't break for me in dev mode, so you need to clear cache and build every time to reproduce it.

Use ndb and npm and then you should be able to add debugger statements in node_modules/@parcel/runtime-js/lib/JSRuntime.js

spointecker · 2022-02-08T10:51:58Z

Maybe it's just a random coincidence, but maybe it has something to do with svgs.

I am using fontawesome svg icons, and the console shows that it is trying to load an icon:

.

spointecker · 2022-02-11T13:39:42Z

I tried now version 2.3.1 and 2.0.1 with no success, same issue.

EDIT:
Okay, I downgraded to version 2.0.0-rc.0 and now it is working.

spacecheeserocks · 2022-03-04T18:20:50Z

@spointecker The fix seems to be to disable scope hoisting (--no-scope-hoist CLI parameter).

Found in #4222 (comment) while searching around.
NOTE the author of the linked comment has a typo - the correct parameter is --no-scope-hoist.

It seems that scope hoisting has a hard time with SVG URL imports, and disabling scope hoisting solves the issue.

I tested in 2.3.2 with the --no-scope-hoist CLI arg and the issue went away for both styles of URI import:

import logo1 from "url:logo.svg";
const logo2 = new URL('logo.svg', import.meta.url);

danieltroger · 2022-03-04T18:47:58Z

Scope hoisting is one of the reasons I'm using parcel because not having it increases bundle size so unfortunately that's not an option for me :(

spointecker · 2022-03-08T15:48:30Z

@spointecker The fix seems to be to disable scope hoisting (--no-scope-hoist CLI parameter).

Found in #4222 (comment) while searching around. NOTE the author of the linked comment has a typo - the correct parameter is --no-scope-hoist.

It seems that scope hoisting has a hard time with SVG URL imports, and disabling scope hoisting solves the issue.

I tested in 2.3.2 with the --no-scope-hoist CLI arg and the issue went away for both styles of URI import:
import logo1 from "url:logo.svg";
const logo2 = new URL('logo.svg', import.meta.url);

As @danieltroger already mentioned that is not an option for our production builds.

yrral86 · 2022-11-17T15:46:14Z

I'm also seeing this issue with my service worker. The service worker fails to register and logs the same could not resolve bundle with id error message. Disabling scope hoisting fixes the registration, but the service worker does not seem to function correctly. I'm working on narrowing down further what isn't working. Everything builds fine with parcel 1.

mischnic · 2022-11-17T21:46:48Z

I just tried #7609 (comment) and that did work fine for me even with scopehoisting on 2.8.0.

Is everyone else also using an inline script (<script type="module">import "./script.ts";</script> like in the zip in the original post)?

yrral86 · 2022-11-18T17:47:10Z

I'm also seeing this issue with my service worker. The service worker fails to register and logs the same could not resolve bundle with id error message. Disabling scope hoisting fixes the registration, but the service worker does not seem to function correctly. I'm working on narrowing down further what isn't working. Everything builds fine with parcel 1.

The service worker issues turned out to be terser related. That's working now as long as I don't scope hoist.

I just tried #7609 (comment) and that did work fine for me even with scopehoisting on 2.8.0.

Is everyone else also using an inline script (<script type="module">import "./script.ts";</script> like in the zip in the original post)?

I am unable to build at all with 2.8.0. I'm seeing this behavior on 2.7.0. On 2.80, I've got the "Bundle group cannot have more than one entry bundle of the same type" issue.

I am building a javascript entry point that registers a service worker. This file is then being imported into a legacy codebase like this:

<script src="Polymerize.js"></script>

I also tried it with type="module", but that didn't change anything. I'm also bit paranoid about cross browser issues since our legacy codebase is on an ancient toolchain (polymer 1).

I took a look at Polymerize.js and found that in that file, the bundle id of dwU5c was the service worker:

  a("kI8SP").register(JSON.parse('{"71nzx":"Polymerize.js","dwU5c":"service-worker.js","auZ8u":"Polymerize.css"}'))

Yet, in service-worker.js the only reference is this:

Rd=r("4jCUu").getBundleURL("dwU5c")+r("gdjiW").resolve("dwU5c")

I'm thinking my issue is related to the fact that the service worker imports the same module that also handles the registration. It appears the scope-hoisting is deciding to remove that bundle, which makes sense because the service worker will never execute the code to register a new service worker. However, for some reason it is still attempting to resolve it. I see that variable is used inside the function:

navigator.serviceWorker.register(Rd)

But it that the resolve is happening at the top level of the module.

I'll see if I can break this module up in a way where the service worker registration code can be cleanly removed from the bundle so the service-worker doesn't try and fail to resolve itself.

yrral86 · 2022-11-18T21:21:01Z

I was able to handle the service worker registration in an isolated module and pull that into my JS entrypoints and not the service worker. That got me past the issue.

Razunter · 2022-11-24T09:21:39Z

Getting this bug on 2.8.0 on build, but 2.7.0 works fine.

Gearme · 2023-06-19T21:23:19Z

Just to keep this fresh: I've encountered this issue, too. --no-scope-hoist doesn't solve the problem.

eldjuve · 2023-06-20T10:00:42Z

got this due to a circle dependency between a worker module and the initiator

the-iter8 · 2023-10-28T09:32:06Z

Hi people, the easiest solution to this issue would be downgrading plasmo to 8.0. I've literally spent 2 days looking for a solution. Just change the version from 8.x to 8.0 in the package.json and then reinstall it using your package manager,

danieltroger changed the title ~~Runtime error after building: lazy.e20bce0f.js:1 Uncaught (in promise) Error: Could not resolve bundle with id 2vcPw~~ url: imports fail with Could not resolve bundle with id Jan 26, 2022

mischnic added 🐛 Bug ✨ Parcel 2 labels Jan 28, 2022

danieltroger mentioned this issue Jan 31, 2022

Error: Cannot read property 'hashReferences' of undefined #4145

Open

yrral86 mentioned this issue Nov 17, 2022

Edge from 2050 to 2051 not found! #8632

Closed

tmpfs mentioned this issue Dec 8, 2022

Cannot find bundle id in release build #8680

Closed

martonlederer mentioned this issue Aug 8, 2023

"Could not resolve bundle with id" [BUG] PlasmoHQ/plasmo#661

Open

3 tasks

brumm added a commit to brumm/tako that referenced this issue Aug 26, 2023

remove svg due to parcel-bundler/parcel#7609

7c9ec44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`url:` imports fail with `Could not resolve bundle with id` #7609

`url:` imports fail with `Could not resolve bundle with id` #7609

danieltroger commented Jan 26, 2022

danieltroger commented Jan 28, 2022

danieltroger commented Jan 28, 2022

spointecker commented Feb 2, 2022

danieltroger commented Feb 4, 2022 •

edited

Loading

spointecker commented Feb 5, 2022

danieltroger commented Feb 5, 2022 •

edited

Loading

spointecker commented Feb 8, 2022

spointecker commented Feb 11, 2022 •

edited

Loading

spacecheeserocks commented Mar 4, 2022

danieltroger commented Mar 4, 2022

spointecker commented Mar 8, 2022

yrral86 commented Nov 17, 2022

mischnic commented Nov 17, 2022

yrral86 commented Nov 18, 2022 •

edited

Loading

yrral86 commented Nov 18, 2022

Razunter commented Nov 24, 2022 •

edited

Loading

Gearme commented Jun 19, 2023

eldjuve commented Jun 20, 2023

the-iter8 commented Oct 28, 2023 •

edited

Loading

url: imports fail with Could not resolve bundle with id #7609

url: imports fail with Could not resolve bundle with id #7609

Comments

danieltroger commented Jan 26, 2022

🐛 bug report

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

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

danieltroger commented Jan 28, 2022

danieltroger commented Jan 28, 2022

spointecker commented Feb 2, 2022

danieltroger commented Feb 4, 2022 • edited Loading

spointecker commented Feb 5, 2022

danieltroger commented Feb 5, 2022 • edited Loading

spointecker commented Feb 8, 2022

spointecker commented Feb 11, 2022 • edited Loading

spacecheeserocks commented Mar 4, 2022

danieltroger commented Mar 4, 2022

spointecker commented Mar 8, 2022

yrral86 commented Nov 17, 2022

mischnic commented Nov 17, 2022

yrral86 commented Nov 18, 2022 • edited Loading

yrral86 commented Nov 18, 2022

Razunter commented Nov 24, 2022 • edited Loading

Gearme commented Jun 19, 2023

eldjuve commented Jun 20, 2023

the-iter8 commented Oct 28, 2023 • edited Loading

`url:` imports fail with `Could not resolve bundle with id` #7609

`url:` imports fail with `Could not resolve bundle with id` #7609

danieltroger commented Feb 4, 2022 •

edited

Loading

danieltroger commented Feb 5, 2022 •

edited

Loading

spointecker commented Feb 11, 2022 •

edited

Loading

yrral86 commented Nov 18, 2022 •

edited

Loading

Razunter commented Nov 24, 2022 •

edited

Loading

the-iter8 commented Oct 28, 2023 •

edited

Loading