URL dependencies using variables instead of hard-coded strings have the wrong origin

[afogel]

🐛 bug report

Hello, I'm having difficulty resolving URL dependencies in a development environment.

Given the finicky nature of debugging URL dependencies, the best I've been able to show here is using a screenshot (see below)

As you can see from the screenshot, I have declared a path variable (line 5) through destructuring the props that have been passed down.
The value of the path variable is '../assets/animations/other_one.webm'.

As the documentation suggests, I tried to pull in video assets I've created a new URL with the path variable and import.meta.url (using template strings or not) on line 8. As you can see from the URL object's evaluation, the URL's origin value is file://, which is incorrect as the file will not be pass .
For the sake of being thorough, on line 9 I pass in the path variable without the template string/string interpolation with the same effect.
On line 10, I also try passing in a different path that references a different video format, ../assets/animations/oppose_angle.mp4, with the same effect.

Where things get very strange is on line 13. When I pass the URL constructor the same value as the path variable ('../assets/animations/other_one.webm'), only this time hard-coded, it returns a URL object with an origin that is http://localhost:1234 which is the expected behavior.
The same correct behavior occurs when using a hard-coded version of the mp4's relative path.

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

here's my .babelrc, .parcelrc, and json.package

{
  "presets": [
      ["@babel/env"]
  ]
}

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

{
  "name": "visual_novel_react",
  "version": "1.0.0",
  "description": "",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "dev": "parcel src/index.html",
    "docs": "jsdoc -c jsdoc.conf.json"
  },
  "author": "Ariel Fogel",
  "license": "MIT",
  "devDependencies": {
    "@babel/preset-env": "^7.16.4",
    "@parcel/optimizer-data-url": "^2.0.1",
    "@parcel/reporter-bundle-analyzer": "^2.0.1",
    "@parcel/transformer-inline-string": "^2.0.1",
    "@parcel/transformer-toml": "^2.0.1",
    "autoprefixer": "^10.3.6",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.26.0",
    "jsdoc": "^3.6.7",
    "parcel": "^2.0.0-rc.0",
    "postcss": "^8.3.8",
    "prettier": "^2.4.1",
    "tailwindcss": "^2.2.16"
  },
  "dependencies": {
    "@inlet/react-pixi": "^6.6.5",
    "@mediapipe/camera_utils": "^0.3.1632432234",
    "@mediapipe/holistic": "^0.4.1632785079",
    "@pixi/text": "^6.1.3",
    "@swc/helpers": "^0.2.14",
    "@xstate/react": "^1.6.2",
    "better-docs": "^2.3.2",
    "chroma-js": "^2.1.2",
    "ml5": "^0.7.1",
    "pixi.js": "^6.1.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-use": "^17.3.1",
    "regenerator-runtime": "^0.13.9",
    "xstate": "^4.26.0"
  }
}

🤔 Expected Behavior

new URL(varName, import.meta.url) resolves the origin to http://localhost:1234

😯 Current Behavior

new URL(varName, import.meta.url) resolves the origin to file:// instead of http://localhost:1234

💁 Possible Solution

Not sure how this is working under the hood or even if it's truly a parcel issue, so hard to know for sure.

🔦 Context

I'm trying to serve video assets from my server so that I can perform transformations on those video files and render them within a PIXI.js app.

💻 Code Sample

I'm running my dev server:

yarn run v1.22.17
$ parcel src/index.html
Server running at http://localhost:1234

and, when I try to resolve the URL, these issues occur.

🌍 Your Environment

Software	Version(s)
Parcel	@parcel/core 2.0.1
Node	v17.1.0
npm/Yarn	yarn 1.22.17
Operating System	OSX Monterey

[afogel]

Another errant thought -- I wonder whether when import.meta.url is evaluated dynamically (e.g. after the app is first bundled), that's when it moves to using file:// as the origin instead of http://localhost:1234...

[LeoniePhiline]

Does it help if you run parcel and @parcel/* at version 2.2?

[afogel]

Hi @LeoniePhiline -- sorry for the delay; I made a mistake in the original bug report I wrote. I am, indeed, on v 2.2.1 and still experiencing the issues.

[afogel]

any thoughts/updates on this?

[hewseph]

I'm still stuck with this also.
using :"parcel": "^2.2.1",

[mischnic]

The reason this happened is that Parcel replaces import.meta.url with file://${__filename}, so something like "file:///src/index.js".

And the only special case here (and the intended way) is new URL("..some string literal..", import.meta.url) which is statically analyzed to reference a static file and gets copied into the distdir. This doesn't work if the first argument is a variable.
So if you do new URL(foo, import.meta.url) then you run into that file:// situation. Even if that wasn't the case, you'd be trying to reference a file that Parcel didn't copy into the dist folder.

But I guess there should be a way to express the current bundle url (= what import.meta.url does without bundling)... (and Parcel would also have to a polyfill for browsers that don't have it)

[afogel]

If instead of being a bug, this is a feature request to be able to reference the current bundle url (i.e. localhost in dev, baseurl in prod), I would very much like to see that.

I think it's important to be able to dynamically reference files. My current workaround is to create a separate file with functions that explicitly create the URLs for assets that I'm seeking to load and then using a switch statement to evaluate which URL should be returned. It...feels pretty brittle, hacky and gross lol.

I imagine there might be challenge with doing that and also having parcel analyze the codebase to know which assets to include in the bundle. Maybe it might be possible to have assets that are dynamically referenced be identified in the .parcelrc?

[dehuszar]

I am also blocked by this. There really needs to be a way to do this, as it seems like a table-stakes kind of pattern. I would be happy to take a stab at making the change, but I'm not quite sure where to start. I'm also open to a different pattern for getting the same effect, if perhaps there is a more brute-force way to set the image loading rules in my .parcelrc

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.