Grafana-UI and TypeScript errors in plugin

Hi! I started referencing grafana-ui in my plugin. The plugin works but for some reason TypeScript compiler keeps throwing errors about code that should not even be compiled. How do I tell TS compiler not to compile grafana-ui components ?

Thanks!
-T

PS. I had to replace all @ in config with * for this post to go through.

TSCONFIG

TSCONFIG
{
“compileOnSave”: false,
“compilerOptions”: {
“target”: “es5”,
“module”: “esnext”,
“rootDir”: “./src”,
“baseUrl”: “./src”,
“jsx”: “react”,
“lib”: [ “es6”, “dom” ],
“declaration”: false,
“allowSyntheticDefaultImports”: true,
“esModuleInterop”: true,
//“forceConsistentCasingInFileNames”: true,
“importHelpers”: true,
“noEmitHelpers”: true,
“inlineSourceMap”: false,
“sourceMap”: true,
“noEmitOnError”: false,
“emitDecoratorMetadata”: false,
“experimentalDecorators”: true,
“noImplicitReturns”: true,
“noImplicitThis”: false,
“noImplicitUseStrict”: false,
“noImplicitAny”: false,
“noUnusedLocals”: true,
“strictNullChecks”: false,
“moduleResolution”: “node”,
“typeRoots”: [ “node_modules/*types”, “src/types” ],
“skipLibCheck”: true,
“preserveSymlinks”: true,
“downlevelIteration”: true,
“pretty”: false
}
}

WEBPACK.CONFIG

WEBPACK.CONFIG
const path = require(‘path’);
const webpack = require(‘webpack’);
const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
module.exports = {
node: {
fs: ‘empty’,
},
context: path.join(__dirname, ‘src’),
entry: {
module: ‘./module.ts’,
},
devtool: ‘source-map’,
output: {
filename: ‘[name].js’,
path: path.join(__dirname, ‘dist’),
libraryTarget: ‘amd’,
},
externals: [
‘lodash’,
‘jquery’,
‘moment’,
‘slate’,
‘emotion’,
‘prismjs’,
‘slate-plain-serializer’,
‘slate-react’,
‘react’,
‘react-dom’,
‘react-redux’,
‘redux’,
‘rxjs’,
‘d3’,
‘angular’,
‘*grafana/ui’,
‘*grafana/runtime’,
‘*grafana/data’,
// *ts-ignore
function (context, request, callback) {
var prefix = ‘grafana/’;
if (request.indexOf(prefix) === 0) {
console.log(‘SKIP’, request);
return callback(null, request.substr(prefix.length));
}

	if (request.indexOf('./lib/') === 0) {
	console.log('SKIP', request);
	return callback(null, request);
	}
	// *ts-ignore
	callback();
},

],

plugins: [
new CleanWebpackPlugin(‘dist’, { allowExternal: true }),
new webpack.optimize.OccurrenceOrderPlugin(),
new CopyWebpackPlugin([
{ from: ‘plugin.json’, to: ‘.’ },
{ from: ‘…/README.md’, to: ‘.’ },
//{ from: ‘…/LICENSE’, to: ‘.’ },
{ from: ‘partials/’, to: ‘.’ },
{ from: 'img/
’, to: ‘.’ },
{ from: ‘css/’, to: ‘.’ },
{ from: 'lib/
’, to: ‘.’ },
]),
],
resolve: {
extensions: [’.ts’, ‘.tsx’, ‘.js’],
},
module: {
rules: [
{
test: /.tsx?/, loaders: [ { loader: 'babel-loader', options: { presets: [['*babel/preset-env', { modules: false }]], plugins: ['angularjs-annotate'], }, }, { loader: 'ts-loader', options: { onlyCompileBundledFiles: true }, }, ], exclude: /(node_modules)/, }, { test: /\.css/,
use: [
{
loader: ‘style-loader’,
},
{
loader: ‘css-loader’,
options: {
importLoaders: 1,
sourceMap: true,
},
},
],
},
],
},
};

try adding this to your tsconfig.json

"exclude": [
        "node_modules"
    ]

You can also try out the new @grafana/toolkit to help build everything, it’s coming along really well and is being used in many of our plugins now.

It was Visual Studio 2019! Very strange.

Initially, using exclude in tsconfig and switching to @grafana/toolkit did not help. Errors were also thrown by Grafana toolkit. With VS running and yarn installing packages at the same time triggered VS to do some fuzzy lookups and interfere with package install. Without VS running I was able to compile it without errors. At the end, your suggestion helped! Adding “Exclude: node_modules” in tsconfig prevents VS from interfering and everything compiles.

I tried to use @grafana/toolkit before but I could not figure out how to make it copy my “lib” folder to dist.

Thanks for your help Brian and congrats on 5 year anniversary! You guys are doing fantastic job! All the best.

I have the same issue -

  1. Iv’e added exclude node modules to the tscofig - didn’t help (the errors are coming from packagas/grafana-ui/).
  2. This is occurring also in terminal not only in vscode

Any Ideas how to solve this ?

Those errors look like side-effects of an out of date yarn.lock file (and resulting node_modules content). I’d remove yarn.lock and do a yarn install and it will pull down the required/updated packages.