Adding Custom Chart throws module resolution error.
See original GitHub issueFollowing 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.
Issue Analytics
- State:
- Created 3 years ago
- Comments:30 (1 by maintainers)
Top Results From Across the Web
Adding Custom Chart throws module resolution error. #10433
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 ...
Read more >Error: Can't resolve 'chart.js' in /node_modules/ng2-charts ...
I did "npm install --save ng2-charts". Could you help me to understand why this error is thrown? My package.json "dependencies": { "@angular ...
Read more >Known issues with Microsoft Graph
This article describes known issues with Microsoft Graph. To report a known issue, see the Microsoft Graph support page.
Read more >The specified module 'Module Name' was not loaded because ...
Problem : When trying to import the PnP PowerShell module, I got an error ... Step 2: Verify if the custom module's path...
Read more >Documentation - Module Resolution - TypeScript
If you are having resolution problems with import s and export s in TypeScript, try setting moduleResolution: "node" to see if it fixes...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Yes. I tried that earlier also but somehow was getting the same error, may be I missed something while building back then. I tried it again and it got installed. I am using docker for deployment.
Issue-Label Bot is automatically applying the label
#bug
to this issue, with a confidence of 0.78. Please mark this comment with 👍 or 👎 to give our bot feedback!Links: app homepage, dashboard and code for this bot.