Unexpected One or more pages contain dead links for localhost links

[JounQin]

Describe the bug

<!-- docs/guide/getting-started.md -->
This will start a local server and open the <http://localhost:3000> page in the browser.

(!) Found dead link http://localhost:3000 in file docs/guide/getting-started.md

Reproduction

N/A

Expected behavior

No error

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 24.57 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/Library/Caches/fnm_multishells/60250_1655730203758/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/60250_1655730203758/bin/yarn
    npm: 8.12.1 - ~/Library/Caches/fnm_multishells/60250_1655730203758/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Firefox: 101.0.1
    Safari: 16.0
  npmPackages:
    vitepress: ^1.0.0-alpha.2 => 1.0.0-alpha.2

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[JounQin]

I have to use http://127.0.0.1:3000 as a workaround for now.

[kecrily]

@brc-dd

Do you know why localhost is considered a dead link? In my opinion local links like localhost and 127.0.0.1 should not be considered as dead links, they are valid in some development, internal scenarios.

vitepress/src/node/markdown/plugins/link.ts

Lines 28 to 31 in 06ad0d8

	// catch localhost links as dead link
	if (url.replace(EXTERNAL_URL_RE, '').startsWith('//localhost:')) {
	pushLink(url)
	}

[brc-dd]

@kecrily Some people unintentionally leave links like localhost:3000/foo.html due to copy-pasting URLs during development. It was added to prevent such scenarios. But yeah, this should be fixed IG. People may have things like "go to localhost:1234 after running foo".

Does <a href="http://localhost:3000">localhost:3000</a> work?

[JounQin]

Does <a href="http://localhost:3000">localhost:3000</a> work?

Noop, it's still a link.

[brc-dd]

@JounQin Are you sure? Because I'm not getting any error on doing that: https://stackblitz.com/edit/vite-jhbvp5?file=docs/index.md . Maybe you've those links in other files too?

[JounQin]

@JounQin Are you sure? Because I'm not getting any error on doing that: stackblitz.com/edit/vite-jhbvp5?file=docs/index.md . Maybe you've those links in other files too?

Ah, sorry, I misremembered it with [http://localhost:3000](http://localhost:3000).

<a href="http://localhost:3000">http://localhost:3000</a> is working as expected.

[brc-dd]

So, that's a recommended workaround for now (you won't have many such URLs anyway). When #793 gets merged, you can also ignore dead links check (not recommended, but will work). I don't think there is a way to actually fix this issue without disregarding the original cause why that check was introduced in first place.

[JounQin]

Maybe adding this limitation into document would help. Closing for now because it is expected in the first place.

[JounQin]

Additionally, the 1:1 workaround would be <a href="http://localhost:3000" target="_blank" rel="noreferrer noopener">http://localhost:3000</a>.

[JounQin]

@brc-dd I found another interested thing:

// components/ExternalLink.ts, registered as global components
import type { AnchorHTMLAttributes } from 'react'
import { h, FunctionalComponent } from 'vue'

export type ExternalLinkProps = Omit<
  AnchorHTMLAttributes<HTMLAnchorElement>,
  'target'
>

export const ExternalLink: FunctionalComponent<ExternalLinkProps> = (
  props,
  context,
) =>
  h(
    'a',
    {
      target: '_blank',
      rel: 'noreferrer noopener',
      ...props,
    },
    context.slots.default?.(),
  )

The following will still emit error.

<ExternalLink href="http://localhost:3000">http://localhost:3000</ExternalLink>

Because the emitted result is:

<a target="_blank" rel="noreferrer noopener" href="http://localhost:3000">
  <a href="http://localhost:3000" target="_blank" rel="noopener noreferrer">
    http://localhost:3000
  </a>
</a>

I'm not sure to understand this.

[brc-dd]

It's getting autolinked IG. Pass it as a prop instead, or disable autolinking:

export default {
  markdown: {
    linkify: false
  }
}

[JounQin]

Just found I was silly, I should use props.href as children actually.

import type { AnchorHTMLAttributes } from 'react'
import type { FunctionalComponent } from 'vue'
import { h } from 'vue'

export interface ExternalLinkProps
  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'target'> {
  href: string
}

export const LOCAL_URL_REG = /^https?:\/\/localhost:/

/**
 * @see https://github.com/vuejs/vitepress/issues/822 for details
 */
export const ExternalLink: FunctionalComponent<ExternalLinkProps> = ({
  href,
  ...props
}) => {
  if (process.env.NODE_ENV === 'development' && !LOCAL_URL_REG.test(href)) {
    console.error('You should use markdown style link instead')
  }
  return h(
    'a',
    {
      href,
      target: '_blank',
      rel: 'noreferrer noopener',
      ...props,
    },
    href,
  )
}

<ExternalLink href="http://localhost:3000" />