Skip to content

support react 19 #3646

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

Draft
T4rk1n wants to merge 6 commits into
base: dev
Choose a base branch
from
Draft

support react 19 #3646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d1f038c
support react 19
T4rk1n Mar 11, 2026
de0a519
fix lintstaged for python subdirectory files
T4rk1n Mar 11, 2026
c358a08
Merge branch 'dev' into react19
T4rk1n Apr 20, 2026
70ac64a
Add react19 testing matrix
T4rk1n Apr 20, 2026
6410a02
percy only for react 18
T4rk1n Apr 20, 2026
1ab7182
Add react 19 shim
T4rk1n Apr 20, 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
40 changes: 23 additions & 17 deletions .github/workflows/testing.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,19 +452,21 @@ jobs:
retention-days: 7

test-main:
name: Main Dash Tests (Python ${{ matrix.python-version }}, Group ${{ matrix.test-group }})
name: Main Dash Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }}, Group ${{ matrix.test-group }})
needs: build
runs-on: ubuntu-latest
timeout-minutes: 30
strategy:
fail-fast: false
matrix:
python-version: ["3.8", "3.12"]
react-version: ["18.3.1", "19.2.0"]
test-group: ["1", "2", "3"]

env:
PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
REACT_VERSION: ${{ matrix.react-version }}
PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
PERCY_PARALLEL_TOTAL: -1

steps:
Expand Down Expand Up @@ -516,7 +518,7 @@ jobs:

- name: Run main integration tests
run: |
if [ "${{ matrix.python-version }}" == "3.12" ]; then
if [ "${{ matrix.python-version }}" == "3.12" ] && [ "${{ matrix.react-version }}" == "18.3.1" ]; then
npx percy exec -- pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml tests/integration --splits 3 --group ${{ matrix.test-group }}
else
pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml tests/integration --splits 3 --group ${{ matrix.test-group }}
Expand All @@ -526,21 +528,21 @@ jobs:
if: always()
uses: actions/upload-artifact@v4
with:
name: test-main-results-py${{ matrix.python-version }}-group${{ matrix.test-group }}
name: test-main-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
path: test-reports/
retention-days: 7

- name: Upload dash artifacts
if: always()
uses: actions/upload-artifact@v4
with:
name: test-main-dash-artifacts-py${{ matrix.python-version }}-group${{ matrix.test-group }}
name: test-main-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
path: /tmp/dash_artifacts
retention-days: 7
if-no-files-found: ignore

html-test:
name: HTML Components Tests (Python ${{ matrix.python-version }})
name: HTML Components Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }})
needs: [build, changes_filter]
if: |
(github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev')) ||
Expand All @@ -551,10 +553,12 @@ jobs:
fail-fast: false
matrix:
python-version: ["3.8", "3.12"]
react-version: ["18.3.1", "19.2.0"]

env:
PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
REACT_VERSION: ${{ matrix.react-version }}
PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
PERCY_PARALLEL_TOTAL: -1

steps:
Expand Down Expand Up @@ -605,7 +609,7 @@ jobs:
working-directory: components/dash-html-components
run: |
npm ci
if [ "${{ matrix.python-version }}" == "3.12" ]; then
if [ "${{ matrix.python-version }}" == "3.12" ] && [ "${{ matrix.react-version }}" == "18.3.1" ]; then
npx percy exec -- pytest --headless --nopercyfinalize --junitxml=test-reports/junit_html.xml
else
pytest --headless --nopercyfinalize --junitxml=test-reports/junit_html.xml
Expand All @@ -615,15 +619,15 @@ jobs:
if: always()
uses: actions/upload-artifact@v4
with:
name: html-test-results-py${{ matrix.python-version }}
name: html-test-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}
path: components/dash-html-components/test-reports/
retention-days: 7

- name: Upload dash artifacts
if: always()
uses: actions/upload-artifact@v4
with:
name: html-test-dash-artifacts-py${{ matrix.python-version }}
name: html-test-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}
path: /tmp/dash_artifacts
retention-days: 7
if-no-files-found: ignore
Expand Down Expand Up @@ -718,7 +722,7 @@ jobs:
npm run lint

dcc-test:
name: DCC Integration Tests (Python ${{ matrix.python-version }}, Group ${{ matrix.test-group }})
name: DCC Integration Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }}, Group ${{ matrix.test-group }})
needs: [build, changes_filter]
if: |
(github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev')) ||
Expand All @@ -729,11 +733,13 @@ jobs:
fail-fast: false
matrix:
python-version: ["3.8", "3.12"]
react-version: ["18.3.1", "19.2.0"]
test-group: ["1", "2", "3"]

env:
PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
REACT_VERSION: ${{ matrix.react-version }}
PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
PERCY_PARALLEL_TOTAL: -1

steps:
Expand Down Expand Up @@ -792,15 +798,15 @@ jobs:
if: always()
uses: actions/upload-artifact@v4
with:
name: dcc-test-results-py${{ matrix.python-version }}-group${{ matrix.test-group }}
name: dcc-test-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
path: components/dash-core-components/test-reports/
retention-days: 7

- name: Upload dash artifacts
if: always()
uses: actions/upload-artifact@v4
with:
name: dcc-dash-artifacts-py${{ matrix.python-version }}-group${{ matrix.test-group }}
name: dcc-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
path: /tmp/dash_artifacts
retention-days: 7
if-no-files-found: ignore
Expand Down
2 changes: 1 addition & 1 deletion .lintstagedrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const sh_cd = (directory, command) => {

module.exports = {
// Python checks (run from root, using root venv)
"dash/*.py": (filenames) => [
"dash/**/*.py": (filenames) => [
`${venvBin("python")} -m pylint --rcfile=.pylintrc ${filenames.join(
" "
)}`,
Expand Down
8 changes: 3 additions & 5 deletions components/dash-core-components/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ module.exports = (env, argv) => {
const externals = ('externals' in overrides) ? overrides.externals : ({
react: 'React',
'react-dom': 'ReactDOM',
'react/jsx-runtime': 'ReactJSXRuntime',
'react/jsx-dev-runtime': 'ReactJSXRuntime',
'prop-types': 'PropTypes'
});

Expand All @@ -56,11 +58,7 @@ module.exports = (env, argv) => {
},
externals,
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
alias: {
'react/jsx-runtime': require.resolve('react/jsx-runtime'),
'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
}
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},
module: {
noParse: /node_modules[\\\/]plotly.js-dist-min/,
Expand Down
2 changes: 2 additions & 0 deletions components/dash-html-components/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ module.exports = (env, argv) => {
const externals = ('externals' in overrides) ? overrides.externals : ({
react: 'React',
'react-dom': 'ReactDOM',
'react/jsx-runtime': 'ReactJSXRuntime',
'react/jsx-dev-runtime': 'ReactJSXRuntime',
'prop-types': 'PropTypes'
});

Expand Down
2 changes: 2 additions & 0 deletions components/dash-table/.config/webpack/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ module.exports = (options = {}) => {
externals: {
react: 'React',
'react-dom': 'ReactDOM',
'react/jsx-runtime': 'ReactJSXRuntime',
'react/jsx-dev-runtime': 'ReactJSXRuntime',
},
module: {
rules: [
Expand Down
44 changes: 38 additions & 6 deletions dash/_dash_renderer.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@

__version__ = "3.0.0"

_available_react_versions = {"18.3.1", "18.2.0", "16.14.0"}
_available_reactdom_versions = {"18.3.1", "18.2.0", "16.14.0"}
_available_react_versions = {"18.3.1", "18.2.0", "19.2.0"}
_available_reactdom_versions = {"18.3.1", "18.2.0", "19.2.0"}
_js_dist_dependencies: List[Dict[str, Any]] = [] # to be set by _set_react_version


Expand All @@ -19,19 +19,51 @@ def _set_react_version(v_react, v_reactdom=None):
assert v_react in _available_react_versions, react_err
assert v_reactdom in _available_reactdom_versions, reactdom_err

# React 19+ removed UMD builds, use umd-react package instead
is_react19 = v_react.startswith("19.")
is_reactdom19 = v_reactdom.startswith("19.")

if is_react19:
react_prod_url = (
f"https://unpkg.com/umd-react@{v_react}/dist/react.production.min.js"
)
react_dev_url = (
f"https://unpkg.com/umd-react@{v_react}/dist/react.development.js"
)
else:
react_prod_url = (
f"https://unpkg.com/react@{v_react}/umd/react.production.min.js"
)
react_dev_url = f"https://unpkg.com/react@{v_react}/umd/react.development.js"

if is_reactdom19:
reactdom_prod_url = (
f"https://unpkg.com/umd-react@{v_reactdom}/dist/react-dom.production.min.js"
)
reactdom_dev_url = (
f"https://unpkg.com/umd-react@{v_reactdom}/dist/react-dom.development.js"
)
else:
reactdom_prod_url = (
f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js"
)
reactdom_dev_url = (
f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js"
)

_js_dist_dependencies[:] = [
{
"external_url": {
"prod": [
"https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
f"https://unpkg.com/react@{v_react}/umd/react.production.min.js",
f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js",
react_prod_url,
reactdom_prod_url,
"https://unpkg.com/prop-types@15.8.1/prop-types.min.js",
],
"dev": [
"https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
f"https://unpkg.com/react@{v_react}/umd/react.development.js",
f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js",
react_dev_url,
reactdom_dev_url,
"https://unpkg.com/prop-types@15.8.1/prop-types.js",
],
},
Expand Down
40 changes: 36 additions & 4 deletions dash/dash-renderer/init.template
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,51 @@ def _set_react_version(v_react, v_reactdom=None):
assert v_react in _available_react_versions, react_err
assert v_reactdom in _available_reactdom_versions, reactdom_err

# React 19+ removed UMD builds, use umd-react package instead
is_react19 = v_react.startswith("19.")
is_reactdom19 = v_reactdom.startswith("19.")

if is_react19:
react_prod_url = (
f"https://unpkg.com/umd-react@{v_react}/dist/react.production.min.js"
)
react_dev_url = (
f"https://unpkg.com/umd-react@{v_react}/dist/react.development.js"
)
else:
react_prod_url = (
f"https://unpkg.com/react@{v_react}/umd/react.production.min.js"
)
react_dev_url = f"https://unpkg.com/react@{v_react}/umd/react.development.js"

if is_reactdom19:
reactdom_prod_url = (
f"https://unpkg.com/umd-react@{v_reactdom}/dist/react-dom.production.min.js"
)
reactdom_dev_url = (
f"https://unpkg.com/umd-react@{v_reactdom}/dist/react-dom.development.js"
)
else:
reactdom_prod_url = (
f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js"
)
reactdom_dev_url = (
f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js"
)

_js_dist_dependencies[:] = [
{
"external_url": {
"prod": [
"https://unpkg.com/@babel/polyfill@$polyfill/dist/polyfill.min.js",
f"https://unpkg.com/react@{v_react}/umd/react.production.min.js",
f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js",
react_prod_url,
reactdom_prod_url,
"https://unpkg.com/prop-types@$proptypes/prop-types.min.js",
],
"dev": [
"https://unpkg.com/@babel/polyfill@$polyfill/dist/polyfill.min.js",
f"https://unpkg.com/react@{v_react}/umd/react.development.js",
f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js",
react_dev_url,
reactdom_dev_url,
"https://unpkg.com/prop-types@$proptypes/prop-types.js",
],
},
Expand Down
1 change: 1 addition & 0 deletions dash/dash-renderer/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import './react19-shim'; // Must be first - React 19 compatibility
import {DashRenderer} from './DashRenderer';
import './utils/clientsideFunctions';

Expand Down
Loading
Loading