Error while building datasource plugin tutorial project

Hello,

I was following the tutorial to build a custom datasource plugin and once I ran the command yarn dev it gave me the following error:

√ Linting
/ Bundling plugin in dev mode [tsl] ERROR in …\tutorial-plugin\src\ConfigEditor.tsx(2,10)
TS2305: Module ‘“…/tutorial-plugin/node_modules/@grafana/ui”’ has no exported member ‘LegacyForms’.
[tsl] ERROR in …\tutorial-plugin\src\QueryEditor.tsx(4,10)
TS2305: Module ‘“…/tutorial-plugin/node_modules/@grafana/ui”’ has no exported member ‘LegacyForms’.

Hash: d913b9277484b296e717
Version: webpack 4.35.0
Time: 13830ms
Built at: 2020-04-28 16:34:14
Asset Size Chunks Chunk Names
LICENSE 11.3 KiB [emitted]
README.md 1.36 KiB [emitted]
img\logo.svg 1.55 KiB [emitted]
module.js 80.6 KiB module [emitted] module
module.js.map 71.9 KiB module [emitted] module
plugin.json 722 bytes [emitted]
Entrypoint module = module.js module.js.map
[…/node_modules/lodash/_arrayLikeKeys.js] 1.74 KiB {module} [built]
[…/node_modules/lodash/_baseRest.js] 559 bytes {module} [built]
[…/node_modules/lodash/_isIterateeCall.js] 877 bytes {module} [built]
[…/node_modules/lodash/defaults.js] 1.71 KiB {module} [built]
[…/node_modules/lodash/eq.js] 799 bytes {module} [built]
[…/node_modules/lodash/keysIn.js] 778 bytes {module} [built]
[…/node_modules/tslib/tslib.es6.js] 9.91 KiB {module} [built]
[./ConfigEditor.tsx] 2.68 KiB {module} [built] [1 error]
[./DataSource.ts] 1.66 KiB {module} [built]
[./QueryEditor.tsx] 1.7 KiB {module} [built] [1 error]
[./module.ts] 296 bytes {module} [built]
[./types.ts] 46 bytes {module} [built]
[@grafana/data] external “@grafana/data” 42 bytes {module} [built]
[@grafana/ui] external “@grafana/ui” 42 bytes {module} [built]
[react] external “react” 42 bytes {module} [built]
+ 41 hidden modules

ERROR in …\tutorial-plugin\src\ConfigEditor.tsx
./ConfigEditor.tsx
[tsl] ERROR in …\tutorial-plugin\src\ConfigEditor.tsx(2,10)
TS2305: Module ‘“…/tutorial-plugin/node_modules/@grafana/ui”’ has no exported member ‘LegacyForms’.

ERROR in …\tutorial-plugin\src\QueryEditor.tsx
./QueryEditor.tsx
[tsl] ERROR in …\tutorial-plugin\src\QueryEditor.tsx(4,10)
TS2305: Module ‘“…/tutorial-plugin/node_modules/@grafana/ui”’ has no exported member ‘LegacyForms’.

Trace: Build failed
at …\tutorial-plugin\node_modules@grafana\toolkit\src\cli\utils\useSpinner.js:24:29
at step (…\tutorial-plugin\node_modules@grafana\toolkit\node_modules\tslib\tslib.js:136:27)
at Object.throw (…\tutorial-plugin\node_modules@grafana\toolkit\node_modules\tslib\tslib.js:117:57)
at rejected (…\tutorial-plugin\node_modules@grafana\toolkit\node_modules\tslib\tslib.js:108:69)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
× Build failed
error Command failed with exit code 1.
info Visit yarn run | Yarn for documentation about this command.

Can somebody help me figure this out?

Thank you!

Hi! Are you using LegacyForms? What version of @grafana/ui are you using?

We recently did some breaking changes, which you can see here.

/Tobias Skarhed

Thanks for the reply!

I’m using the latest.
Here is what I have in my package.json:

“devDependencies”: {
@grafana/data”: “canary”,
@grafana/toolkit”: “canary”,
@grafana/ui”: “canary”,
@types/lodash”: “latest”
}

I was following the tutorial available here:

Are you importing LegacyForms somewhere?

Oh sorry, yes. It’s imported in the project generated from the command
npx "@grafana/toolkit"@canary plugin:create my-plugin

Are you still getting the same error. The canary build is considered unstable, and we’ll make sure to update the tutorials with a stable version as soon as Grafana 7.0 has been released.

Unfortunately yes, I haven’t been able to figure a way to fix the problem.
Is there a way to create a project using a stable version?

Thank you!

Are you getting the same error if you run?:

npx "@grafana/toolkit"@next plugin:create my-plugin

Now I’m getting the following error:

yarn run v1.22.4
$ grafana-toolkit plugin:dev
internal/validators.js:117
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:117:11)
    at Object.basename (path.js:671:5)
    at isLinkedMode (...\my-plugin\node_modules\@grafana\toolkit\bin\grafana-toolkit.js:13:12)
    at entrypoint (...\my-plugin\node_modules\@grafana\toolkit\bin\grafana-toolkit.js:29:7)
    at Object.<anonymous> (...\my-plugin\node_modules\@grafana\toolkit\bin\grafana-toolkit.js:51:9)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  code: 'ERR_INVALID_ARG_TYPE'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Hm. I’m not able to reproduce the error you’re getting. Both canary and next works for me.

Do you think you could you give me some more details?

Are you getting this on the the Create a new plugin step?
Have you made any changes to the code?
What OS/Node version are you running?

I’m getting this error when I run yarn dev command

I haven’t changed anything, just run yarn dev right after I run:

npx "@grafana/toolkit"@next plugin:create my-plugin

I’m using Windows 10, Node v12.16.2, and yarn 1.22.4

I think this might be an issue on Windows. I’ll try and see if I can find a Windows machine to test this on. Thanks for your patience!

Works on Windows as well. I’m sorry, but I can’t seem to reproduce this. Let me know if you (or anyone else) figure out what’s wrong!

Hi!

I had the same problem with the command:
npx "@grafana/toolkit"@next plugin:create postgres-plugin-easy

I looked into tsconfig.json in the plugin’s folder.

It stated:
"extends": "@grafana/toolkit/src/config/tsconfig.plugin.json"

I changed the path to:
"extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json"

And yarn dev command finished with no errors, but the dist folder is not created.

The plugin is loaded into grafana 7.0.0

Best regards,
Aga

Thank you for the details. I’m looking into this

The path in tsconfig.json should indeed be ./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json. I’ve updated the data source template to reflect this.

@ivansantos Can you try running the npx command again, and see if this solves your problem?

Hi,

I’ve ran yarn update and after that yarn dev. Here’s the error log:

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/diffLines.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/diffLines.d.ts(8,13):
TS1005: '=' expected.

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/diffLines.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/diffLines.d.ts(8,34):
TS1005: ';' expected.

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts(10,13):
TS1005: '=' expected.

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts(10,34):
TS1005: ';' expected.

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts(11,1):
TS1128: Declaration or statement expected.

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts(11,13):
TS1005: ';' expected.

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/index.d.ts(11,52):
TS1005: ';' expected.

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/printDiffs.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/printDiffs.d.ts(8,13):
TS1005: '=' expected.

ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/printDiffs.d.ts
ERROR in C:/Users/Aga/go/src/github.com/grafana/grafana/node_modules/@types/jest/node_modules/jest-diff/build/printDiffs.d.ts(8,57):
TS1005: ';' expected.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It looks like you’re running this command in the grafana root directory, and not in your plugin. Where’s your plugin located?

Hey,

I tried running the npx command and got the same result as before:

PS E:\Work\my-plugin> yarn dev
yarn run v1.22.4
$ grafana-toolkit plugin:dev
internal/validators.js:117
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined       
    at validateString (internal/validators.js:117:11)
    at Object.basename (path.js:671:5)
    at isLinkedMode (E:\Work\my-plugin\node_modules\@grafana\toolkit\bin\grafana-toolkit.js:13:12)     
    at entrypoint (E:\Work\my-plugin\node_modules\@grafana\toolkit\bin\grafana-toolkit.js:29:7)        
    at Object.<anonymous> (E:\Work\my-plugin\node_modules\@grafana\toolkit\bin\grafana-toolkit.js:51:9)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  code: 'ERR_INVALID_ARG_TYPE'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Edit: I just tried to run yarn dev in the git bash and the code built successfully. It seems that the problem is related to Powershell and Windows command line

Could you write an issue for this on our GitHub page?