Javascript "new URL('...', import.meta.url)" syntax not working

[jeb5]

🐛 Bug report

new URL('foo.jpg', import.meta.url) compiles without error, but throws a ERR_INVALID_URL error when run.

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

No .babelrc, no .parceljs. package.json is at default npm init -y state.

I'm just running parcel build index.js

🤔 Expected Behavior

new URL('foo.jpg', import.meta.url) compiles down to new URL("foo.d7483e92.jpg")

😯 Current Behavior

internal/url.js:279
  throw new ERR_INVALID_URL(input);
  ^

TypeError [ERR_INVALID_URL]: Invalid URL: /foo.d7483e92.jpg
    at onParseError (internal/url.js:279:9)
    at new URL (internal/url.js:355:5)
    at /****/*****/****/****/****/dist/index.js:1:1420
    at Object.<anonymous> (/****/*****/****/****/****/dist/index.js:1:1433)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  input: '/foo.d7483e92.jpg',
  code: 'ERR_INVALID_URL'
}

💁 Possible Solution

???

🔦 Context

I'm trying to use svg images in my web app, which are transformed into png images by a custom transformer plugin. I'm using query parameters. new URL('...', import.meta.url) seems like the best way to do this.

💻 Code Sample

| package.json
| index.js
| foo.jpg

// index.js
console.log(new URL("foo.jpg", import.meta.url));

🌍 Your Environment

Software	Version(s)
Parcel	2.2.1
Node	v14.17.6
npm	8.3.2
Operating System	macOS 12.1

[yergom]

I'm trying to do a similar thing to import an svg within a js file:

const info = new URL('info.svg', import.meta.url);

but at runtime I get

Uncaught TypeError: URL constructor: [object Object] is not a valid URL.

where the generated code is:

const info = new URL(require("10550ed8cba4ef4f"));

This error, together with #7587, makes it impossible? to embed svgs in react components

[afogel]

I don't think that's necessarily a bug, yet -- did you try ./info.svg or ./foo.png as the URL? A similar syntax does work for me when working with images.

However, I wonder if you still have issues like I have in #7643 ?

[yergom]

I've also tried to use the url directly in the jsx element, but there is no transformation performed in the resulting bundle (so the image cannot be found). I have the same issue as you have in #7643.

[cmkweber]

I'd also like to note that it seems Parcel removes the hash (#) and search (?) from the url, which can be problematic for .svg's that need to reference an id within the svg:

const info = new URL('info.svg#Icon', import.meta.url);

[afogel]

this is still an open issue, would love to see movement/resolution. Thanks

[afogel]

Still no updates, it seems.

[mischnic]

Can someone provide a complete code sample](https://minimum-reproduction.wtf/)?