Ray 小程序使用 @ray-js/charts-library 图表不渲染，报错

wink_li · 2026年 Jun 13日 18:03

Tuya MiniApp IDE 版本信息：~ 0.10.7
- @ray-js/ray, @ray-js/panel-sdk的版本：
  Code: Select all
```
    "@ray-js/charts-library": "^0.0.3",
    "@ray-js/common-charts": "^0.1.9",
    "@ray-js/panel-sdk": "^1.14.1",
    "@ray-js/ray": "^1.7.55",
    "@ray-js/ray-error-catch": "^0.0.26",
    "@ray-js/smart-ui": "^2.7.2",
```
- 相关代码：
  Code: Select all
```
      <ChartPeriodProvider initialGranularity="day">
        <View>
          <ChartGranularityPicker options={['day', 'week', 'month', 'year']} />
          <ChartPeriodNavigator />
          <ChartSeriesPanel
            chartProps={{
              customStyle: {
                width: '100%',
                height: '240px',
              },
            }}
          />
        </View>
      </ChartPeriodProvider>
    </DataSourceProvider>
```
- 日志信息：
  Code: Select all
```
[Template] Tag <core-index-920496 /> attribute: "option" is not supported <Builtin: HTMLElement>
[Template] Tag <core-index-920496 /> attribute: "theme" is not supported <Builtin: HTMLElement>
[Template] Tag <core-index-920496 /> attribute: "unit" is not supported <Builtin: HTMLElement>
[Template] Tag <core-index-920496 /> attribute: "opts" is not supported <Builtin: HTMLElement>
[Template] Tag <core-index-920496 /> attribute: "usingPluginList" is not supported <Builtin: HTMLElement>
[Template] Tag <core-index-920496 /> attribute: "__p__" is not supported <Builtin: HTMLElement>
[Template] Tag <core-index-920496 /> attribute: "__instid__" is not supported <Builtin: HTMLElement>
...（共 22 条，覆盖所有属性，且重复刷出多轮）
```
  Code: Select all
```
- 问题描述（复现步骤）：面板小程序中，使用 @ray-js/charts-library 绘制用水量图表，图表完全不渲染，控制台刷出大量警告。

- AI的问题描述：
```
  排查过程
  1. 定位到 <core-index-920496> 被当作普通 HTMLElement
    日志中 attribute: "xxx" is not supported <Builtin: HTMLElement> 表明 <core-index-920496> 被运行时当作内置 HTML 元素而非自定义组件。原生 ECharts 组件定义在 @tuya-miniapp/common-charts/lib/core/index.js（含 Component({ properties: { option, theme, ... } })），属性声明完整，但运行时根本没加载到该组件。
  2. 对比构建产物 — usingComponents 缺失
    查看 dist/tuya/pages/home/index.json：
  json
  应用
  {
  "usingComponents": {
  "button-index-6f98db": "/npm/@tuya-miniapp/smart-ui/dist/button/index",
  "icon-index-5f5544": "/npm/@tuya-miniapp/smart-ui/dist/icon/index",
  "nav-bar-index-404ec1": "/_npm/@tuya-miniapp/smart-ui/dist/nav-bar/index"
  // 没有任何 common-charts 的条目！
  }
  }
  而 smart-ui 的组件都正常注册了。同样的 _npm/@tuya-miniapp/common-charts/lib/core/ 目录下文件完整（index.js / .json / .tyml / .tyss / .rjs），说明文件已经复制到了构建产物中，但页面的 usingComponents 里漏掉了它。
  1. 对比 smart-ui — 差异在 auto-import 机制
    smart-ui 能自动注册是因为 ray.config.ts 里配置了 SmartUIAutoImport：
  ts
  应用
  // ray.config.ts
  import SmartUIAutoImport from '@ray-js/smart-ui/lib/auto-import';
  const config: RayConfig = {
  importTransformer: [SmartUIAutoImport],
  };
  这会让构建系统把 smart-ui 原生组件的 import 注入到项目源码中，babel-plugin-remax-host-component 检测到后自动生成 usingComponents 映射。
  
  而 @ray-js/charts-library 内部使用 CommonCharts（@tuya-miniapp/common-charts）的方式是预构建包内部的 JSX：
  
  js
  应用
  // @ray-js/common-charts/lib/index.js（预构建）
  import CommonCharts from '@tuya-miniapp/common-charts';
  // ...
  return React.createElement(CommonCharts, { option, theme, ... });
  这个 JSX 在预构建的 .js 文件里，不像 smart-ui 那样有 auto-import 把 import 暴露到项目源码层，babel 插件追踪不到，所以 usingComponents 里永远不会有 common-charts。