Dependency Matching

This page explains how the platform decides whether a component "can be rendered" when its dependencies differ from your local versions.

Why matching is needed

When a component is previewed on the platform, it uses the dependencies already installed in your local project. In practice this often looks like:

• The component requires echarts@5.2.3
• You have echarts@5.0.0 installed locally

If versions had to match exactly, a large number of components would be unusable. The platform therefore offers five matching rules, and you decide how loose they should be.

The five rules

Under "Settings → Preview Rules → Dependencies" you can set each package in dependencies and devDependencies separately:

Rule	How it is judged	When it fits	Indicator colour
Auto	No version restriction; use the locally installed version	Default value, prioritises renderability	Gray
Installed only	Only requires the package to be installed locally, ignoring the version	Quick preview, not production validation	Green
Major	Same major version	Balances compatibility and stability	Blue
Major + minor	Same major and minor version	Sensitive about versions	Orange
Exact	Identical version number	Strict version control	Red

Rules get stricter further down the table. Each item on the settings page has a dot in the matching colour for quick identification.

Version comparison example

Assume the component depends on echarts@5.2.3:

Local version	Auto	Installed only	Major	Major + minor	Exact
5.0.0	Use	Use	Use	Skip	Skip
5.2.0	Use	Use	Use	Skip	Skip
5.2.3	Use	Use	Use	Use	Use
6.0.0	Use	Use	Skip	Skip	Skip
Not installed	Skip	Skip	Skip	Skip	Skip

Default behaviour

• Dependencies without their own configuration use Auto.
• A dependency that is not installed at all locally matches no rule and must be installed first.
• The framework is determined by the component source: importing vue renders as Vue, importing react renders as React; importing both cannot be rendered.

Four-step troubleshooting

1. Switch to "All"

Confirm the component exists instead of having been filtered out of the list.

2. Check the dependency status

On the detail page:

• Green: matched successfully
• Yellow: versions differ, you can try to run it
• Red: mismatched or missing

3. Install missing dependencies

npm install <package-name>

Refresh the page after installing so the check runs again.

4. Loosen the rules

When the version difference does not affect functionality, relax the rule from "Exact" to "Major" or "Auto".

Scope of the rules

Dependency matching only affects online preview. Running a downloaded component uses your project's dependencies and has nothing to do with these rules.

Next steps

• Ready to publish your own component: Component Spec
• Dependency errors after publishing: FAQ & Glossary