Console errors and warnings from react 18.2.0 version #73
Description
Hi,
When adding a set of custom blocks to the filter 'search-replace-for-block-editor.allowedBlocks' the console show the following warning when i open the post in the gutenberg editor:
Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information. 206/</e.edit@http://localhost:8000/wp-content/plugins/search-replace-for-block-editor/dist/app.js?ver=f8598fc6b1654bbbd9da:1:6281 Edit@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:39131:7 createBlockEditFilter/withBlockEditHooks</<@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:17565:21 withPatternOverrideControls</<@http://localhost:8000/wp-includes/js/dist/editor.js?ver=b92daa20720ed8e6de31:6359:29 m</<@http://localhost:8000/wp-content/plugins/dmt-blocks/build/dmt-blocks-main.js?ver=17c63dc0b87d67151246:1:3490 w</<@http://localhost:8000/wp-content/plugins/dmt-blocks/build/dmt-blocks-main.js?ver=17c63dc0b87d67151246:1:4915 E</<@http://localhost:8000/wp-content/plugins/dmt-blocks/build/dmt-blocks-main.js?ver=17c63dc0b87d67151246:1:6102 D</<@http://localhost:8000/wp-content/plugins/dmt-blocks/build/dmt-blocks-main.js?ver=17c63dc0b87d67151246:1:13002 F</<@http://localhost:8000/wp-content/plugins/dmt-blocks/build/dmt-blocks-main.js?ver=17c63dc0b87d67151246:1:16263 FilteredComponentRenderer@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:70586:9 EditWithGeneratedProps@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:39150:7 BlockEdit@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:39333:19 BlockCrashBoundary@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:39638:5 BlockListBlock@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:40634:24 withLayoutStyles</<@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:35430:7 createBlockListBlockFilter/withBlockListBlockHooks</<@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:17634:99 FilteredComponentRenderer@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:70586:9 withDispatch/</<@http://localhost:8000/wp-includes/js/dist/data.js?ver=6f178ef23ef546c51cae:4489:46 BlockListBlockProvider@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:40987:7 Items@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:50862:15
When we click on a custom block we get the following warnings:
'Warning: Unknown event handler property onPointerEnterCapture. It will be ignored.
button
Role@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:2877:38
UnforwardedTooltip@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:10210:7
UnforwardedButton@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:31665:32
Role@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:2877:38
toolbar_item_ToolbarItem@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:68181:34
UnforwardedToolbarButton@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:68253:34
div
ToolbarGroupContainer@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:68339:31
ToolbarGroup@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:68443:22
StyleProvider@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33537:7
fill_Fill@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33581:7
slot_fill_Fill
BlockControlsFill
StyleProvider@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33537:7'
Warning: Unknown event handler property onPointerLeaveCapture. It will be ignored. button Role@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:2877:38 UnforwardedTooltip@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:10210:7 UnforwardedButton@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:31665:32 Role@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:2877:38 toolbar_item_ToolbarItem@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:68181:34 UnforwardedToolbarButton@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:68253:34 div ToolbarGroupContainer@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:68339:31 ToolbarGroup@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:68443:22 StyleProvider@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33537:7 fill_Fill@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33581:7 slot_fill_Fill BlockControlsFill StyleProvider@http://localhost:8000/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33537:7 BlockControlsFill@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:17795:27 206/</e.edit@http://localhost:8000/wp-content/plugins/search-replace-for-block-editor/dist/app.js?ver=f8598fc6b1654bbbd9da:1:6281 Edit@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:39131:7 createBlockEditFilter/withBlockEditHooks</<@http://localhost:8000/wp-includes/js/dist/block-editor.js?ver=e078c055fa618731d37d:17565:21
The cause is that the custom blocks in our plugin are configured for react v18.2.0 and that these properties were removed in React
( DefinitelyTyped/DefinitelyTyped#68984 )
See our package.json config.
"devDependencies": { "@babel/core": "^7.24.4", "@babel/eslint-plugin": "^7.23.5", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/preset-env": "^7.24.4", "@babel/preset-react": "^7.24.1", "@wordpress/eslint-plugin": "wp-6.6", "@wordpress/prettier-config": "wp-6.6", "@wordpress/scripts": "wp-6.6", "@wordpress/stylelint-config": "wp-6.6", "eslint": "^8.57.0", "eslint-plugin-json": "^3.1.0", "eslint-plugin-no-jquery": "^2.7.0", "postcss": "8.4.38", "prettier": "3.2.5", "prop-types": "^15.8.1", "sass": "1.75.0", "stylelint": "^14.16.1", "terser-webpack-plugin": "^5.3.9", "typescript": "^5.3.3" }, "dependencies": { "@jwplayer/jwplayer-react": "^1.1.3", "@mui/icons-material": "^5.15.15", "@mui/material": "^5.15.15", "@sentry/webpack-plugin": "^2.16.1", "@wordpress/api-fetch": "wp-6.6", "@wordpress/block-editor": "wp-6.6", "@wordpress/blocks": "wp-6.6", "@wordpress/components": "wp-6.6", "@wordpress/core-data": "wp-6.6", "@wordpress/data": "wp-6.6", "@wordpress/date": "wp-6.6", "@wordpress/dom": "wp-6.6", "@wordpress/element": "wp-6.6", "@wordpress/hooks": "wp-6.6", "@wordpress/i18n": "wp-6.6", "@wordpress/icons": "wp-6.6", "@wordpress/url": "wp-6.6", "classnames": "^2.5.1", "cocoen": "^3.2.0", "glob": "^11.0.1", "lodash": "^4.17.21", "lottie-web": "^5.12.2", "mini-css-extract-plugin": "^2.9.2", "path-browserify": "^1.0.1", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-colorful": "^5.6.1", "react-dom": "^18.2.0", "react-select": "^5.8.0", "redux": "^5.0.0", "rtlcss-webpack-plugin": "^4.0.7", "stream-browserify": "^3.0.0", "tslib": "2.6.2" }, "engines": { "node": "20.x", "npm": "10.x" }
if i upgrade the s&r plugin to the same react version these errors will disappear. Is it possible to upgrade the plugin to a react version 18 or higher?