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.