superset: Adding Custom Chart throws module resolution error.

Following the preset.io blog, I tried to add my own custom chart hello world plugin and followed the instructions exactly as it said in the article and also in the youtube video. At the end, when I tried to deploy it, it throws this error:

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@superset-ui%2fplugin-chart-hello-world - Not found
superset_node            | npm ERR! 404 
superset_node            | npm ERR! 404  '@superset-ui/plugin-chart-hello-world@^0.0.0' is not in the npm registry.
superset_node            | npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
superset_node            | npm ERR! 404 It was specified as a dependency of 'superset-frontend'
superset_node            | npm ERR! 404 
superset_node            | npm ERR! 404 Note that you can also install from a
superset_node            | npm ERR! 404 tarball, folder, http url, or git url.

Screenshots

while running npm run prod:

while running docker-compose up (after doing all thechanges):

dev server shows me the output that symlink is successful:

but stops @:

MainPreset.js File: [Located @ /home/spidey/apache_superset/incubator-superset/superset-frontend/src/visualizations/presets/MainPreset.js]

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import { Preset } from '@superset-ui/core';
import {
  BigNumberChartPlugin,
  BigNumberTotalChartPlugin,
} from '@superset-ui/legacy-preset-chart-big-number';
import CalendarChartPlugin from '@superset-ui/legacy-plugin-chart-calendar';
import ChordChartPlugin from '@superset-ui/legacy-plugin-chart-chord';
import CountryMapChartPlugin from '@superset-ui/legacy-plugin-chart-country-map';
import EventFlowChartPlugin from '@superset-ui/legacy-plugin-chart-event-flow';
import ForceDirectedChartPlugin from '@superset-ui/legacy-plugin-chart-force-directed';
import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap';
import HistogramChartPlugin from '@superset-ui/legacy-plugin-chart-histogram';
import HorizonChartPlugin from '@superset-ui/legacy-plugin-chart-horizon';
import IframeChartPlugin from '@superset-ui/legacy-plugin-chart-iframe';
import MapBoxChartPlugin from '@superset-ui/legacy-plugin-chart-map-box';
import MarkupChartPlugin from '@superset-ui/legacy-plugin-chart-markup';
import PairedTTestChartPlugin from '@superset-ui/legacy-plugin-chart-paired-t-test';
import ParallelCoordinatesChartPlugin from '@superset-ui/legacy-plugin-chart-parallel-coordinates';
import PartitionChartPlugin from '@superset-ui/legacy-plugin-chart-partition';
import PivotTableChartPlugin from '@superset-ui/legacy-plugin-chart-pivot-table';
import RoseChartPlugin from '@superset-ui/legacy-plugin-chart-rose';
import SankeyChartPlugin from '@superset-ui/legacy-plugin-chart-sankey';
import SunburstChartPlugin from '@superset-ui/legacy-plugin-chart-sunburst';
import TableChartPlugin from '@superset-ui/plugin-chart-table';
import TreemapChartPlugin from '@superset-ui/legacy-plugin-chart-treemap';
import { HelloWorldChartPlugin } from '@superset-ui/plugin-chart-hello-world';
import { WordCloudChartPlugin } from '@superset-ui/plugin-chart-word-cloud';
import WorldMapChartPlugin from '@superset-ui/legacy-plugin-chart-world-map';
import {
  AreaChartPlugin,
  BarChartPlugin,
  BubbleChartPlugin,
  BulletChartPlugin,
  CompareChartPlugin,
  DistBarChartPlugin,
  DualLineChartPlugin,
  LineChartPlugin,
  LineMultiChartPlugin,
  PieChartPlugin,
  TimePivotChartPlugin,
} from '@superset-ui/legacy-preset-chart-nvd3';
import { LegacyBoxPlotChartPlugin } from '@superset-ui/preset-chart-xy';
import { DeckGLChartPreset } from '@superset-ui/legacy-preset-chart-deckgl';

import FilterBoxChartPlugin from '../FilterBox/FilterBoxChartPlugin';
import TimeTableChartPlugin from '../TimeTable/TimeTableChartPlugin';

export default class MainPreset extends Preset {
  constructor() {
    super({
      name: 'Legacy charts',
      presets: [new DeckGLChartPreset()],
      plugins: [
        new AreaChartPlugin().configure({ key: 'area' }),
        new BarChartPlugin().configure({ key: 'bar' }),
        new BigNumberChartPlugin().configure({ key: 'big_number' }),
        new BigNumberTotalChartPlugin().configure({ key: 'big_number_total' }),
        new LegacyBoxPlotChartPlugin().configure({ key: 'box_plot' }),
        new BubbleChartPlugin().configure({ key: 'bubble' }),
        new BulletChartPlugin().configure({ key: 'bullet' }),
        new CalendarChartPlugin().configure({ key: 'cal_heatmap' }),
        new ChordChartPlugin().configure({ key: 'chord' }),
        new CompareChartPlugin().configure({ key: 'compare' }),
        new CountryMapChartPlugin().configure({ key: 'country_map' }),
        new DistBarChartPlugin().configure({ key: 'dist_bar' }),
        new DualLineChartPlugin().configure({ key: 'dual_line' }),
        new EventFlowChartPlugin().configure({ key: 'event_flow' }),
        new FilterBoxChartPlugin().configure({ key: 'filter_box' }),
        new ForceDirectedChartPlugin().configure({ key: 'directed_force' }),
        new HeatmapChartPlugin().configure({ key: 'heatmap' }),
        new HistogramChartPlugin().configure({ key: 'histogram' }),
        new HorizonChartPlugin().configure({ key: 'horizon' }),
        new IframeChartPlugin().configure({ key: 'iframe' }),
        new LineChartPlugin().configure({ key: 'line' }),
        new LineMultiChartPlugin().configure({ key: 'line_multi' }),
        new MapBoxChartPlugin().configure({ key: 'mapbox' }),
        new MarkupChartPlugin().configure({ key: 'markup' }),
        new MarkupChartPlugin().configure({ key: 'separator' }),
        new PairedTTestChartPlugin().configure({ key: 'paired_ttest' }),
        new ParallelCoordinatesChartPlugin().configure({ key: 'para' }),
        new PartitionChartPlugin().configure({ key: 'partition' }),
        new PieChartPlugin().configure({ key: 'pie' }),
        new PivotTableChartPlugin().configure({ key: 'pivot_table' }),
        new RoseChartPlugin().configure({ key: 'rose' }),
        new SankeyChartPlugin().configure({ key: 'sankey' }),
        new SunburstChartPlugin().configure({ key: 'sunburst' }),
        new TableChartPlugin().configure({ key: 'table' }),
        new TimePivotChartPlugin().configure({ key: 'time_pivot' }),
        new TimeTableChartPlugin().configure({ key: 'time_table' }),
        new TreemapChartPlugin().configure({ key: 'treemap' }),
	new HelloWorldChartPlugin().configure({key: 'hello_world'}),
        new WordCloudChartPlugin().configure({ key: 'word_cloud' }),
        new WorldMapChartPlugin().configure({ key: 'world_map' }),
      ],
    });
  }
}

package.json file [Located @ superset-frontend]

{
  "name": "superset",
  "version": "0.999.0dev",
  "description": "Superset is a data exploration platform designed to be visual, intuitive, and interactive.",
  "license": "Apache-2.0",
  "directories": {
    "doc": "docs",
    "test": "spec"
  },
  "scripts": {
    "tdd": "NODE_ENV=test jest --watch",
    "test": "NODE_ENV=test jest",
    "type": "tsc --noEmit",
    "cover": "NODE_ENV=test jest --coverage",
    "dev": "webpack --mode=development --colors --debug --watch",
    "dev-server": "NODE_ENV=development BABEL_ENV=development node --max_old_space_size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode=development",
    "prod": "node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --mode=production --colors",
    "build-dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development webpack --mode=development --colors",
    "build-instrumented": "cross-env NODE_ENV=development BABEL_ENV=instrumented webpack --mode=development --colors",
    "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production webpack --mode=production --colors",
    "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx . && npm run type",
    "prettier-check": "prettier --check '{src,stylesheets}/**/*.{css,less,sass,scss}'",
    "lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx,.ts,tsx . && npm run clean-css && npm run type",
    "clean-css": "prettier --write '{src,stylesheets}/**/*.{css,less,sass,scss}'",
    "check-translation": "prettier --check ../superset/translations/**/LC_MESSAGES/*.json",
    "clean-translation": "prettier --write ../superset/translations/**/LC_MESSAGES/*.json",
    "storybook": "NODE_ENV=development BABEL_ENV=development start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/apache/incubator-superset.git"
  },
  "keywords": [
    "big",
    "data",
    "exploratory",
    "analysis",
    "react",
    "d3",
    "airbnb",
    "nerds",
    "database",
    "flask"
  ],
  "author": "Apache",
  "bugs": {
    "url": "https://github.com/apache/incubator-superset/issues"
  },
  "browserslist": [
    "last 3 chrome versions",
    "last 3 firefox versions",
    "last 3 safari versions",
    "last 3 edge versions"
  ],
  "engines": {
    "node": ">= 6.11.5 <7.0.0 || >= 8.9.0"
  },
  "homepage": "https://superset.apache.org/",
  "dependencies": {
    "@babel/runtime-corejs3": "^7.8.4",
    "@data-ui/sparkline": "^0.0.54",
    "@emotion/core": "^10.0.28",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@superset-ui/chart": "^0.14.9",
    "@superset-ui/chart-composition": "^0.14.9",
    "@superset-ui/plugin-chart-hello-world": "^0.0.0",
    "@superset-ui/chart-controls": "^0.14.9",
    "@superset-ui/color": "^0.14.9",
    "@superset-ui/connection": "^0.14.9",
    "@superset-ui/core": "^0.14.9",
    "@superset-ui/dimension": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-calendar": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-chord": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-country-map": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-event-flow": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-force-directed": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-heatmap": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-histogram": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-horizon": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-iframe": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-map-box": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-markup": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-partition": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.14.14",
    "@superset-ui/legacy-plugin-chart-rose": "^0.14.14",
    "@superset-ui/legacy-plugin-chart-sankey": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-sunburst": "^0.14.9",
    "@superset-ui/legacy-plugin-chart-treemap": "^0.14.13",
    "@superset-ui/legacy-plugin-chart-world-map": "^0.14.9",
    "@superset-ui/legacy-preset-chart-big-number": "^0.14.9",
    "@superset-ui/legacy-preset-chart-deckgl": "^0.2.4",
    "@superset-ui/legacy-preset-chart-nvd3": "^0.14.9",
    "@superset-ui/number-format": "^0.14.9",
    "@superset-ui/plugin-chart-table": "^0.14.11",
    "@superset-ui/plugin-chart-word-cloud": "^0.14.9",
    "@superset-ui/preset-chart-xy": "^0.14.9",
    "@superset-ui/query": "^0.14.15",
    "@superset-ui/style": "^0.14.9",
    "@superset-ui/superset-ui": "^0.14.9",
    "@superset-ui/time-format": "^0.14.9",
    "@superset-ui/translation": "^0.14.9",
    "@superset-ui/validator": "^0.14.9",
    "@types/classnames": "^2.2.9",
    "@types/enzyme": "^3.10.5",
    "@types/fetch-mock": "^7.3.2",
    "@types/react-bootstrap": "^0.32.21",
    "@types/react-gravatar": "^2.6.8",
    "@types/react-json-tree": "^0.6.11",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-select": "^3.0.12",
    "@types/react-virtualized": "^9.21.10",
    "@types/react-window": "^1.8.2",
    "@types/redux-localstorage": "^1.0.8",
    "@types/redux-mock-store": "^1.0.2",
    "@types/rison": "0.0.6",
    "@types/sinon": "^9.0.4",
    "@vx/responsive": "^0.0.195",
    "abortcontroller-polyfill": "^1.1.9",
    "aphrodite": "^2.3.1",
    "array-move": "^2.2.1",
    "bootstrap": "^3.4.1",
    "bootstrap-slider": "^10.0.0",
    "brace": "^0.11.1",
    "chrono-node": "^1.3.11",
    "classnames": "^2.2.5",
    "core-js": "^3.2.1",
    "d3-array": "^1.2.4",
    "d3-color": "^1.2.0",
    "d3-scale": "^2.1.2",
    "dnd-core": "^2.6.0",
    "dom-to-image": "^2.6.0",
    "geolib": "^2.0.24",
    "immutable": "^3.8.2",
    "interweave": "^11.2.0",
    "jquery": "^3.4.1",
    "json-bigint": "^0.3.0",
    "lodash": "^4.17.15",
    "lodash-es": "^4.17.14",
    "mathjs": "^3.20.2",
    "memoize-one": "^5.1.1",
    "moment": "^2.20.1",
    "mousetrap": "^1.6.1",
    "mustache": "^2.2.1",
    "omnibar": "^2.1.1",
    "prop-types": "^15.7.2",
    "re-resizable": "^4.3.1",
    "react": "^16.13.1",
    "react-ace": "^5.10.0",
    "react-avatar": "^3.9.7",
    "react-bootstrap": "^0.33.1",
    "react-bootstrap-dialog": "^0.10.0",
    "react-bootstrap-slider": "2.1.5",
    "react-checkbox-tree": "^1.5.1",
    "react-color": "^2.13.8",
    "react-datetime": "^2.14.0",
    "react-dnd": "^2.5.4",
    "react-dnd-html5-backend": "^2.5.4",
    "react-dom": "^16.13.0",
    "react-gravatar": "^2.6.1",
    "react-hot-loader": "^4.12.20",
    "react-json-tree": "^0.11.2",
    "react-jsonschema-form": "^1.2.0",
    "react-markdown": "^4.3.1",
    "react-redux": "^5.0.2",
    "react-router-dom": "^5.1.2",
    "react-search-input": "^0.11.3",
    "react-select": "^3.1.0",
    "react-select-async-paginate": "^0.4.0-alpha.1",
    "react-select-fast-filter-options": "^0.2.1",
    "react-sortable-hoc": "^1.11.0",
    "react-split": "^2.0.4",
    "react-sticky": "^6.0.2",
    "react-syntax-highlighter": "^7.0.4",
    "react-table": "^7.2.1",
    "react-transition-group": "^2.5.3",
    "react-ultimate-pagination": "^1.2.0",
    "react-virtualized": "9.19.1",
    "react-virtualized-auto-sizer": "^1.0.2",
    "react-virtualized-select": "^3.1.3",
    "react-window": "^1.8.5",
    "reactable-arc": "0.14.42",
    "redux": "^3.5.2",
    "redux-localstorage": "^0.4.1",
    "redux-thunk": "^2.1.0",
    "redux-undo": "^1.0.0-beta9-9-7",
    "regenerator-runtime": "^0.13.5",
    "rison": "^0.1.1",
    "shortid": "^2.2.6",
    "urijs": "^1.18.10",
    "use-query-params": "^0.4.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/compat-data": "^7.9.6",
    "@babel/core": "^7.8.7",
    "@babel/node": "^7.8.7",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@babel/register": "^7.8.6",
    "@emotion/babel-preset-css-prop": "^10.0.27",
    "@hot-loader/react-dom": "^16.13.0",
    "@istanbuljs/nyc-config-typescript": "^1.0.1",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^5.3.19",
    "@svgr/webpack": "^5.4.0",
    "@types/classnames": "^2.2.9",
    "@types/dom-to-image": "^2.6.0",
    "@types/jest": "^26.0.3",
    "@types/jquery": "^3.3.32",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "@types/react-json-tree": "^0.6.11",
    "@types/react-redux": "^5.0.2",
    "@types/react-table": "^7.0.19",
    "@types/react-ultimate-pagination": "^1.2.0",
    "@types/yargs": "12 - 15",
    "@typescript-eslint/eslint-plugin": "^2.20.0",
    "@typescript-eslint/parser": "^2.20.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.1.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-dynamic-import-node": "^2.3.0",
    "babel-plugin-emotion": "^10.0.29",
    "babel-plugin-lodash": "^3.3.4",
    "cache-loader": "^1.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "emotion-ts-plugin": "^0.5.3",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint": "^6.2.2",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-config-prettier": "^6.11.0",
    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-plugin-cypress": "^2.0.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jest": "^23.17.1",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-no-only-tests": "^2.0.1",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.16.0",
    "exports-loader": "^0.7.0",
    "fetch-mock": "^7.0.0-alpha.6",
    "file-loader": "^6.0.0",
    "fork-ts-checker-webpack-plugin": "^0.4.9",
    "ignore-styles": "^5.0.1",
    "imports-loader": "^0.7.1",
    "jest": "^26.1.0",
    "jsdom": "^16.2.2",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.4.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "po2json": "^0.4.5",
    "prettier": "^2.0.5",
    "react-test-renderer": "^16.9.0",
    "redux-mock-store": "^1.2.3",
    "sinon": "^9.0.2",
    "source-map-support": "^0.5.16",
    "speed-measure-webpack-plugin": "^1.2.3",
    "storybook-addon-jsx": "^7.3.3",
    "style-loader": "^1.0.0",
    "terser-webpack-plugin": "^1.1.0",
    "thread-loader": "^1.2.0",
    "transform-loader": "^0.2.3",
    "ts-jest": "^26.1.1",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.42.0",
    "webpack-bundle-analyzer": "^3.6.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-manifest-plugin": "^2.2.0",
    "webpack-sources": "^1.4.3",
    "yargs": "12 - 15"
  },
  "optionalDependencies": {
    "fsevents": "^2.0.7"
  },
  "stylelint": {
    "rules": {
      "block-opening-brace-space-before": "always",
      "no-missing-end-of-source-newline": "never",
      "rule-empty-line-before": [
        "always",
        {
          "except": [
            "first-nested"
          ],
          "ignore": [
            "after-comment"
          ]
        }
      ]
    }
  }
}

Environment

• superset version: 0.36.0 [Running on Docker so not very sure about it]
• python version: 3.6.9
• node.js version: v12.18.2
• npm version: 6.14.6

Checklist

Make sure these boxes are checked before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven’t found one similar.