I am using Grafana 6.6.2 and trying to make a simple dashboard displaying BarGauge through my tsx code
My code have no errors when I type simple h1 tag it displays on my panel, but when i use < Bargauge/ > it says z is undefined.
if its
If I hover over the red sign it gives me a tool tip saying ‘z is undefined’
welcome to forum @gangurdenishant07
other than building on top of a very outdated grafana version, what does your BarGauge component code look like? Is that your own custom component?
The component I am using is not custom I am importing it from @grafana/data
And yes its really outdated sir, but my company is targeting that very specific version
what packages are you targeting in your package.json file?
can you share the devDependences and dependencies section (or the whole file with anything private removed)?
Sure sir
{
“name”: “test102”,
“version”: “1.0.0”,
“description”: “Tester”,
“scripts”: {
“build”: “webpack -c ./.config/webpack/webpack.config.ts --env production”,
“dev”: “webpack -w -c ./.config/webpack/webpack.config.ts --env development”,
“test”: “jest --watch --onlyChanged”,
“test:ci”: “jest --passWithNoTests --maxWorkers 4”,
“typecheck”: “tsc --noEmit”,
“lint”: “eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .”,
“lint:fix”: “npm run lint – --fix”,
“e2e”: “npm exec cypress install && npm exec grafana-e2e run”,
“e2e:update”: “npm exec cypress install && npm exec grafana-e2e run --update-screenshots”,
“server”: “docker-compose up --build”,
“sign”: “npx --yes @grafana/sign-plugin@latest”
},
“author”: “Testorg”,
“license”: “Apache-2.0”,
“devDependencies”: {
“@ babel/core”: “^7.21.4”,
“@ grafana/e2e”: “10.3.3”,
“@ grafana/e2e-selectors”: “10.3.3”,
“@ grafana/eslint-config”: “^6.0.0”,
“@ grafana/tsconfig”: “^1.2.0-rc1”,
“@ swc/core”: “^1.3.90”,
“@ swc/helpers”: “^0.5.0”,
“@ swc/jest”: “^0.2.26”,
“@ testing-library/jest-dom”: “6.1.4”,
“@ testing-library/react”: “14.0.0”,
“@ types/jest”: “^29.5.0”,
“@ types/lodash”: “^4.14.194”,
“@ types/node”: “^20.8.7”,
“@ types/react-router-dom”: “^5.2.0”,
“@ types/testing-library__jest-dom”: “5.14.8”,
“copy-webpack-plugin”: “^11.0.0”,
“css-loader”: “^6.7.3”,
“eslint-plugin-deprecation”: “^2.0.0”,
“eslint-webpack-plugin”: “^4.0.1”,
“fork-ts-checker-webpack-plugin”: “^8.0.0”,
“glob”: “^10.2.7”,
“identity-obj-proxy”: “3.0.0”,
“jest”: “^29.5.0”,
“jest-environment-jsdom”: “^29.5.0”,
“prettier”: “^2.8.7”,
“replace-in-file-webpack-plugin”: “^1.0.6”,
“sass”: “1.63.2”,
“sass-loader”: “13.3.1”,
“style-loader”: “3.3.3”,
“swc-loader”: “^0.2.3”,
“ts-node”: “^10.9.1”,
“tsconfig-paths”: “^4.2.0”,
“typescript”: “4.8.4”,
“webpack”: “^5.90.3”,
“webpack-cli”: “^5.1.4”,
“webpack-livereload-plugin”: “^3.0.2”
},
“engines”: {
“node”: “>=20”
},
“dependencies”: {
“@ emotion/css”: “11.10.6”,
“@ grafana/data”: “10.3.3”,
“@ grafana/runtime”: “10.3.3”,
“@ grafana/schema”: “10.3.3”,
“@ grafana/ui”: “10.3.3”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“tslib”: “2.5.3”
},
“packageManager”: “npm@10.2.4”
}
That would do it - the package.json is targeting libraries only available at runtime for v10.
You can adjust the packages to see how low you need to go to make it work, I’ll try here also and post back results.
I’ve had some luck targeting v8, but getting a new react plugin bootstrapped for v6 might be difficult.
I am trying to create a panel in v6.6.2 that combines various plugins together, Thats the ultimate goal. A custom plugin which combines of various plugins.
What I would do as a first step is to inspect the v6.6.2 tag branch of grafana for its package.json and match up the versions there with your plugin’s package.json.
Then you would need to pull in the components to your source code that are not available from the runtime.
This scenario is tough to implement but it is doable.
