TimeSeries is not a constructor

Grafana Plugin Development
1

hi

I developed two plugins which run just fine on my local installation which is v4.7.0-pre, when I deployed them to our live server, which is currently on 4.4.1, I get an error “TimeSeries is not a constructor”.

Any chance I can make it work with the older version of Grafana until we update?

thanks in advance for advice

2

Could you post a code snippet with the code that throws this error (just a line or two). Thanks

3

Hi

I wrote the plugin using the typescript-webpack template.

This line causes the error:
let series = new TimeSeries( { datapoints: seriesData.datapoints, alias: seriesData.target } );

As I could not import it with "import … as ", I used require like so:

const TimeSeries = require('grafana/app/core/time_series2');

Any more info I can supply?

4

Hi

sorry, just solved it myself…
it was a typo in my import which caused the troubles…

import TimeSeries from 'grafana/app/core/time_series2';

was the correct import line…

5

okay, it was not a typo…

thing is using @types/grafana works for the v4.4 installation, but fails for 4.7-pre.

so for 4.7 I use require()
and for 4.4 I use import

I’m fairly new to typescript, but this really doesn’t make any sense to me.

Note:
using import on 4.7-pre gives me the error
"time_series2_1.default is not a constructor"
but works just fine with require vice-versa for 4.4

6

Why do you have grafana in the path?

Should be this I think:

import TimeSeries from "app/core/time_series2";

As that is how it is exposed to plugins: https://github.com/grafana/grafana/blob/master/public/app/features/plugins/plugin_loader.ts#L94

7

if I don’t put grafana in the path, PHPstorm tells me “Cannot find module”.
Am I missing some additional configuration at some place?

This is my package.json imports:

“devDependencies”: {
"@types/angular": “^1.5.8”,
"@types/grafana": “git+https://git@github.com/CorpGlory/types-grafana.git”,
"@types/jquery": “^3.2.17”,
"@types/lodash": “^4.14.91”,
“babel-core”: “^6.26.0”,
“babel-loader”: “^7.1.2”,
“babel-preset-env”: “^1.6.1”,
“copy-webpack-plugin”: “^4.3.0”,
“d3”: “^4.12.0”,
“loader-utils”: “^1.1.0”,
“ts-loader”: “^2.3.7”,
“typescript”: “^2.6.2”,
“webpack”: “^3.10.0”
},
“dependencies”: {}

8

Does it build (if you ignore the PHPstorm warning)?

I haven’t tested CorpGlory’s types yet but it does not look like it adds grafana to the path. Maybe the typings need to be added to your tsconfig file?

9

Let’s start with some very basic questions…

  • My project is “isolated”, meaning I don’t have the full grafana src tree inside the project. Should I change this?
  • Do I need additional paths in tsconfig / webpack.config / package.json?

my tsconfig.json looks like:

{
“compilerOptions”: {
“strictNullChecks”: true,
“module”: “none”,
“target”: “es6”,
“rootDir”: “./src”
},
“include”: [
"./src/**/*.ts"
]
}

10

Yes, the plugin should be developed in the plugins directory of your local Grafana. This is where it will be located when it is running and it is by far the easiest way to test in Grafana.

Good question. I would like to know the answer to that too! The whole Typescript typings is new to me as well.

11

yes, this is how my setup is…

I’m just puzzled about the different behaviour of our server instance and my local instance.
is this some windows <> linux thing?

12

Should be the same on Windows. I think your server is acting like it should and is throwing an exception because the path is wrong.

The question is why you need that extra grafana in your path locally.

  • Something to do with PHPstorm maybe? Is it just the typings that are wrong or does it not build if you change the path to 'app/core/time_series2'?
  • Where exactly is your plugin code locally? Maybe it is in the wrong directory?
13

if I change the reference it is not building neither on command line nor in phpstorm. (using npm build)

it is in the default directory (data/plugins) , but I have the project setup directly in data/plugins/my-plugin-panel.

this is really confusing…

14

Is your code open source? I could give it a quick test if you have it on GitHub.

The path looks correct. What does the internal structure of your code look like?

15

Hi, I also got the same error.
How did you solve it eventually?

16

Hey Daniel, did you figure this issure out? I was thinking about may be because the typing for grafana doesn’t match the new version of grafana. Does this make sense?