Creating a new Dummy plugin

[StevePain]

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]

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]

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.