Apache Superset中无法看到自定义图表可视化插件的问题求助

操作流程 #

我基于 Apache Superset 4.1.1 版本尝试集成自定义图表，执行步骤如下：

1. 初始化 Superset 环境 #

git clone https://github.com/apache/superset
cd superset 
git checkout tags/4.1.1
# 添加 Keycloak 相关配置代码
docker compose -f docker-compose-image-tag.yml up

2. 配置插件生成工具 #

cd superset-frontend
sudo npm i -g yo
cd packages/generator-superset
npm i && npm link

3. 生成自定义图表插件 #

打开新终端，进入临时目录操作：

cd /tmp
mkdir superset-plugin-chart-ville
cd superset-plugin-chart-ville
yo @superset-ui/superset

生成插件时输入的信息：

• Package name: superset-plugin-chart-ville
• Plugin name: Ville Plugin
• Description: Ville's awesome viz plugin
• 图表类型：Regular chart

构建插件：

npm ci && npm run build

4. 集成插件到 Superset #

打开新终端，进入 Superset 前端目录：

sudo npm i -S /tmp/superset-plugin-chart-ville

修改 superset-frontend/src/visualizations/presets/MainPreset.js：

• 添加导入语句：

import { SupersetPluginChartVille } from 'superset-plugin-chart-ville';

• 在 plugins 数组中注册插件：

new SupersetPluginChartVille().configure({
  key: 'ext-hello-world',
}),

启动前端开发服务器：

npm run dev-server

问题现象 #

• 在 localhost:8088 搜索“Ville”相关图表，无法找到目标插件：
  
• localhost:9000 页面显示内容如下：
  

解决方法 #

1. 核对插件标识与显示名称
   配置时设置的key为ext-hello-world，但插件生成时命名为Ville Plugin，可尝试搜索ext-hello-world查找图表。同时检查插件目录下的plugin.json，确认name和description字段配置正确。

2. 使用开发服务器预览修改
   npm run dev-server启动的是前端开发服务（端口9000），而8088端口的Superset前端是预构建的静态文件，修改代码后不会自动同步。需直接访问localhost:9000查看自定义图表，若要在8088生效，需在superset-frontend目录执行npm run build后重启Superset容器。

3. 验证插件安装与导入有效性

   • 查看superset-frontend/package.json，确认superset-plugin-chart-ville已添加至依赖列表。
   • 检查插件目录src/index.js的导出名称，确保与MainPreset.js中导入的SupersetPluginChartVille一致。

4. 重新构建并重启服务

   • 停止当前开发服务器，回到插件目录执行npm run build，再返回superset-frontend重启npm run dev-server。

内容的提问来源于stack exchange，提问作者BraveEvidence