"export 'Metric' was not found in '@superset-ui/core' (ERROR in ./node_modules/@superset-ui/chart-controls/esm/types.js) Angular/React

Question

I'm new to superset-ui and currently looking to use it in our Angular application, although this issue occurs for React as well.

I just wanted to try out "@superset-ui/legacy-preset-chart-nvd3" components for now. To do that, I followed the usage given in https://github.com/apache-superset/superset-ui/tree/master/plugins/legacy-preset-chart-nvd3.

I tried this with a new generated angular app using the cli. But when I ran my Angular application, I get the following error:

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

The same error is also seen for a React app:

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

Following is my app.component.ts.file, where I'm trying to use the component:

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"
    ]
  }
}

Steps to reproduce the behavior:

1. Generate a new app:

• For Angular: ng new my-first-project (Also install required react dependencies)
• For React: npx create-react-app my-app.

2. Add the following lines in app.component.ts (angular) or App.js (react):

• import { NVD3ChartPreset } from '@superset-ui/legacy-preset-chart-nvd3';
• new NVD3ChartPreset().register();

3. Run the application

Answer 1

They broke their client lib somewhere in the 0.17.x branch. I downgraded to a lower version and it worked for me:

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