vuejs/vue-cli · error · Error

Require @vue/cli-service "${range}", but was loaded with "${

Error message

Require @vue/cli-service "${range}", but was loaded with "${this.cliServiceVersion}".

What it means

Thrown by assertCliServiceVersion when the locally installed @vue/cli-service version does not satisfy the semver range required by the plugin/generator. It compares the resolved cli-service version (from the project's node_modules) against the range and throws on mismatch.

Source

Thrown at packages/@vue/cli/lib/GeneratorAPI.js:159

    )

    return servicePkg.version
  }

  assertCliServiceVersion (range) {
    if (typeof range === 'number') {
      if (!Number.isInteger(range)) {
        throw new Error('Expected string or integer value.')
      }
      range = `^${range}.0.0-0`
    }
    if (typeof range !== 'string') {
      throw new Error('Expected string or integer value.')
    }

    if (semver.satisfies(this.cliServiceVersion, range, { includePrerelease: true })) return

    throw new Error(
      `Require @vue/cli-service "${range}", but was loaded with "${this.cliServiceVersion}".`
    )
  }

  /**
   * Check if the project has a given plugin.
   *
   * @param {string} id - Plugin id, can omit the (@vue/|vue-|@scope/vue)-cli-plugin- prefix
   * @param {string} version - Plugin version. Defaults to ''
   * @return {boolean}
   */
  hasPlugin (id, versionRange) {
    return this.generator.hasPlugin(id, versionRange)
  }

  /**
   * Configure how config files are extracted.
   *

View on GitHub (pinned to 7eb93c169c)

Solutions

  1. Upgrade the project's @vue/cli-service: npm install @vue/cli-service@latest (or vue upgrade @vue/cli-service).
  2. If you can't upgrade, downgrade the plugin to a version compatible with your current cli-service.
  3. Check installed version: npm list @vue/cli-service and compare to the required range.

Example fix

# before
project has @vue/cli-service@4.5.0
plugin requires ^5.0.0
# after
$ npm install @vue/cli-service@^5.0.0
Defensive patterns

Strategy: validation

Validate before calling

const semver = require('semver');
const servicePkg = require('@vue/cli-service/package.json');
if (!semver.satisfies(servicePkg.version, requiredRange, { includePrerelease: true })) {
  console.warn(`@vue/cli-service ${servicePkg.version} does not satisfy ${requiredRange}.`);
}

Try / catch

try {
  generatorAPI.assertCliServiceVersion('^5.0.0');
} catch (e) {
  if (e.message.includes('Require @vue/cli-service')) {
    console.error('cli-service version mismatch. Run: npm install @vue/cli-service@latest');
    process.exit(1);
  }
  throw e;
}

Prevention

When it happens

Trigger: A plugin generator calls assertCliServiceVersion('^5.0.0') but the project has @vue/cli-service 4.x installed. Or the project's cli-service is older than what the plugin requires.

Common situations: A plugin was updated to require a newer cli-service, but the project's local @vue/cli-service dependency hasn't been upgraded. Occurs during `vue invoke` or `vue upgrade` after updating plugins.

Related errors


AI-assisted analysis of vuejs/vue-cli@7eb93c169c (2026-08-13). Data as JSON: /api/errors/e15f9a31a7cc21ac. Report an issue: GitHub.