Problem with using React plugin in dashboard Grafana

1

I am trying to create my own React plugin, following literally the example from workshop-panel, I pulled the code from the Grafana react repository plugins example:

import React, { PureComponent } from 'react';
import { PanelProps, PanelPlugin } from '@grafana/ui';

export class MyPanel extends PureComponent<PanelProps> {
    render() {
        return (
            <div>Hello from my panel</div>
        )
    }
}

export const reactPanel = new PanelPlugin(MyPanel);

I tried to modify the export as export const plugin = new PanelPlugin(MyPanel); but this still did not work. I am getting the error Panel plugin not found: workshop-panel and when I restart the server I also get plugin with id: 2 not found.

This is from my Chrome console : Failed to load resource: the server responded with a status of 404 (Not Found)

And this is my Dashboard JSON:

{

“annotations”: {
“list”: [
{
“builtIn”: 1,
“datasource”: “-- Grafana --”,
“enable”: true,
“hide”: true,
“iconColor”: “rgba(0, 211, 255, 1)”,
“name”: “Annotations & Alerts”,
“type”: “dashboard”
}
]
},
“editable”: true,
“gnetId”: null,
“graphTooltip”: 0,
“id”: null,
“links”: [],
“panels”: [
{
“gridPos”: {
“h”: 9,
“w”: 12,
“x”: 0,
“y”: 0
},
“id”: 2,
“options”: {},
“timeFrom”: null,
“timeShift”: null,
“title”: “Panel Title”,
“type”: “workshop-panel”
}
],
“schemaVersion”: 18,
“style”: “dark”,
“tags”: [],
“templating”: {
“list”: []
},
“time”: {
“from”: “now-6h”,
“to”: “now”
},
“timepicker”: {
“refresh_intervals”: [
“5s”,
“10s”,
“30s”,
“1m”,
“5m”,
“15m”,
“30m”,
“1h”,
“2h”,
“1d”
],
“time_options”: [
“5m”,
“15m”,
“1h”,
“6h”,
“12h”,
“24h”,
“2d”,
“7d”,
“30d”
]
},
“timezone”: “”,
“title”: “New dashboard”,
“uid”: null,
“version”: 0
}

2

what version of Grafana are you using and of @grafana/ui ,

for @grafana/ui you should use latest nightly build of Grafana