404 error while developing custom datasource plugin

I am developing a datasource plugin but I am running into a rather strange issue. Below is some context to our problem.

The first issue I encountered was knowing how to include npm modules in the browser so grafana can use them (node-rest-client-promise, for example). This GitHub issue: https://github.com/grafana/simple-json-datasource/issues/19 says to copy the modules into the src folder (it seems like grafana does not look in the node_modules directory) in order to make it accessible to grafana via the browser.

This led to another issue with require statements not being understood by the browser so I am using webpack to bundle the modules and make such statements understandable to the browser.

However, in doing this, webpack does not understand the path ‘app/plugins/sdk’ in the queryCtrl for importing the queryCtrl class. I came across the following Stack Overflow post:


Which suggests using grafana-sdk-mocks to fix this path issue. So I copied over the module into the src folder but it doesn’t show up in the browser and it seems that something is appending a .js extension to the path.

Error Message when attempting to select our custom datasource plugin:

Failed to load resource: the server responded with a status of 404 (Not Found) row_ctrl.ts:73 Plugin component error Error: Fetch error: 404 Not Found Instantiating http://www.localhost:3000/public/plugins/name-of-plugin/libs/grafana-sdk-mocks/app/plugins/sdk.ts.js. <= here is the appended .js
Loading http://www.localhost:3000/public/plugins/name-of-plugin/query_ctrl.js Loading plugins/name-of-plugin-datasource/module at index.js:20
The grafana documentation is not very clear as to how grafana looks for imported modules nor how it resolves the ‘app/plugins/sdk’ path since it is nowhere to be found locally.


Technologies we are using:
Grunt => Used to copy from the src/ directory to the dist/ directory and handle babel transpilation
Babel => Used to transpile from ES6 to ES5 standards
Webpack => Used to bundle node modules and make them accessible to grafana via the browser

Our pipeline:
$ webpack

$ grunt && brew services restart grafana

Grafana was installed using these steps:
$ brew update

$ brew install grafana

$ brew tap homebrew/services

$ brew services start grafana

Any help would be greatly appreciated!

1 Like

The advice about copying third party modules, in general, only applies to libraries which are otherwise not part of Grafana. The intention of grafana-sdk-mocks is to be a ‘stand-in’ interface that provides enough interface information for TypeScript to compile, and then the real modules will be supplied by the environment that Grafana loads the plugin into.

TLDR: grafana mocks and anything in node_modules/@types should be left in the node_modules folder, not moved into a lib folder.