Build @grafana/ui package

Grafana Plugin Development
1

Greetings I forked the grafan source code. I made a copy of the @ grafana/ui package in the yarn nx monorepo of github I run yarn storybook, and dev builds with many warnings but when I go to build for product I get all these compliation errors. I am doing this for plugin development as I would like to recommend changes to the grafana core library however SystemJS prevents me so I made a copy and called it @ windmillcode/grafana-ui. yarn storybook works but I think due to the complicated nature of javascript the grafana source code yarn nx monorepo there is additional configuration needed to get my copy to build because I think internally the build system sees that @ windmillcode/grafana-ui is the package name but there is additional configuration I need to do in order for the build system to treate it and build completely seperate from @grafana/ui

2

Hi.

the @grafana/ui package is designed to be built together with all the other grafana packages and grafana core. It is unlikely you’ll be able to build it stand alone.

Try to run the yarn scripts that build all packages.

Adding new packages (like a copy of grafana/ui) has many more nuances and I don’t advice you to go that route because there are many dependencies to grafana/ui in both grafana core and many plugins that you won’t be able to handle.

3

Well I feel stuck I tried modifiying the original @grafana/ui and using the built package withing plugin development but I still got the systemJS limitation. what if I build the package as @grafana/ui then rename the package name as the dist will that work. in addition all I need to do is to silence the typescript warnings so I can get it to build heres is my tsconfig```{
“compilerOptions”: {
“jsx”: “react-jsx”,
“baseUrl”: “./”,
“declarationDir”: “./compiled”,
“emitDeclarationOnly”: true,
“isolatedModules”: true,
“allowJs”: true,
“rootDirs”: [
“.”
],
“checkJs”: false,
“strict”: false,
“noImplicitAny”: false,
“strictNullChecks”: false,
“strictFunctionTypes”: false,
“strictBindCallApply”: false,
“strictPropertyInitialization”: false,
“noImplicitThis”: false,
“alwaysStrict”: false,
“skipDefaultLibCheck”: true,
“skipLibCheck”: true, // Skip library checks
“noEmitOnError”: false, // Emit output even with errors
“esModuleInterop”: true,
“noUnusedLocals”: false,
“noImplicitReturns”: false,

// "skipLibCheck": true,
// "noImplicitAny": false,
// "strict": false,
// "strictNullChecks": false,
// "strictFunctionTypes": false,
// "strictBindCallApply": false,
// "strictPropertyInitialization": false,
// "noImplicitThis": false,
// "alwaysStrict": false,

// Ignore common errors
// "allowJs": true,
// "noEmitOnError": false,
// "noUnusedLocals": false,
"noUnusedParameters": false,
// "noImplicitReturns": false,
"noFallthroughCasesInSwitch": false,

// Force emit regardless of errors
"noEmit": false,  // Ensure files are emitted
// "isolatedModules": true,  // Bypass full type-checking

// Compatibility settings
// "esModuleInterop": true,
// "jsx": "preserve"  // Adjust based on your framework    
"paths": {
  "react": ["node_modules/@types/react"],
  "react-dom": ["node_modules/@types/react-dom"]
}

},
“exclude”: [
“dist//"
],
“extends”: “@grafana/tsconfig”,
“include”: [
“../../public/test/setupTests.ts”,
"../../public/app/types/.d.ts",
"src//.ts”
],
// override for storybook which uses ts-node to compile main.ts / preview.ts files.
“ts-node”: {
“compilerOptions”: {
“isolatedModules”: false,
“resolveJsonModule”: true,
“module”: “commonjs”
}
}
}``` I need tsconfig or the build tool to treat the package as javascript so it can build there are no JS errors