-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Open
Description
🐛 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 |