Error while building datasource plugin tutorial project

ivansantos · April 28, 2020, 3:37pm

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!

skarhed · April 29, 2020, 2:19pm

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

ivansantos · April 29, 2020, 2:40pm

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:

skarhed · April 29, 2020, 3:57pm

Are you importing LegacyForms somewhere?

ivansantos · April 29, 2020, 4:41pm

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

marcusolsson · May 11, 2020, 1:38pm

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.

ivansantos · May 11, 2020, 1:51pm

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!

marcusolsson · May 11, 2020, 1:55pm

Are you getting the same error if you run?:

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

ivansantos · May 11, 2020, 2:26pm

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.

marcusolsson · May 11, 2020, 2:49pm

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?

ivansantos · May 11, 2020, 2:52pm

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

marcusolsson · May 11, 2020, 2:55pm

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!

marcusolsson · May 11, 2020, 3:12pm

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!

agak · May 12, 2020, 10:06am

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

marcusolsson · May 12, 2020, 11:57am

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

marcusolsson · May 12, 2020, 12:09pm

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?

agak · May 12, 2020, 12:13pm

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.

marcusolsson · May 12, 2020, 12:18pm

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

ivansantos · May 12, 2020, 12:34pm

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

marcusolsson · May 12, 2020, 12:41pm

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

Topic		Replies	Views
Datasource plugin example help Grafana Plugin Development plugins	7	1743	December 29, 2022
Developing custom data source plugin error Grafana Plugin Development	1	411	October 23, 2019
404 error while developing custom datasource plugin Grafana Plugin Development	1	2466	July 11, 2018
Need a beginner guideline for development of datasource plugin Grafana Plugin Development	10	3842	December 10, 2021
Error while compling ConfigEditor.tsx in DataSourceHttpSettings Grafana Plugin Development plugins	1	527	May 16, 2022

Error while building datasource plugin tutorial project

Related topics