adding npm libary to dependencies

I used the simple-json-datasource Plugin and added the mqtt library github.com/mqttjs/MQTT.js like so:

I ran npm install mqtt --save in the simple-json-datasource folder, so it would be in the package.json as a dependency.

in the datasource.js I added:

import mqtt from "mqtt";

afterwards I ran the grunt task which build the src files to the dist folder.

I also ran npm install mqtt --save in the grafana folder and ran the grunt task there also, but I always get the following error when I try to add my simple-json-datasource Plugin:

Plugin Error Error loading http://localhost:3000/public/mqtt as “mqtt” from http://localhost:3000/public/plugins/grafana-simple-json-datasource/datasource.js

I cant figure out how to add a external library to the datasource Plugin and get it running, do I miss out something?

I would be very thankful for some help or advice on how to use npm libraries which arent included in grafana by default. I couldnt find any information regarding that matter.

[aksakalli]

@LaPush I came across the same issue with including additional dependency. I used this experimental plugin as boilerplate to tackle this issue: https://github.com/NatelEnergy/grafana-plotly-panel/

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 https://github.com/grafana/grafana/tree/master/public/vendor)
3. In build task, you need to copy the files under your external folder, so your Gruntfile.js should be like:

module.exports = (grunt) => {
  require('load-grunt-tasks')(grunt);

  grunt.loadNpmTasks('grunt-execute');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.initConfig({

    clean: ['dist'],

    copy: {
      src_to_dist: {
        cwd: 'src',
        expand: true,
        src: ['**/*', '!**/*.js', '!**/*.scss', '!img/**/*'],
        dest: 'dist'
      },
      pluginDef: {
        expand: true,
        src: ['README.md'],
        dest: 'dist',
      },
      externals: {
        cwd: 'src',
        expand: true,
        src: ['**/external/*'],
        dest: 'dist'
      },
      img_to_dist: {
        cwd: 'src',
        expand: true,
        src: ['img/**/*'],
        dest: 'dist'
      }
    },

    watch: {
      rebuild_all: {
        files: ['src/**/*'],
        tasks: ['default'],
        options: {spawn: false}
      },
    },

    babel: {
      options: {
        sourceMap: true,
        presets: ['es2015'],
        plugins: ['transform-es2015-modules-systemjs', 'transform-es2015-for-of'],
      },
      dist: {
        files: [{
          cwd: 'src',
          expand: true,
          src: ['*.js'],
          dest: 'dist',
          ext: '.js'
        }]
      },
    },

  });

  grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'copy:pluginDef', 'copy:img_to_dist', 'copy:externals', 'babel']);
};

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

[bergquist]

When running npm install you will download that package into node_modules. Which is not available for grafana. To use npm packages you need to first download them and then copy them from node_modules to the rootfolder/dist folder.