Use of Collapse UI component in Grafana v8

Grafana Plugin Development
1

Hello,

I want to upgrade some of my plugins from V7 to V8 but I have some compilation errors with types.

As a minimal example, I tried to initiate a new plugin with GrafanaToolkit and replace its body with a Collapse component:

import React from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import { Collapse, } from '@grafana/ui';

interface Props extends PanelProps<SimpleOptions> {}

export const SimplePanel: React.FC<Props> = () => {
  return (
      <Collapse label={'coucou'}>
        <p>Panel data</p>
      </Collapse>
  );
};

This gives me the following error:

yarn run v1.22.15
$ grafana-toolkit plugin:dev
✔ Linting
⠦ Bundling plugin in dev mode  TS2322: Type '{ children: Element; label: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
    Property 'children' does not exist on type 'IntrinsicAttributes & Props'.
      20 |       )}
      21 |     >
    > 22 |       <Collapse label={'coucou'}>
         |        ^^^^^^^^
      23 |         <p>Panel data</p>
      24 |       </Collapse>
      25 |       <svg
✖ Build failed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Node version: v14.19.1

Grafana UI version:

yarn.lock
1222:    "@grafana/ui" "8.5.0"
1300:"@grafana/ui@8.5.0", "@grafana/ui@latest":
1302:  resolved "https://registry.yarnpkg.com/@grafana/ui/-/ui-8.5.0.tgz#47c107af1376bfbdbbddef5cb3b262963864b4e4"

What’s wrong?

2

Looks like @types/react version 18.0.1 or higher is installed (probably 18.0.5).
In @types/react v18.0.1 they removed children from FunctionComponent, but Grafana still uses React v17.
[react] React 18 types by eps1lon · Pull Request #56210 · DefinitelyTyped/DefinitelyTyped (github.com)

A quick fix is to install @types/react v17
yarn add @types/react@^17

3

Indeed, this is what rg @types/react -A 3 found in my yarn.lock file:

2419:"@types/react@*":
2420-  version "18.0.5"
2421:  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301"
2422-  integrity sha512-UPxNGInDCIKlfqBrm8LDXYWNfLHwIdisWcsH5GpMyGjhEDLFgTtlRBaoWuCua9HcyuE0rMkmAeZ3FXV1pYLIYQ==
2423-  dependencies:
2424-    "@types/prop-types" "*"

After the yarn add the example compiles ! :+1:

V18 is still there though:

2460:"@types/react@*":
2461-  version "18.0.5"
2462:  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301"
2463-  integrity sha512-UPxNGInDCIKlfqBrm8LDXYWNfLHwIdisWcsH5GpMyGjhEDLFgTtlRBaoWuCua9HcyuE0rMkmAeZ3FXV1pYLIYQ==
2464-  dependencies:
2465-    "@types/prop-types" "*"
--
2469:"@types/react@^17":
2470-  version "17.0.44"
2471:  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
2472-  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
2473-  dependencies:
2474-    "@types/prop-types" "*"

Should I do something about it?

4

You could remove the other version, but it should be fine leaving it.
You could also remove the entire yarn.lock file and run yarn install, which should just keep the needed @types/react dependency

5

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.