Typescript errors when calling @grafana/runtime

Hi
When I import

import { getBackendSrv } from '@grafana/runtime';

into my custom react panel, I get a large list of TS errors that are coming from grafana/ui.
errors like these:

grafana/packages/grafana-ui/src/components/Alert/Alert.tsx
Type 'import("/home/me/go/src/github.com/grafana/grafana/packages/grafana-ui/node_modules/@types/react/index").CSSProperties' is not assignable to type 'React.CSSProperties'.
grafana/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
Type 'import("/home/me/go/src/github.com/grafana/grafana/packages/grafana-ui/node_modules/@types/react/index").CSSProperties' is not assignable to type 'React.CSSProperties'.
grafana/packages/grafana-ui/src/components/BigValue/BigValue.tsx
Type 'import("/home/me/go/src/github.com/grafana/grafana/packages/grafana-ui/node_modules/@types/react/index").CSSProperties' is not assignable to type 'React.CSSProperties'.

Does anyone know why this is happening ?

Which version of Grafana are you on and which version of @grafana/runtime are you using?

@daniellee - following your good question, I tried adding @grafana/runtime to my package.json.
I wasn’t installing it and had only these packages:

"@grafana/data": "next",
"@grafana/toolkit": "next",
"@grafana/ui": "next"

Adding "@grafana/runtime": "next" to package.json, solved the issue.

BTW - type .search is missing
getBackendSrv()

currently this is the TS for this interface:

export interface BackendSrv {

    get(url: string, params?: any, requestId?: string): Promise<any>;

    delete(url: string): Promise<any>;

    post(url: string, data?: any): Promise<any>;

    patch(url: string, data?: any): Promise<any>;

    put(url: string, data?: any): Promise<any>;

    request(options: BackendSrvRequest): Promise<any>;

    datasourceRequest(options: BackendSrvRequest): Promise<any>;

}

Should I PR ?

1 Like