search

apache-superset / superset-ui-plugins-template

Template for Superset plugins
https://apache-superset.github.io/superset-ui-plugins-template/
Apache License 2.0
11 stars 11 forks source link

Creating a new Dummy plugin #2

Open StevePain opened 4 years ago

StevePain commented 4 years ago

Hi there

I am new to supersert and very interested in understanding how front end plugins work.

I followed the guide reported here: https://github.com/apache-superset/superset-ui-plugins-template

I just wanted to add another "dummy" plugin, so i copied the /packages/superset-ui-plugin-chart-dummy/ in another folder: /packages/another/

then

i copied the /packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-dummy/ in /packages/superset-ui-plugins-demo/storybook/stories/another/

and in stories/another/index.js i did: new DummyChartPlugin().configure({ key: 'anotherdummy' }).register();

then i run yarn storybook, only to get such errors:

ERROR in ../another/src/transformProps.ts 21:49 Module parse failed: Unexpected token (21:49) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | under the License. | /

export default function transformProps(chartProps: ChartProps) { | const { width, height, formData, queryData } = chartProps; | const { color } = formData; @ ../another/src/index.ts 21:0-46 35:6-20 @ ./storybook/stories/another/index.js @ ./storybook/stories sync index.jsx?$ @ ./storybook/stories/index.js @ ./.storybook/config.js @ multi /home/stevepain/superset-ui-plugins-template/node_modules/@storybook/core/dist/server/common/polyfills.js /home/stevepain/superset-ui-plugins-template/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ../another/src/DummyChart.tsx 21:7 Module parse failed: Unexpected token (21:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders import React from 'react';

export type DummyChartProps = { | height: number; | width: number; @ ../another/src/index.ts 33:23-45 @ ./storybook/stories/another/index.js @ ./storybook/stories sync index.jsx?$ @ ./storybook/stories/index.js @ ./.storybook/config.js @ multi /home/stevepain/superset-ui-plugins-template/node_modules/@storybook/core/dist/server/common/polyfills.js /home/stevepain/superset-ui-plugins-template/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

what am i doing wrong?

thank you Steve

StevePain commented 4 years ago

in the end i "solved" by removing "/src/" in file ../superset-ui-plugins-demo/storybook/stories/another-chart-dummy/index.js import DummyChartPlugin from '../../../../another';

not sure of what this means I would like to understand more the sense of it all

japorized commented 4 years ago

Hi StevePain,

In .storybook/webpack.config.js, you'll notice the following line.

const SIBLING_PACKAGES_PATH_REGEXP = new RegExp(
  `${path.resolve(__dirname, '../../superset-ui-(legacy-)*(plugin|preset)-')}.+/src`,
);

In particular, in your case, since your new plugin does not fit in the regex specified above, it is not being parsed by webpack, nor any of its loaders.

To resolve this, you can either rename your plugin to follow the regex specified above, or modify this webpack.config.js file to include your plugin.