Skip to content

[Bug] v6 migration guide v5 theme import fails in Webpack 5 #21757

Description

@acdn-tsmith

Version

6.1.0

The v6 migration guide is incorrect for Webpack 5

The official ECharts 6 upgrade guide
says that users can preserve the ECharts 5 appearance by importing the v5
compatibility theme:

import 'echarts/theme/v5';
const chart = echarts.init(document.getElementById('container'), 'v5');

That documented migration path does not work in a strict ESM Webpack 5
application:

  1. The guide's exact extensionless import, echarts/theme/v5, fails to resolve.
  2. Using echarts/theme/v5.js, the file explicitly named and linked by the
    guide, compiles but silently registers the theme on a different ECharts
    module instance. Charts therefore retain the ECharts 6 defaults.

As a result, the guide currently gives Webpack users no working import for the
compatibility theme it recommends to avoid visual regressions.

Link to Minimal Reproduction

https://gist.github.com/acdn-tsmith/e3f426c844217682dd6a2aedd4821b88

Steps to Reproduce

  1. Download the four files in the reproduction.
  2. Run npm install.
  3. Run npm test.

The reproduction is a direct Webpack 5 application. It follows the guide using
the explicit .js path linked in its prose, initializes an SSR chart with the
v5 theme, and reads the resolved color palette.

Current Behavior

With the guide's exact extensionless import, Webpack reports that
echarts/theme/v5 has no valid exported target and suggests v5.js.

After making that suggested change, the build succeeds, but Webpack includes the
ESM public entry used by the application and a separate ECharts distribution
module reached through the theme's UMD dependency. The side-effect import
registers v5 on that second module instance, not the ECharts instance used by
the application. The chart silently retains the ECharts 6 palette:

Error: Expected v5 color #5470c6, received #5070dd

The Webpack build identifies both echarts/theme/v5.js and
echarts/dist/echarts.js in addition to the application's ESM ECharts modules.
A direct Node ESM import and a Rollup bundle do not reproduce the failure.

Expected Behavior

The migration guide's documented import should resolve and register the v5
compatibility theme on the ECharts instance used by the application:

import * as echarts from 'echarts';
import 'echarts/theme/v5';

echarts.init(element, 'v5');

Both the documented extensionless path and the linked .js path should work.
The resolved first color should be the ECharts 5 value #5470c6.

Environment

  • OS: macOS
  • Runtime: Node.js 26.8.1
  • Bundler: Webpack 5.110.3
  • Framework: none

Any additional comments?

An ESM-specific theme entry selected for import would ensure registration uses
the same public ECharts module graph as the application while preserving the
existing UMD file for CommonJS and direct browser-script consumers.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enThis issue is in EnglishpendingWe are not sure about whether this is a bug/new feature.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions