How to use external libraries in grafana datasource-plugin

Question

how can I use a external library in a grafana datasource plugin?

My plugin works but when i require the "mqtt" library which I have installed and saved to the package.json file I get the following error:

Plugin Error Error loading http://localhost:3000/public/mqtt as "mqtt" from http://localhost:3000/public/plugins/myfirstplug/datasource.js

this is what my datasource.js head looks like:

define([
  'mqtt'
  'angular',
  'lodash',
  '../core_module',
  'app/core/config',
],
function (mqtt,angular, _, coreModule, config) {
  'use strict';

As I said the package.json already includes mqtt as dependency and ive put the mqtt folder in almost every folder which may be used as library folder manually , too.

How can I use a npm library in a grafana datasource plugin so that it works?

Thanks in advance!

Answer 1

I came across the same issue with including additional dependency for my plugin. I used this experimental plugin as boilerplate to tackle this issue:

1. You need to create a folder: src/external/
2. Add the compiled single file dist versions of your dependency under this folder like src/external/mqtt.js. (Actually even Grafana project has vendors in git repository)

3. In build task, you need to copy the files under your external folder, so your Gruntfile.js should be like this: https://github.com/NatelEnergy/grafana-plotly-panel/blob/master/Gruntfile.js

   ...
   
   copy: {
     ...
     externals: {
       cwd: 'src',
       expand: true,
       src: ['**/external/*'],
       dest: 'dist'
     }
     ...
   },
   
   ...
   
   grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'copy:pluginDef', 'copy:img_to_dist', 'copy:externals', 'babel']);
   

4. Now you can import the external library: import * as mqtt from './external/mqtt';