Webpack.config.js libraryTarget has to be set?

Grafana Plugin Development
1

I’m developing a panel plugin and using webpack to build. I’m curious if the librayTarget has to be set as amd, or it may not be required to set.
I’m trying to use a third party libray, once the libraryTarget is set I will get error:

Uncaught ReferenceError: define is not defined

In this package the core modules of nodejs such as fs, path and crypto are used.

2

Do you have a repo that I can look at?

We’re switching our plugins to use @grafana/toolkit to make this easier to do. With external (extra) libraries though we’ll be adding a path that gets copied vs “webpacked.” Tree shaking seems to be having side effects on some libraries.

3

Sorry, I don’t have a repo. After I updated webpack from 3.0+ to 4.0 the problems are gone.
And the third party library is a commonjs module but I still can import it by ‘import * from ‘package name’…’

4

Hello bkgann,

If I understand correctly you use external libraries in your plugin? How did you do for transpilation? did you change the webpack config? If so, do you have an example?

5

I’ve had success adding libraries/dependencies to src/lib and importing them.

in src/lib:

rw-r--r--@ 1 bgann  admin  11468 Nov 18  2018 src/lib/viz211.js

and in my typescript module:

// @ts-ignore
import viz from '../lib/viz211.js';
// @ts-ignore
import * as d3 from '../lib/d3.v5.min';

As long as the library is referenced it gets included in the generated module.js file.

I’m still thinking we should have a way to copy a “lib” or “external” directory of files to dist as-is.