React 集成 Apache Superset 展示图表运行报错技术问询

根因说明 #

该报错是由于Superset UI依赖Emotion 11的新JSX运行时转换规则，项目的React编译配置未适配该规则导致，即便已安装@emotion/react依赖也会触发导出缺失错误。

修复步骤 #

• 安装缺失依赖
  除已安装的@emotion/react外，额外安装Emotion的Babel编译插件：

  npm install @emotion/babel-plugin --save-dev
  # 或使用yarn
  yarn add @emotion/babel-plugin -D
  

• 修改项目编译配置
  根据项目情况选择对应的配置方案：

  1. 已eject/自定义Babel配置的项目
     找到项目根目录下的.babelrc或babel.config.json文件，添加如下配置：

  {
    "presets": [
      ["@babel/preset-react", {
        "runtime": "automatic",
        "importSource": "@emotion/react"
      }]
    ],
    "plugins": ["@emotion/babel-plugin"]
  }
  

  2. 未eject的CRA项目（使用craco配置）
     修改craco.config.js文件，添加如下配置：

  module.exports = {
    babel: {
      presets: [
        ["@babel/preset-react", { runtime: "automatic", importSource: "@emotion/react" }]
      ],
      plugins: ["@emotion/babel-plugin"]
    }
  }
  

• 修复代码逻辑缺陷
  当前代码中未定义renderError方法，会触发二次运行时报错，补充对应实现即可：

  // 放在App组件外部即可
  const renderError = (error) => <div>图表加载失败：{error.message}</div>
  

• 清理缓存重启项目
  删除本地编译缓存后重启项目即可生效：

  # 执行启动命令时添加重置缓存参数
  npm run start -- --reset-cache
  

额外注意事项 #

Superset服务端需要配置跨域规则，否则会出现接口跨域报错，可在Superset的superset_config.py中添加配置：

ENABLE_CORS = True
CORS_ORIGINS = ["http://你的前端服务地址:端口"]

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