“在'@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：npx create-react-app my-app。

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

• 從'@superset-ui/legacy-preset-chart-nvd3'導入{ NVD3ChartPreset }；
• 新的 NVD3ChartPreset().register();

3. 運行應用程序

Answer 1

他們在 0.17.x 分支的某個地方破壞了他們的客戶端庫。 我降級到較低版本，它對我有用：

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