Grafana 7 Upgrade: React Error with @grafana/ui import

Grafana Plugin Development
1

Hello,

I have a plugin I developed for Grafana version 6.7.3 in React, and it works fine on that version. I’m trying to upgrade to version 7, and running into issues. Without changing anything, the same plugin that works in v6 is giving me an error:

image
image2013×232 17.3 KB

When I dig into the console error, it’s a React minified error. When I click the link to decode the error, I get this page:
image
image1056×110 6.71 KB

By systematically removing elements in my plugin until it works, I’ve determined that adding a element from the @grafana/ui import causes this error.
Offending import:

import { FormLabel } from '@grafana/ui';

Offending line of code (in functional component return statement):

<FormLabel>Query Type</FormLabel>

I have two questions:

  1. How can I build my plugin in React development mode so I can see more detailed errors?
  2. More importantly, how can I use the FormLabel (or other Grafana UI components) without this error? Do I need to update my libraries at all to move to v7?
2

Hi,

There’s a yarn watch script that runs the plugin in dev mode and watches for code changes. It should also output unminified error messages.

The FormLabel component has been renamed to InlineFormLabel in the latest version.