Skip to content

TypeError: Invalid URL on bundled asset paths #10196

@lazuee

Description

@lazuee

🐛 bug report

Using URL scheme to inline bundled path as url but got Invalid URL

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

{
  "extends": "parcel-config-react-router-experimental"
}

🤔 Expected Behavior

["/client/400.c4cd5e01.css"]

😯 Current Behavior

[new URL("/client/400.c4cd5e01.css", import.meta.url).toString()]

TypeError: Invalid URL
    at new URL (node:internal/url:818:25)
    at jGma7.react/jsx-runtime (/workspace/goldenstate-new/apps/website/dist/server/fonts.106ce29b.js:1:1472)
    at p (/workspace/goldenstate-new/apps/website/dist/server/fonts.106ce29b.js:1:680)
    at /workspace/goldenstate-new/apps/website/dist/server/fonts.106ce29b.js:1:1138
    at Object.<anonymous> (/workspace/goldenstate-new/apps/website/dist/server/fonts.106ce29b.js:1:1302)
    at Module._compile (node:internal/modules/cjs/loader:1730:14)
    at Object..js (node:internal/modules/cjs/loader:1895:10)
    at Module.load (node:internal/modules/cjs/loader:1465:32)
    at Function._load (node:internal/modules/cjs/loader:1282:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14) {
  code: 'ERR_INVALID_URL',
  input: '/client/400.c4cd5e01.css'
}

💁 Possible Solution

🔦 Context

When importing css/font files, parcel automatically injects <link> tags into the react-jsx output. Which I want to customize it for preloading and other use-case, that's why i want to get the bundled css url.

const fontPreloads: LinkDescriptor[] = [
  new URL("npm:@fontsource/inter/400.css", import.meta.url).toString(), // <-- original 
  // new URL("/client/400.c4cd5e01.css", import.meta.url).toString()), // <-- bundled - current behavior
  // "/client/400.c4cd5e01.css", <-- expected behavior
]

💻 Code Sample

"use server-entry";

import { type LinkDescriptor } from "react-router";

const fontPreloads: LinkDescriptor[] = [
  new URL("npm:@fontsource/inter/400.css", import.meta.url).toString(),
].flatMap((href) => {
  return [
    {
      rel: "preload",
      as: "style",
      href,
    },
    { rel: "stylesheet", href },
  ];
});

export const Fonts: React.FC = () => {
  return fontPreloads.map((props, i) => <link key={i} {...props} />);
};

🌍 Your Environment

Software Version(s)
Parcel 2.0.0-canary.1858
Node 22.16.0
npm/PNPM 10.9.2/10.12.1
Operating System Ubuntu 22.04

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions