Module not found 'FormField'

Grafana Plugin Development
1

Grafana : v7.0.3
Ubuntu

When I run ‘yarn dev’ in my plugin folder, I get an error:

ERROR in ./SimpleEditor.tsx
Module not found: Error: Can’t resolve ‘@grafana/ui/components/FormField/FormField’ in ‘/var/lib/grafana/plugins/insert-db/src’
@ ./SimpleEditor.tsx 4:0-71 96:29-38
@ ./module.ts

This is the code i have in SimpleEditor.tsx

 import React, { PureComponent } from 'react';
 import { PanelEditorProps } from '@grafana/data';
 import { SimpleOptions } from './types';
 import { FormField } from '@grafana/ui/components/FormField/FormField';
 
 export class SimpleEditor extends PureComponent<PanelEditorProps<SimpleOptions>> {
   render() {
     return (
         <FormField label="test"></FormField>
     );
   }
 }

Visual Code Studio doesn’t show any issues with the component.
The import path of ‘@grafana/ui/components/FormField/FormField’ is something that is filled in automatically by visual studio code and the content of the FormField.d.ts seems to be the same as in the simple-react-plugin template so the component itself doesn’t seem to be issue.
I’ve tried “yarn upgrade @grafana/ui/” which didn’t seem to work either.

I don’t understand why it’s having this problem with FormField and other similar components.

2

Can you try changing it to:

import { FormField } from '@grafana/ui';
3

Yes i have already tired this since that’s how it seems to be in other examples, however for some reason it doesn’t seem to find it on that path.
Visual Studio Code doesn’t recognize the path.
It shows error
Module ‘"…/node_modules/@grafana/ui"’ has no exported member ‘FormField’.ts(2305)

If i try to autofix it turns it to @grafana/ui/components/FormField/FormField

4

Hi,

The correct import is indeed import { FormField } from '@grafana/ui';. If that doesn’t work, try removing node_modules, yarn.lock and running yarn install once more.

5

Hi,
I am facing the same issue after upgrading to 7.0.6. I tried deleting node_modules and yarn.lock and running yarn install but still facing the same issue.
@kranjdoo: Did this resolve the issue?
Any other solution?
Thanks

6

No I was not able to resolve this issue. I also tried removing modules and reinstalling and it has issues even on a fresh plugin template. Either this is a bug or there’s a problem with nodejs I’m using. I don’t have any problems when I import other elements like Table or Select.

I got around it by just creating a regular input field with these classnames to inherit grafana CSS styles:
(there is < in front of every line)

div className=“gf-form”>
input type=“text” className=“input-small gf-form-input”>
/div>

What version were you using before where it was working?

7

I was using G6.6.1… now trying to upgrade to Grafana 7.1.3.

8

FormField is part of LegacyForms.
Try this inside your …Editor.tsx

import { LegacyForms } from '@grafana/ui';
const { FormField } = LegacyForms;

Also, make sure dev dependencies inside package.json are updated

"devDependencies": {
    "@grafana/data": "7.0.1",
    "@grafana/runtime": "7.0.1",
    "@grafana/toolkit": "7.0.1",
    "@grafana/ui": "7.0.1",
    "@types/lodash": "latest"
  },

Always run yarn install after updating dependencies.

1 Like