Module not found 'FormField'

Grafana : v7.0.3

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.

Can you try changing it to:

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

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


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.