“在'@superset-ui/core'中找不到导出'Metric'（./node_modules/@superset-ui/chart-controls/esm/types.js 中的错误）Angular/React

Question

我是 superset-ui 的新手，目前希望在我们的 Angular 应用程序中使用它，尽管 React 也会出现这个问题。

我现在只想试用“@superset-ui/legacy-preset-chart-nvd3”组件。为此，我遵循了https://github.com/apache-superset/superset-ui/tree/master/plugins/legacy-preset-chart-nvd3 中给出的用法。

我使用 cli 尝试了一个新生成的 Angular 应用程序。但是当我运行我的 Angular 应用程序时，我收到以下错误：

ERROR in ./node_modules/@superset-ui/chart-controls/esm/types.js 1:0-43
"export 'Metric' was not found in '@superset-ui/core'

同样的错误也出现在 React 应用中：

./node_modules/@superset-ui/chart-controls/esm/types.js
Attempted import error: 'Metric' is not exported from '@superset-ui/core'

以下是我的 app.component.ts.file，我正在尝试使用该组件：

import { Component, OnInit } from '@angular/core';
import { BarChartPlugin } from '@superset-ui/legacy-preset-chart-nvd3';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  ngOnInit() {
    new BarChartPlugin().configure({ key: 'bar' }).register();
  }

  title = 'my-first-project';
}

package.json:

{
  "name": "my-first-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.1",
    "@angular/common": "~10.1.1",
    "@angular/compiler": "~10.1.1",
    "@angular/core": "~10.1.1",
    "@angular/forms": "~10.1.1",
    "@angular/platform-browser": "~10.1.1",
    "@angular/platform-browser-dynamic": "~10.1.1",
    "@angular/router": "~10.1.1",
    "@superset-ui/core": "^0.17.48",
    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.48",
    "antd": "^4.15.6",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-loadable": "^5.5.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.1",
    "@angular/cli": "~10.1.1",
    "@angular/compiler-cli": "~10.1.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

重现行为的步骤：

1. 生成新应用：

• 对于 Angular：ng new my-first-project（同时安装所需的 react 依赖项）
• 对于 React：npx create-react-app my-app。

1. 在 app.component.ts (angular) 或 App.js (react) 中添加以下行：

• 从 '@superset-ui/legacy-preset-chart-nvd3' 导入 { NVD3ChartPreset }；
• new NVD3ChartPreset().register();

1. 运行应用程序

Answer 1

他们在 0.17.x 分支的某个地方破坏了他们的客户端库。我降级到较低版本，它对我有用：

    "@superset-ui/chart-controls": "0.16.9",
    "@superset-ui/core": "0.16.7"