Hi!
I found the React topic in the migration guide that you should read the migration instructions in the widget showcase. However, the link does not work…
And I have the problem to solve the dependencies with react-redux etc.
How can this be solved?
Thanks in advance!
Hello,
thanks for the note.
migration instruction you can find at Widgets Showcase
We will fix the link in documentation!
Thanks,
Josef
Hi, the reason for this error comes from the fact that we did not update Redux when updating React from 18 to 19 (to minimize the overall migration effort).
The older react-redux package does not “expect” to be paired with the newer React version, causing the conflict here.
However, since we found that it still works, you can simply ignore this error/warning by using the tools of your package manager. For example, with npm:
Note that the second way will ignore all kinds of peer dependency issues, which is probably not what you want. We therefore recommend the first approach using overrides.
The solution with using overrides works fine! Thanks a lot!
I have the same issue, and overrides doesn’t solve it, maybe im doing it wrong?
this is our package.json
"dependencies": {
"@com.mgmtp.a12.antlrcodeeditor/antlrcodeeditor-build-tool": "~5.1.0",
"@com.mgmtp.a12.antlrcodeeditor/antlrcodeeditor-core": "~5.0.0",
"@com.mgmtp.a12.base/base-model-api": "~29.0.0",
"@com.mgmtp.a12.client/client-core": "~16.0.0",
"@com.mgmtp.a12.crud/crud-core": "~2.0.0",
"@com.mgmtp.a12.dataservices/dataservices-access": "38.0.0",
"@com.mgmtp.a12.expression/expression-core": "~2.0.1",
"@com.mgmtp.a12.formengine/formengine-core": "~38.0.0",
"@com.mgmtp.a12.kernel/kernel-core-runtime-api-ts": "~30.1.0",
"@com.mgmtp.a12.kernel/kernel-md-facade": "~30.1.0",
"@com.mgmtp.a12.overviewengine/overviewengine-core": "~38.0.0",
"@com.mgmtp.a12.uaa/uaa-authentication-client": "~9.0.2",
"@com.mgmtp.a12.utils/utils-collections": "~6.0.0",
"@com.mgmtp.a12.utils/utils-connector": "~8.0.1",
"@com.mgmtp.a12.utils/utils-localization": "~7.0.0",
"@com.mgmtp.a12.utils/utils-localization-react": "~7.0.0",
"@com.mgmtp.a12.utils/utils-logging": "~6.0.0",
"@com.mgmtp.a12.widgets/widgets-core": "~38.0.0",
"@com.mgmtp.a12.widgets/widgets-styles": "^38.0.0",
"@monaco-editor/react": "^4.6.0",
"acorn": "^8.12.1",
"antlr4": "^4.13.2",
"fuse.js": "^7.0.0",
"immer": "^10.1.1",
"lodash": "^4.17.21",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"monaco-editor": "^0.33.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-moment": "^1.1.3",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-saga": "^1.3.0",
"reselect": "^5.1.1",
"styled-components": "^6.1.18",
"typed-redux-saga": "^1.5.0",
"typescript-fsa": "^3.0.0"
},
"overrides": {
"react-redux": "^7.2.2"
},
"devDependencies": {
"@com.mgmtp.a12.devtools/devtools": "^7.0.3",
"@com.mgmtp.a12.devtools/eslint-config": "^0.7.0",
"@cyclonedx/cyclonedx-npm": "^1.19.3",
"@playwright/test": "1.52.0",
"@types/chai": "^4.3.17",
"@types/deep-equal": "^1.0.4",
"@types/inquirer": "^9.0.7",
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.17.7",
"@types/mocha": "^10.0.7",
"@types/node": "^20.12.12",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@types/react-redux": "^7.2.2",
"@types/sinon": "^17.0.3",
"@types/sinon-chai": "^3.2.12",
"@types/styled-components": "^6.1.18",
"@types/uuid": "^3.4.10",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/eslint-plugin-tslint": "^7.0.2",
"@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.20",
"chai": "^4.5.0",
"chokidar": "^3.6.0",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^12.0.2",
"core-js": "^3.38.0",
"cross-env": "^7.0.3",
"cross-spawn": "^7.0.3",
"css-loader": "^7.1.2",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-deprecation": "^3.0.0",
"eslint-plugin-import": "^2.30.0",
"eslint-plugin-playwright": "^1.6.2",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.36.1",
"eslint-plugin-react-hooks": "^4.6.2",
"fork-ts-checker-webpack-plugin": "^9.0.2",
"global-jsdom": "^24.0.0",
"html-webpack-plugin": "^5.6.0",
"ignore-styles": "^5.0.1",
"inquirer": "^10.1.8",
"jsdom": "^24.1.1",
"jsdom-global": "^3.0.2",
"mini-css-extract-plugin": "^2.9.1",
"mocha": "^10.7.3",
"postcss": "^8.4.41",
"postcss-loader": "^8.1.1",
"postcss-styled-syntax": "^0.6.4",
"prettier": "^3.3.3",
"redux-saga-test-plan": "^4.0.6",
"run-script-os": "^1.1.6",
"semver": "^7.6.3",
"sinon": "^18.0.0",
"sinon-chai": "^3.7.0",
"source-map-support": "^0.5.21",
"style-loader": "^4.0.0",
"stylelint": "^16.9.0",
"stylelint-config-recommended": "^14.0.1",
"stylus": "^0.63.0",
"stylus-loader": "^8.1.0",
"ts-loader": "^9.5.1",
"ts-node": "^10.9.2",
"tsconfig-paths": "^4.2.0",
"tslint": "^6.1.3",
"typescript": "^5.3.3",
"typescript-plugin-css-modules": "^5.1.0",
"uuid": "^10.0.0",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4",
"webpack-merge": "^6.0.1"
},
I deleted node_modules and package_lock.json then ran npm install
I solved the dependency issues:
"dependencies": {
"@com.mgmtp.a12.antlrcodeeditor/antlrcodeeditor-build-tool": "~5.1.0",
"@com.mgmtp.a12.antlrcodeeditor/antlrcodeeditor-core": "~5.0.0",
"@com.mgmtp.a12.base/base-model-api": "~29.0.0",
"@com.mgmtp.a12.client/client-core": "~16.0.0",
"@com.mgmtp.a12.crud/crud-core": "~2.0.0",
"@com.mgmtp.a12.dataservices/dataservices-access": "38.0.0",
"@com.mgmtp.a12.expression/expression-core": "~2.0.1",
"@com.mgmtp.a12.formengine/formengine-core": "~38.0.0",
"@com.mgmtp.a12.kernel/kernel-core-runtime-api-ts": "~30.1.0",
"@com.mgmtp.a12.kernel/kernel-md-facade": "~30.1.0",
"@com.mgmtp.a12.overviewengine/overviewengine-core": "~38.0.0",
"@com.mgmtp.a12.uaa/uaa-authentication-client": "~9.0.2",
"@com.mgmtp.a12.utils/utils-collections": "~6.0.0",
"@com.mgmtp.a12.utils/utils-connector": "~8.0.1",
"@com.mgmtp.a12.utils/utils-localization": "~7.0.0",
"@com.mgmtp.a12.utils/utils-localization-react": "~7.0.0",
"@com.mgmtp.a12.utils/utils-logging": "~6.0.0",
"@com.mgmtp.a12.widgets/widgets-core": "~38.0.0",
"@com.mgmtp.a12.widgets/widgets-styles": "^33.2.2",
"@monaco-editor/react": "^4.6.0",
"acorn": "^8.12.1",
"antlr4": "^4.13.2",
"fuse.js": "^7.0.0",
"immer": "^10.1.1",
"lodash": "^4.17.21",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"monaco-editor": "^0.33.0",
"react": "^19.0.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^19.0.0",
"react-moment": "^1.1.3",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-saga": "^1.3.0",
"reselect": "^5.1.1",
"styled-components": "^6.1.19",
"typed-redux-saga": "^1.5.0",
"typescript-fsa": "^3.0.0"
},
"overrides": {
"react": "$react",
"react-redux": "$react-redux",
"@com.mgmtp.a12.client/client-core": {
"react-redux": "$react-redux"
}
},
"devDependencies": {
"@com.mgmtp.a12.devtools/devtools": "^7.0.3",
"@com.mgmtp.a12.devtools/eslint-config": "^0.7.0",
"@cyclonedx/cyclonedx-npm": "^1.19.3",
"@playwright/test": "1.52.0",
"@types/chai": "^4.3.17",
"@types/deep-equal": "^1.0.4",
"@types/inquirer": "^9.0.7",
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.17.7",
"@types/mocha": "^10.0.7",
"@types/node": "^20.12.12",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@types/react-redux": "^7.1.34",
"@types/sinon": "^17.0.3",
"@types/sinon-chai": "^3.2.12",
"@types/styled-components": "^5.1.34",
"@types/uuid": "^3.4.10",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/eslint-plugin-tslint": "^7.0.2",
"@typescript-eslint/parser": "^7.0.0",
"autoprefixer": "^10.4.20",
"chai": "^4.5.0",
"chokidar": "^3.6.0",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^12.0.2",
"core-js": "^3.38.0",
"cross-env": "^7.0.3",
"cross-spawn": "^7.0.3",
"css-loader": "^7.1.2",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-deprecation": "^3.0.0",
"eslint-plugin-import": "^2.30.0",
"eslint-plugin-playwright": "^1.6.2",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.36.1",
"eslint-plugin-react-hooks": "^4.6.2",
"fork-ts-checker-webpack-plugin": "^9.0.2",
"global-jsdom": "^24.0.0",
"html-webpack-plugin": "^5.6.0",
"ignore-styles": "^5.0.1",
"inquirer": "^10.1.8",
"jsdom": "^24.1.1",
"jsdom-global": "^3.0.2",
"mini-css-extract-plugin": "^2.9.1",
"mocha": "^10.7.3",
"postcss": "^8.4.41",
"postcss-loader": "^8.1.1",
"postcss-styled-syntax": "^0.6.4",
"prettier": "^3.3.3",
"redux-saga-test-plan": "^4.0.6",
"run-script-os": "^1.1.6",
"semver": "^7.6.3",
"sinon": "^18.0.0",
"sinon-chai": "^3.7.0",
"source-map-support": "^0.5.21",
"style-loader": "^4.0.0",
"stylelint": "^16.9.0",
"stylelint-config-recommended": "^14.0.1",
"stylus": "github:stylus/stylus#0.64.0",
"stylus-loader": "^8.1.1",
"ts-loader": "^9.5.1",
"ts-node": "^10.9.2",
"tsconfig-paths": "^4.2.0",
"tslint": "^6.1.3",
"typescript": "^5.3.3",
"typescript-plugin-css-modules": "^5.1.0",
"uuid": "^10.0.0",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4",
"webpack-merge": "^6.0.1"
},
note that stylus was audited out of npm due to “security” issues, there are whole threads about it online (from July 2025), the solution to that is also above.
still to be determined - code fixes due to version changes, I have like 22 code errors.