Skip to content

[BREAKINGCHANGE] Add support for React 19+ #889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Gladorme merged 8 commits into from
Oct 28, 2026
Merged

[BREAKINGCHANGE] Add support for React 19+ #889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
56a3012
[ENHANCEMENT] Add support for React 19+
Gladorme Oct 22, 2026
208b38f
Remove use-resize-observer v9
Gladorme Oct 22, 2026
19f5d2d
Merge upstream/main into agents/react-compiler-support-18-19
Gladorme Oct 28, 2026
be54621
Upgrade perses shared libs to v0.56.0-beta.0
Gladorme Oct 28, 2026
55e43be
Apply Nexucis review comments
Gladorme Oct 28, 2026
36e94b3
Use React 18 as default in plugin READMEs
Gladorme Oct 28, 2026
e548ae0
Require React 18.3+ in Module Federation shared config
Gladorme Oct 28, 2026
9c491e7
Update versions in README snapshot example
Gladorme Oct 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions .github/workflows/react.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,21 @@ jobs:
enable_npm: true
- run: npm ci
- run: npm run type-check

# Plugins are developed against React 18 (the minimum supported version); also validate them against React 19.
react-19:
name: 'type-check & test (React 19)'
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v7
- uses: perses/github-actions@v0.13.0
- uses: ./.github/perses-ci/actions/setup_environment
with:
enable_npm: true
- run: npm ci
- run: npm install --no-save react@^19 react-dom@^19 @types/react@^19 @types/react-dom@^19
Comment thread
Gladorme marked this conversation as resolved.
Resolved
# Fail fast if peer resolution silently kept React 18.
- run: node -e "const v=require('react/package.json').version; if(!v.startsWith('19.')) { console.error('Expected React 19, got', v); process.exit(1) }"
- run: npm run type-check
- run: npm run test
18 changes: 11 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,27 @@ This will allow you to use the updates from perses core in your plugin so you ca
# perses/plugins/timeserieschart/package.json

"dependencies": {
"color-hash": "^2.0.2"
"color-hash": "^2.0.2",
"d3-scale-chromatic": "^3.1.0",
"react-compiler-runtime": "^1.0.0",
+ "@perses-dev/components": "v0.0.0-snapshot-panel-actions-520389b",
+ "@perses-dev/plugin-system": "v0.0.0-snapshot-panel-actions-520389b"
},
"peerDependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@hookform/resolvers": "^3.2.0",
- "@perses-dev/components": "^0.51.0-rc.1",
- "@perses-dev/plugin-system": "^0.51.0-rc.1",
"@hookform/resolvers": "^5.9.1",
- "@perses-dev/components": "^0.56.0-beta.0",
"@perses-dev/dashboards": "^0.56.0-beta.0",
- "@perses-dev/plugin-system": "^0.56.0-beta.0",
"@perses-dev/spec": "^0.3.0",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"echarts": "5.5.0",
"lodash": "^4.17.21",
"react": "^17.0.2 || ^18.0.0",
"react-dom": "^17.0.2 || ^18.0.0",
"use-resize-observer": "^9.0.0",
"react": "^18.3.0 || ^19.0.0",
"react-dom": "^18.3.0 || ^19.0.0",
"use-resize-observer": "^10.0.0",
"immer": "^10.1.1"
}
```
Expand Down
4 changes: 2 additions & 2 deletions alertmanager/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

### How to install

This plugin requires react and react-dom 18
This plugin requires react and react-dom 18 or 19.

Install peer dependencies:

```bash
npm install react@18 react-dom@18
npm install react@18 react-dom@18 # or react@19 react-dom@19
```

Install the plugin:
Expand Down
12 changes: 6 additions & 6 deletions alertmanager/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,16 @@
"peerDependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@perses-dev/components": "^0.55.0",
"@perses-dev/components": "^0.56.0-beta.0",
"@perses-dev/spec": "^0.3.0",
"@perses-dev/dashboards": "^0.55.0",
"@perses-dev/explore": "^0.55.0",
"@perses-dev/plugin-system": "^0.55.0",
"@perses-dev/dashboards": "^0.56.0-beta.0",
"@perses-dev/explore": "^0.56.0-beta.0",
"@perses-dev/plugin-system": "^0.56.0-beta.0",
"@tanstack/react-query": "^4.39.1",
"date-fns": "^4.1.0",
"lodash": "^4.17.21",
"react": "^18.3.0",
"react-dom": "^18.3.0"
"react": "^18.3.0 || ^19.0.0",
"react-dom": "^18.3.0 || ^19.0.0"
},
"files": [
"lib/**/*",
Expand Down
5 changes: 3 additions & 2 deletions alertmanager/rsbuild.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@ export default createConfigForPlugin({
'./AlertManagerSilencesExplorer': './src/explore/AlertManagerSilencesExplorer.tsx',
},
shared: {
react: { requiredVersion: '18.2.0', singleton: true },
'react-dom': { requiredVersion: '18.2.0', singleton: true },
react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'date-fns': { singleton: true },
lodash: { singleton: true },
'@perses-dev/components': { singleton: true },
Expand Down
4 changes: 2 additions & 2 deletions barchart/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

### How to install

This plugin requires react and react-dom 18
This plugin requires react and react-dom 18 or 19.

Install peer dependencies:

```bash
npm install react@18 react-dom@18
npm install react@18 react-dom@18 # or react@19 react-dom@19
```

Install the plugin:
Expand Down
10 changes: 5 additions & 5 deletions barchart/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,16 @@
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@hookform/resolvers": "^5.9.1",
"@perses-dev/components": "^0.55.0",
"@perses-dev/plugin-system": "^0.55.0",
"@perses-dev/components": "^0.56.0-beta.0",
"@perses-dev/plugin-system": "^0.56.0-beta.0",
"@perses-dev/spec": "^0.3.0",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"echarts": "5.5.0",
"lodash": "^4.17.21",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"use-resize-observer": "^9.0.0",
"react": "^18.3.0 || ^19.0.0",
"react-dom": "^18.3.0 || ^19.0.0",
"use-resize-observer": "^10.0.0",
"immer": "^10.1.1"
},
"files": [
Expand Down
7 changes: 4 additions & 3 deletions barchart/rsbuild.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ export default createConfigForPlugin({
'./BarChart': './src/BarChart.ts',
},
shared: {
react: { requiredVersion: '^18.2.0', singleton: true },
'react-dom': { requiredVersion: '^18.2.0', singleton: true },
react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
echarts: { singleton: true },
'date-fns': { singleton: true },
'date-fns-tz': { singleton: true },
Expand All @@ -34,7 +35,7 @@ export default createConfigForPlugin({
'@emotion/react': { requiredVersion: '^11.11.3', singleton: true },
'@emotion/styled': { singleton: true },
'@hookform/resolvers': { singleton: true },
'use-resize-observer': { requiredVersion: '^9.1.0', singleton: true },
'use-resize-observer': { requiredVersion: '^10.0.0', singleton: true },
'mdi-material-ui': { requiredVersion: '^7.4.0', singleton: true },
immer: { singleton: true },
},
Expand Down
4 changes: 2 additions & 2 deletions canvas/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

### How to install

This plugin requires react and react-dom 18
This plugin requires react and react-dom 18 or 19.

Install peer dependencies:

```bash
npm install react@18 react-dom@18
npm install react@18 react-dom@18 # or react@19 react-dom@19
```

Install the plugin:
Expand Down
8 changes: 4 additions & 4 deletions canvas/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/material": "^5.0.0 || ^6.0.0",
"@perses-dev/components": "^0.55.0",
"@perses-dev/plugin-system": "^0.55.0",
"@perses-dev/components": "^0.56.0-beta.0",
"@perses-dev/plugin-system": "^0.56.0-beta.0",
"@perses-dev/spec": "^0.3.0",
"immer": "^10.1.1",
"mdi-material-ui": "^7.9.2",
"react": "^18.3.0",
"react-dom": "^18.3.0"
"react": "^18.3.0 || ^19.0.0",
"react-dom": "^18.3.0 || ^19.0.0"
},
"files": [
"lib/**/*",
Expand Down
5 changes: 3 additions & 2 deletions canvas/rsbuild.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ export default createConfigForPlugin({
'./Canvas': './src/Canvas.tsx',
},
shared: {
react: { requiredVersion: '^18.2.0', singleton: true },
'react-dom': { requiredVersion: '^18.2.0', singleton: true },
react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'@perses-dev/components': { singleton: true },
'@perses-dev/plugin-system': { singleton: true },
'@emotion/react': { requiredVersion: '^11.11.3', singleton: true },
Expand Down
4 changes: 2 additions & 2 deletions clickhouse/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

### How to install

This plugin requires react and react-dom 18
This plugin requires react and react-dom 18 or 19.

Install peer dependencies:

```bash
npm install react@18 react-dom@18
npm install react@18 react-dom@18 # or react@19 react-dom@19
```

Install the plugin:
Expand Down
16 changes: 8 additions & 8 deletions clickhouse/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,22 +31,22 @@
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@hookform/resolvers": "^5.9.1",
"@perses-dev/components": "^0.55.0",
"@perses-dev/dashboards": "^0.55.0",
"@perses-dev/components": "^0.56.0-beta.0",
"@perses-dev/dashboards": "^0.56.0-beta.0",
"@perses-dev/spec": "^0.3.0",
"@perses-dev/explore": "^0.55.0",
"@perses-dev/plugin-system": "^0.55.0",
"@perses-dev/client": "^0.55.0",
"@perses-dev/explore": "^0.56.0-beta.0",
"@perses-dev/plugin-system": "^0.56.0-beta.0",
"@perses-dev/client": "^0.56.0-beta.0",
"@tanstack/react-query": "^4.39.1",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"echarts": "5.5.0",
"immer": "^10.1.1",
"lodash": "^4.17.21",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"react": "^18.3.0 || ^19.0.0",
"react-dom": "^18.3.0 || ^19.0.0",
"react-hook-form": "^7.87.0",
"use-resize-observer": "^9.0.0"
"use-resize-observer": "^10.0.0"
},
"files": [
"lib/**/*",
Expand Down
5 changes: 3 additions & 2 deletions clickhouse/rsbuild.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@ export default createConfigForPlugin({
'./ClickHouseLogQuery': './src/queries/click-house-log-query',
},
shared: {
react: { requiredVersion: '18.2.0', singleton: true },
'react-dom': { requiredVersion: '18.2.0', singleton: true },
react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
echarts: { singleton: true },
'date-fns': { singleton: true },
'date-fns-tz': { singleton: true },
Expand Down
10 changes: 5 additions & 5 deletions datasourcevariable/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@hookform/resolvers": "^5.9.1",
"@perses-dev/components": "^0.55.0",
"@perses-dev/plugin-system": "^0.55.0",
"@perses-dev/components": "^0.56.0-beta.0",
"@perses-dev/plugin-system": "^0.56.0-beta.0",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"echarts": "5.5.0",
"lodash": "^4.17.21",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"use-resize-observer": "^9.0.0"
"react": "^18.3.0 || ^19.0.0",
"react-dom": "^18.3.0 || ^19.0.0",
"use-resize-observer": "^10.0.0"
},
"files": [
"lib/**/*",
Expand Down
5 changes: 3 additions & 2 deletions datasourcevariable/rsbuild.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ export default createConfigForPlugin({
'./DatasourceVariable': './src/DatasourceVariable.tsx',
},
shared: {
react: { requiredVersion: '18.2.0', singleton: true },
'react-dom': { requiredVersion: '18.2.0', singleton: true },
react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
echarts: { singleton: true },
'date-fns': { singleton: true },
'date-fns-tz': { singleton: true },
Expand Down
12 changes: 6 additions & 6 deletions flamechart/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,17 @@
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@hookform/resolvers": "^5.9.1",
"@perses-dev/components": "^0.55.0",
"@perses-dev/plugin-system": "^0.55.0",
"@perses-dev/components": "^0.56.0-beta.0",
"@perses-dev/plugin-system": "^0.56.0-beta.0",
"@perses-dev/spec": "^0.3.0",
"@tanstack/react-table": "^8.20.5",
"@tanstack/react-table": "^9.2.8",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"echarts": "5.5.0",
"lodash": "^4.17.21",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"use-resize-observer": "^9.0.0",
"react": "^18.3.0 || ^19.0.0",
"react-dom": "^18.3.0 || ^19.0.0",
"use-resize-observer": "^10.0.0",
"immer": "^10.1.1"
},
"files": [
Expand Down
5 changes: 3 additions & 2 deletions flamechart/rsbuild.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ export default createConfigForPlugin({
'./FlameChart': './src/FlameChart.ts',
},
shared: {
react: { requiredVersion: '18.2.0', singleton: true },
'react-dom': { requiredVersion: '18.2.0', singleton: true },
react: { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react/jsx-runtime': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
'react-dom': { requiredVersion: '^18.3.0 || ^19.0.0', singleton: true },
echarts: { singleton: true },
'date-fns': { singleton: true },
'date-fns-tz': { singleton: true },
Expand Down
2 changes: 1 addition & 1 deletion flamechart/src/components/SeriesChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function SeriesChart(props: SeriesChartProps): ReactElement {
const chartsTheme = useChartsTheme();
const theme = useTheme();
const { setTimeRange } = useTimeRange();
const chartRef = useRef<EChartsInstance>();
const chartRef = useRef<EChartsInstance | undefined>(undefined);

const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {
return {
Expand Down
6 changes: 3 additions & 3 deletions flamechart/src/components/TableChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ export function TableChart(props: TableChartProps): ReactElement {
return tableRecursionJson(data.profile.stackTrace, searchValue);
}, [data, searchValue]);

const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {
const columns: Array<TableColumnConfig<TableChartSample>> = useMemo(() => {
const unit = data.metadata?.units || '';

const columnSettings: Array<TableColumnConfig<unknown>> = [
const columnSettings: Array<TableColumnConfig<TableChartSample>> = [
{
accessorKey: 'name',
header: 'Name',
Expand All @@ -69,7 +69,7 @@ export function TableChart(props: TableChartProps): ReactElement {
underline="hover"
onClick={(e) => {
e.preventDefault();
const currentSample = ctx.row.original as TableChartSample;
const currentSample = ctx.row.original;
onSelectedIdChange(currentSample.id); // focus on this item in the flame graph
onSearchValueChange(currentSample.name);
}}
Expand Down
4 changes: 2 additions & 2 deletions gaugechart/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

### How to install

This plugin requires react and react-dom 18
This plugin requires react and react-dom 18 or 19.

Install peer dependencies:

```bash
npm install react@18 react-dom@18
npm install react@18 react-dom@18 # or react@19 react-dom@19
```

Install the plugin:
Expand Down
Loading
Loading