slidevjs/slidev · error · Error

Invalid ${type} name "${name}". Only valid npm package names

Error message

Invalid ${type} name "${name}". Only valid npm package names are allowed.

What it means

Thrown by the theme/addon resolver returned from createResolver when the supplied name fails RE_SAFE_PKG_NAME (/^(?:@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/). This guards the resolution branch that treats the name as an npm package name, after local-path forms (/, @/, ./, foo/bar) are excluded.

Source

Thrown at packages/slidev/node/resolver.ts:345

  }

  return async function (name: string, importer: string): Promise<[name: string, root: string | null]> {
    const { userRoot } = await getRoots()

    if (name === 'none')
      return ['', null]

    // local path
    if (name[0] === '/')
      return [name, name]
    if (name.startsWith('@/'))
      return [name, resolve(userRoot, name.slice(2))]
    if (name[0] === '.' || (name[0] !== '@' && name.includes('/')))
      return [name, resolve(dirname(importer), name)]

    // Validate that the name is a safe npm package name before resolving
    if (!RE_SAFE_PKG_NAME.test(name))
      throw new Error(`Invalid ${type} name "${name}". Only valid npm package names are allowed.`)

    // search for local packages first
    {
      const possiblePkgNames = [name]

      if (!name.includes('/') && !name.startsWith('@')) {
        possiblePkgNames.unshift(
          `@slidev/${type}-${name}`,
          `slidev-${type}-${name}`,
        )
      }

      for (const pkgName of possiblePkgNames) {
        const pkgRoot = await findPkgRoot(pkgName, importer)
        if (pkgRoot)
          return [pkgName, pkgRoot]
      }
    }

View on GitHub (pinned to 0d798ace58)

Solutions

  1. Use the package's npm name (lowercase, scoped or unscoped), e.g. @slidev/theme-seriph or slidev-theme-foo.
  2. For a local theme on disk, use a path form: /abs/path, @/alias, ./relative, or foo/bar relative.
  3. Check for stray whitespace, uppercase, or punctuation and correct them.

Example fix

// before: invalid name in headmatter
---
theme: My Cool Theme
---

// after: valid npm package name
---
theme: seriph
---
// or scoped:
---
theme: @slidev/theme-seriph
---
Defensive patterns

Strategy: validation

Validate before calling

const RE_SAFE_PKG_NAME = /^(?:@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/

function isValidPkgName(name: string): boolean {
  return RE_SAFE_PKG_NAME.test(name)
}

// before configuring a theme/addon name:
if (!isValidPkgName(name) && !name.startsWith('/') && !name.startsWith('@/') && name[0] !== '.') {
  throw new Error(`Invalid theme/addon name: ${name}`)
}

Type guard

function isSafePkgName(name: string): boolean {
  // local-path forms bypass the npm-name check
  if (name.startsWith('/') || name.startsWith('@/') || name[0] === '.') return true
  return RE_SAFE_PKG_NAME.test(name)
}

Try / catch

try {
  return await resolveTheme(name, importer)
} catch (e) {
  if (e instanceof Error && /Invalid (theme|addon) name/.test(e.message)) {
    return { error: 'Use a lowercase npm package name or a local path for the theme.' }
  }
  throw e
}

Prevention

When it happens

Trigger: Configuring theme/addon with a name containing uppercase letters, spaces, or other characters disallowed by npm naming rules, and not matching any local-path prefix. E.g. theme: 'My Theme', addon: 'foo!bar', or theme: 'A'.

Common situations: Typo in the headmatter theme: value; using a display name instead of the package name; copy-pasting a theme's human title rather than its npm name; trailing whitespace or non-ASCII characters.

Related errors


AI-assisted analysis of slidevjs/slidev@0d798ace58 (2026-08-12). Data as JSON: /api/errors/e3296f36ac2a2243. Report an issue: GitHub.