Handle absolute Vite base URL

[asmadsen]

Currently if you set the base property in vite.config.ts to an full url (ie http://localhost:5173/), when running vite:dev the modulepreload link tags remove the second slash(/) in http://local....

Current behaviour:

<link rel="modulepreload" href="http:/localhost:5173/app/entry.client.tsx" crossorigin="anonymous">

Expected behaviour:

<link rel="modulepreload" href="http://localhost:5173/app/entry.client.tsx" crossorigin="anonymous">

This is not the case when first running vite:build then serving the output with remix-serve ./build/server/index.js, then it behaves as expected.

I also checked the classic remix compiler, it also behaves as expected.

Testing Strategy:

In a fresh remix project, I pointed @remix/run to the local path of this MR using pnpm link.
Making sure the base property inside vite.config.ts was set to the origin of the local dev server (ie http://localhost:5173/)

pnpm create remix my-test
cd my-test
pnpm run dev

Then I verified that the modulepreload link href works as the expected behaviour above.

I'm a bit unsure if all of the places should be changed, however since they all are based on the same path I think this should be correct. And in the limited testing I did there where no issues.

[changeset-bot]

🦋 Changeset detected

Latest commit: aaecd6c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@remix-run/dev	Patch
create-remix	Patch
remix	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/css-bundle	Patch
@remix-run/deno	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/node	Patch
@remix-run/react	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[brophdawg11]

I don't think ctx.remixConfig.publicPath is guaranteed to be an absolute URL here, is it? If it's not, this will throw an exception:

> node
Welcome to Node.js v20.12.2.
Type ".help" for more information.
> new URL("file.txt", "/public")
Uncaught TypeError: Invalid URL
    at new URL (node:internal/url:796:36) {
  code: 'ERR_INVALID_URL',
  input: 'file.txt',
  base: '/public'
}

[asmadsen]

Good catch, I've updated the PR to use a function implemented the same way as the way axios combines urls

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[brophdawg11]

I think @pcattori and/or @markdalgleish should review this since they're more familiar with the vite plugin internals

[markdalgleish]

I've added some tests, but otherwise this looks great to me. Thanks for the PR!

[github-actions]

🤖 Hello there,

We just published version 2.11.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.11.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!