WP 6.6 RC1: plugin breaks after update

elzadj commented 1 week ago

Description

Plugin: https://wordpress.org/plugins/maxi-blocks/ GitHub: https://github.com/maxi-blocks/maxi-blocks

After updating to WP 6.6 RC 1 we're getting this in the editor:

Uncaught TypeError: Cannot read properties of undefined (reading 'mark')
    at ./src/extensions/store/resolvers.js (resolvers.js:4:22)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/extensions/store/index.js (controls.js:37:24)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/extensions/index.js (isInSiteEditorPreviewIframe.js:8:43)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/index.js (index.js:18:28)
    at __webpack_require__ (bootstrap:19:1)
    at startup:4:92
    at __webpack_require__.O (chunk loaded:25:1)
react-dom.development.js:86 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

Switching back to WP 6.5.5 immediately fixes it, we suspect that it's somehow connected to https://make.wordpress.org/core/2024/06/06/jsx-in-wordpress-6-6/ and maybe to our babel config and / or webpack.config.js

https://github.com/maxi-blocks/maxi-blocks/blob/master/.babelrc.js https://github.com/maxi-blocks/maxi-blocks/blob/master/webpack.config.js

Any help with fixing it is appreciated.

Step-by-step reproduction instructions

Just update to WP 6.6 RC1

Screenshots, screen recording, code snippet

No response

Environment info

React 18.3.1 Node v20.11.1 PHP 8.2.20

If you’re using the JSX syntax in your code base, and as long as you don’t update your dev dependencies (including @wordpress/scripts, @wordpress/babel-preset-default or @wordpress/dependency-extraction-webpack-plugin), you will continue to use the old JSX transform. This will allow your plugin and built files to be compatible with WordPress 6.5, earlier versions and WordPress 6.6 as well.

No packages were updated, here are the versions:

├── @babel/plugin-proposal-class-properties@7.18.6 ├── @babel/plugin-proposal-object-rest-spread@7.20.7 ├── @babel/plugin-syntax-object-rest-spread@7.8.3 ├── @babel/plugin-transform-spread@7.24.1 ├── @babel/traverse@7.24.1 ├── @floating-ui/react-dom@1.2.1 ├── @langchain/openai@0.0.23 ├── @loadable/component@5.15.3 ├── @prettier/plugin-php@0.18.9 ├── @uiw/react-textarea-code-editor@2.0.3 ├── @wordpress/base-styles@4.45.0 ├── @wordpress/block-editor@12.13.0 ├── @wordpress/blocks@11.21.0 ├── @wordpress/components@19.16.0 ├── @wordpress/compose@5.20.0 ├── @wordpress/data@6.14.0 ├── @wordpress/e2e-test-utils@10.10.0 ├── @wordpress/editor@12.13.0 ├── @wordpress/element@4.20.0 ├── @wordpress/env@9.4.0 ├── @wordpress/hooks@3.54.0 ├── @wordpress/i18n@4.54.0 ├── @wordpress/icons@9.36.0 ├── @wordpress/jest-preset-default@11.25.0 ├── @wordpress/primitives@3.43.0 ├── @wordpress/rich-text@5.20.0 ├── @wordpress/scripts@27.5.0 ├── babel-eslint@10.1.0 ├── babel-preset-react@6.24.1 ├── bezier-easing-editor@0.8.0 ├── caniuse-lite@1.0.30001600 ├── classnames@2.3.1 ├── css-minimizer-webpack-plugin@4.0.0 ├── css-to-react-native@3.0.0 ├── deep-object-diff@1.1.9 ├── dompurify@2.3.10 ├── dotenv-webpack@8.0.1 ├── enzyme@3.11.0 ├── eslint-config-airbnb@19.0.4 ├── eslint-config-prettier@8.5.0 ├── eslint-plugin-import@2.26.0 ├── eslint-plugin-jsx-a11y@6.6.1 ├── eslint-plugin-prettier@4.2.1 ├── eslint-plugin-react-hooks@4.6.0 ├── eslint-plugin-react@7.30.1 ├── eslint@8.20.0 ├── html-react-parser@3.0.1 ├── is-mobile@3.1.1 ├── jest-canvas-mock@2.4.0 ├── langchain@0.1.30 ├── leaflet@1.8.0 ├── masonry-layout@4.2.2 ├── minify-css-string@1.0.0 ├── prettier@2.7.1 ├── re-resizable@6.9.9 ├── react-accessible-accordion@5.0.0 ├── react-color@2.19.3 ├── react-compound-slider@3.4.0 ├── react-drag-listview@0.2.1 ├── react-icons@4.4.0 ├── react-iframe@1.8.0 ├── react-image-crop@10.0.4 ├── react-inlinesvg@4.0.3 ├── react-instantsearch-dom@6.30.2 ├── react-instantsearch@6.30.2 ├── react-lazy-load@3.1.14 ├── react-leaflet-google-layer@2.0.7 ├── react-leaflet@4.0.1 ├── react-linear-gradient-picker@3.0.1 ├── react-lorem-ipsum@1.4.10 ├── react-paginate@8.1.3 ├── react-select@5.4.0 ├── react-slider@2.0.6 ├── react-spinners@0.13.8 ├── react-tilt@0.1.4 ├── tilt.js@1.2.1 ├── tinycolor2@1.4.2 ├── typesense-instantsearch-adapter@2.8.0 ├── typesense@1.8.2 ├── uuid@9.0.1 ├── w3c-css-validator@1.3.0 └── webpack-bundle-analyzer@4.10.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

tomusborne commented 1 week ago

I'm experiencing this as well.

Something as simple as this causes this same error to occur:

async function testing() {
    return true;
}

function App() {
    useEffect( () => {
        testing();
    }, [] );

    return null;
}

This results in the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'mark')

UPDATE - managed to fix this. We had wp-polyfill loading on the page that was causing this error. Removed the code requiring that dep and all is well.

elzadj commented 1 week ago

UPDATE - managed to fix this. We had wp-polyfill loading on the page that was causing this error. Removed the code requiring that dep and all is well.

Thanks for your help! I can confirm that the cause of the Uncaught TypeError: Cannot read properties of undefined (reading 'mark') is indeed the wp-polyfill script, or something connected to it.

It comes from build/index.asset.php dependency by default.

However, our custom blocks don't work.

and we still get

Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
  | printWarning | @ | react-dom.development.js:86
-- | -- | -- | --
  | error | @ | react-dom.development.js:60
  | createRoot$1 | @ | react-dom.development.js:29846
  | initializeEditor | @ | edit-post.js?ver=67d…9060f223df7e7e:3312
  | (anonymous) | @ | post.php?post=396406&action=edit:2084

The error comes from the file edit-post.js, from the line const root = (0,external_wp_element_namespaceObject.createRoot)(target); , I see it even with all the plugins deactivated:

/**
 * Initializes and returns an instance of Editor.
 *
 * @param {string}  id           Unique identifier for editor instance.
 * @param {string}  postType     Post type of the post to edit.
 * @param {Object}  postId       ID of the post to edit.
 * @param {?Object} settings     Editor settings object.
 * @param {Object}  initialEdits Programmatic edits to apply initially, to be
 *                               considered as non-user-initiated (bypass for
 *                               unsaved changes prompt).
 */
function initializeEditor(id, postType, postId, settings, initialEdits) {
  const isMediumOrBigger = window.matchMedia('(min-width: 782px)').matches;
  const target = document.getElementById(id);
  const root = (0,external_wp_element_namespaceObject.createRoot)(target);
  (0,external_wp_data_namespaceObject.dispatch)(external_wp_preferences_namespaceObject.store).setDefaults('core/edit-post', {
    fullscreenMode: true,
    themeStyles: true,
    welcomeGuide: true,
    welcomeGuideTemplate: true
  });
  (0,external_wp_data_namespaceObject.dispatch)(external_wp_preferences_namespaceObject.store).setDefaults('core', {
    allowRightClickOverrides: true,
    editorMode: 'visual',
    fixedToolbar: false,
    hiddenBlockTypes: [],
    inactivePanels: [],
    openPanels: ['post-status'],
    showBlockBreadcrumbs: true,
    showIconLabels: false,
    showListViewByDefault: false,
    isPublishSidebarEnabled: true
  });
  (0,external_wp_data_namespaceObject.dispatch)(external_wp_blocks_namespaceObject.store).reapplyBlockTypeFilters();

elzadj commented 6 days ago

After some digging, managed to find this:

Regarding Uncaught TypeError: Cannot read properties of undefined (reading 'mark') and polyfill: looks like @babel/preset-env doesn't really work with WP 6.6 RC1. I've tried the latest release and the latest alpha versions of the package, but ended up removing it from .babelrc.js - that fixed the error, and now our custom blocks work, aside of the point 2 problems:
Regarding Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client". - this warning shows for createRoot that we import from @wordpress/element package, I've tried versions 6.2.0 and 5.35.0 - they both show that error for import { createRoot } from '@wordpress/element'; .
I also see that error with all plugins deactivated, with 2024 theme, on a new page (note: I have scripts debug enabled):

swissspidy commented 4 days ago

FWIW, the You are importing createRoot from "react-dom" which is not supported warning is a known issue in Gutenberg itself and not caused by other plugins or anything. AFAIK it has to do with the way React is bundled in @wordpress/element. You can safely ignore this warning. (It's just a warning, not an error)

As for the other issue at hand, it is indeed related to wp-polyfill. For context, as noted in this dev note, the wp-polyfill dependency is no longer included by default in WordPress, as it is only relevant for when you are targeting older browsers.

Specifically, you are using generator functions in your code base while still targeting abandoned browsers like IE 11 that do not support generators.

To address this, you need to either manually load the wp-polyfill dependency or you simply remove this line here in your Babel config:

https://github.com/maxi-blocks/maxi-blocks/blob/6a47440d6a6eb8952f416ab8983397f245515f60/.babelrc.js#L23

Your Babel config in general contains polyfills for things that have been added to browsers a long time ago. Those polyfills have long been deprecated because of that. You can basically remove all of them. I recommend just using @wordpress/babel-preset-default

elzadj commented 4 days ago

To address this, you need to either manually load the wp-polyfill dependency

Thanks for your help, now most of our custom blocks work, aside of blocks that use typesense-instantsearch-adapter. We are getting the same .mark error for lines like this one https://github.com/typesense/typesense-instantsearch-adapter/blob/20d7d9616a7829f87d806c73653dacef8e5d3fca/lib/SearchRequestAdapter.js#L478

But I guess that's a question for typesense devs, going to create an issue there.

swissspidy commented 4 days ago

Looks like https://github.com/typesense/typesense-instantsearch-adapter/issues/112 applies to you

In short: This script was built targeting older browsers such as IE11, where generators were not supported. It thus requires the regenerator runtime to be available (which wp-polyfill provides). You can either manually load wp-polyfill to make it available or try to follow the steps mentioned in that issue to load the script from source and let your webpack config do the bundling. That might be as simple as this:

-import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter';
+import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter/src/TypesenseInstantsearchAdapter.js';

swissspidy commented 2 days ago

@elzadj Quick follow-up after looking into it again: I of course meant regenerator-runtime would need to be added manually, not wp-polyfill.

WordPress / gutenberg