Unable to build datasource-http-backend example

[mwiehler]

I'm trying to learn how to develop a datasource plugin with http backend, however I'm unable to build the example project.

I'm a React newbie, so might just be my lack of knowledge!

I get the following errors:

1. In the QueryEditor.tsx component Input' cannot be used as a JSX component. Its type 'ForwardRefExoticComponent<Omit<Props$13, "ref"> & RefAttributes>' is not a valid JSX element type. Type 'ForwardRefExoticComponent<Omit<Props$13, "ref"> & RefAttributes>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'. Type 'ReactElement<any, string | JSXElementConstructor> | null' is not assignable to type 'ReactNode'. Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'.ts(2786)

2. In module.ts

TS2345: Argument of type 'typeof ConfigEditor' is not assignable to parameter of type 'ComponentType<DataSourcePluginOptionsEditorProps<MyDataSourceOptions, {}>>'. Type 'typeof ConfigEditor' is not assignable to type 'ComponentClass<DataSourcePluginOptionsEditorProps<MyDataSourceOptions, {}>, any>'. Types of property 'contextType' are incompatible. Type 'React.Context | undefined' is not assignable to type 'import("C:/_Dev/GrafanaPlugins/datasource-http-backend/node_modules/.pnpm/@types+react@17.0.75/node_modules/@types/react/index").Context | undefined'. Type 'React.Context' is not assignable to type 'import("C:/_Dev/GrafanaPlugins/datasource-http-backend/node_modules/.pnpm/@types+react@17.0.75/node_modules/@types/react/index").Context'. Types of property 'Provider' are incompatible. Type 'React.Provider' is not assignable to type 'import("C:/_Dev/GrafanaPlugins/datasource-http-backend/node_modules/.pnpm/@types+react@17.0.75/node_modules/@types/react/index").Provider'. Types of parameters 'props' and 'props' are incompatible. Type 'import("C:/_Dev/GrafanaPlugins/datasource-http-backend/node_modules/.pnpm/@types+react@17.0.75/node_modules/@types/react/index").ProviderProps' is not assignable to type 'React.ProviderProps'.
Types of property 'children' are incompatible. Type 'import("C:/_Dev/GrafanaPlugins/datasource-http-backend/node_modules/.pnpm/@types+react@17.0.75/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'. Type '{}' is not assignable to type 'ReactNode'.

And a similar error for QueryEditor:

TS2345: Argument of type 'typeof QueryEditor' is not assignable to parameter of type 'ComponentType<QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions, MyQuery>>'. Type 'typeof QueryEditor' is not assignable to type 'ComponentClass<QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions, MyQuery>, any>'. Types of property 'contextType' are incompatible. Type 'React.Context | undefined' is not assignable to type 'import("C:/_Dev/GrafanaPlugins/datasource-http-backend/node_modules/.pnpm/@types+react@17.0.75/node_modules/@types/react/index").Context | undefined'.
7 | export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource) 8 | .setConfigEditor(ConfigEditor)

9 | .setQueryEditor(QueryEditor);

Would really appreciate some pointers or help on how to make it work. The basic datasource example worked!

[jackw]

@mwiehler many thanks for reporting this issue. I can see from the error messages you're using Windows with PNPM. Is this correct?

Please note this project is setup for using NPM as the package manager. If you use NPM instead of PNPM you shouldn't have any of these issues.

However if you are keen to continue with PNPM I think I managed to reproduce the error you're having. The issue is due to the way PNPM hoists and symlinks packages. In this case it's specifically the @types packages which are causing the issue. To solve it we need to make use of the .npmrc file to tell PNPM what to hoist into the root node_modules directory. You can find further information about this in their docs here.

Please could you copy the following into a .npmrc file in the root of the plugin project (where the package.json file is).

# This file is required for PNPM

# PNPM 8 changed the default resolution mode to "lowest-direct" which is not how we expect resolutions to work
resolution-mode="highest"

# Make sure the default patterns are still included (https://pnpm.io/npmrc#public-hoist-pattern)
public-hoist-pattern[]="*eslint*"
public-hoist-pattern[]="*prettier*"

# Hoist all types packages to the root for better TS support
public-hoist-pattern[]="@types/*"

# @grafana/e2e expects cypress to exist in the root of the node_modules directory
public-hoist-pattern[]="*cypress*"

Once done run pnpm install again. If the previous .npmrc step was followed you should see a message like:

✔ The modules directory at "/Users/bob/dev/sandbox/datasource-http-backend/node_modules" will be removed and reinstalled from scratch. Proceed? (Y/n) · true
Recreating /Users/bob/dev/sandbox/datasource-http-backend/node_modules

Make sure to select true and let pnpm do its thing. Once the install is complete try running pnpm run build again. It should now work. Happy plugin dev'ing! 🚀

[mwiehler]

Thank you so much! This worked!