Frontend: Outdated React and Eslint

[Caseiber]

What happened?

I cannot update React and eslint to keep my frontend datasource up to date because the grafana npm packages require older versions. I am getting this error when attempting to update react (I removed my specific pull request info and links):

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @grafana/data@[11].5.2
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0" from the root project
npm error   peer react@">=16.8.0" from @emotion/react@11.[14].0
npm error   node_modules/@emotion/react
npm error     @emotion/react@"11.14.0" from @grafana/[email protected]
npm error     node_modules/@grafana/runtime/node_modules/@grafana/ui
npm error       @grafana/ui@"11.5.1" from @grafana/[email protected]
npm error       node_modules/@grafana/runtime
npm error         @grafana/runtime@"^11.5.1" from the root project
npm error     @emotion/react@"11.14.0" from @grafana/[email protected]
npm error     node_modules/@grafana/ui
npm error       @grafana/ui@"^11.5.1" from the root project
npm error     1 more (react-select)
npm error   58 more (@emotion/use-insertion-effect-with-fallbacks, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@"^[18]" from @grafana/[email protected]
npm error node_modules/@grafana/data
npm error   @grafana/data@"^11.5.2" from the root project
npm error   @grafana/data@"11.5.2" from @grafana/[email protected]
npm error   node_modules/@grafana/ui
npm error     @grafana/ui@"^11.5.1" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/react
npm error   peer react@"^18.0.0" from @grafana/[email protected]
npm error   node_modules/@grafana/data
npm error     @grafana/data@"^11.5.2" from the root project
npm error     @grafana/data@"11.5.2" from @grafana/[email protected]
npm error     node_modules/@grafana/ui
npm error       @grafana/ui@"^11.5.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

and the following when trying to update eslint

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @typescript-eslint/[email protected]
npm error Found: [email protected]
npm error node_modules/eslint
npm error   dev eslint@"^9.21.0" from the root project
npm error   peer eslint@"^6.0.0 || ^7.0.0 || >=8.0.0" from @eslint-community/[email protected]
npm error   node_modules/@eslint-community/eslint-utils
npm error     @eslint-community/eslint-utils@"^4.4.0" from @typescript-eslint/[email protected]
npm error     node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils
npm error       @typescript-eslint/utils@"6.21.0" from @typescript-eslint/[email protected]
npm error       node_modules/@typescript-eslint/eslint-plugin
npm error         dev @typescript-eslint/eslint-plugin@"^6.18.0" from the root project
npm error         1 more (@grafana/eslint-config)
npm error       1 more (@typescript-eslint/type-utils)
npm error     @eslint-community/eslint-utils@"^4.4.0" from @typescript-eslint/[email protected]
npm error     node_modules/@typescript-eslint/utils
npm error       @typescript-eslint/utils@"^8.13.0" from @stylistic/[email protected]
npm error       node_modules/@stylistic/eslint-plugin-ts
npm error         dev @stylistic/eslint-plugin-ts@"^3.1.0" from the root project
npm error         1 more (@grafana/eslint-config)
npm error     2 more (eslint, @typescript-eslint/utils)
npm error   8 more (@grafana/eslint-config, @stylistic/eslint-plugin-ts, ...)
npm error
npm error Could not resolve dependency:
npm error peer eslint@"^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
npm error node_modules/@typescript-eslint/eslint-plugin
npm error   dev @typescript-eslint/eslint-plugin@"^6.18.0" from the root project
npm error   peer @typescript-eslint/eslint-plugin@">=6.18.0" from @grafana/[email protected]
npm error   node_modules/@grafana/eslint-config
npm error     dev @grafana/eslint-config@"^8.0.0" from the root project
npm error
npm error Conflicting peer dependency: eslint@8.[5]7.1
npm error node_modules/eslint
npm error   peer eslint@"^7.0.0 || ^8.0.0" from @typescript-eslint/eslint-plugin@[6].21.0
npm error   node_modules/@typescript-eslint/eslint-plugin
npm error     dev @typescript-eslint/eslint-plugin@"^6.1[8].0" from the root project
npm error     peer @typescript-eslint/eslint-plugin@">=6.18.0" from @grafana/[email protected]
npm error     node_modules/@grafana/eslint-config
npm error       dev @grafana/eslint-config@"^8.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

What did you expect to happen?

I expect to be able to update react and eslint, but cannot do to an issue with legacy peer dependencies

Did this work before?

I have normally been able to update packages

How do we reproduce it?

1. Create a grafana backend datasource
2. Attempt to update the npm packages eslint to version 9.21.0 and react to version 19.0.0

Is the bug inside a dashboard panel?

No

Environment (with versions)?

Grafana:
OS: Mac
Browser: Chrome
NPM: 10.8.3
@grafana/eslint-config: "^8.0.0",
@grafana/plugin-e2e: "^1.18.2",
@grafana/tsconfig: "^2.0.0"

Grafana platform?

Kubernetes

Datasource(s)?

Custom backend datasource development

[prydin]

I am seeing the same issue. Any updates?

[jackw]

I cannot update React and eslint to keep my frontend datasource up to date because the grafana npm packages require older versions.

Hello, I'm afraid it's not currently possible to update to React 19 in your frontend datasource. Your plugin doesn't own the version of React it uses - the Grafana application shares its version of React with your plugin in the browser at runtime. As such if you did manage to update it in your plugin you would end up with a development environment that didn't match the runtime dependencies and would likely experience issues. For plugins to use React 19 it will also require Grafana core to be updated to React 19 which isn't a straight forward task but something we are trying to figure out.

Regarding Eslint 9, it is possible to update it but it's a manual process that requires bumping all the eslint dependencies and then rewriting the eslint config as a flat config. We are in the process of solving this as v8 is deprecated and we'd like to get plugin developers off it. Hopefully we'll get to the remaining work to make it simple to update Eslint soon.