WP 6.6 RC1: plugin breaks after update #62923

elzadj · 2024-06-27T12:00:53Z

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:

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

The text was updated successfully, but these errors were encountered:

tomusborne · 2024-06-27T16:53:23Z

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 · 2024-06-28T09:49:37Z

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 · 2024-06-29T07:36:28Z

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 · 2024-07-01T07:31:24Z

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 · 2024-07-01T11:38:22Z

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 · 2024-07-01T11:52:14Z

Looks like typesense/typesense-instantsearch-adapter#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 · 2024-07-03T12:47:44Z

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

mboynes · 2024-07-10T20:04:45Z

I ran into this issue on a plugin as well even though that plugin uses @wordpress/dependency-extraction-webpack-plugin and, through that, was including wp-polyfill as a script dependency (and FWIW I confirmed that the wp-polyfill script was successfully being loaded in source HTML).

I couldn't find a path to resolution, so I had to update the plugin's browserslist in order to get it working again.

swissspidy · 2024-07-10T20:20:32Z

Yeah if you target Internet Explorer (which is abandoned) then you would include the regenerator code for no reason and would need to manually add regenerator-runtime as a dependency (instead of wp-polyfill -- the latest version of @wordpress/dependency-extraction-webpack-plugin fixes that for you). But just updating the browserslist config makes so much more sense and your users will be thankful for the smaller bundles :)

FauzanEdris · 2024-07-18T05:47:03Z

updated the @wordpress/dependency-extraction-webpack-plugin to version 6.3.0 solve the issue.

https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin/v/6.3.0

thanks!

yonnic · 2024-07-18T11:42:05Z

The Pods Plugin is also affected by this problem and its minified code.
How can i fix it manually with this wp-polyfill issue ?
contacting Pods Author is no option as their support is dead

swissspidy · 2024-07-18T12:15:24Z

@yonnic Their support is well and alive and they are working on this. See https://wordpress.org/support/topic/pods-not-working-with-wordpress-6-6-update/.

rilwis · 2024-09-10T04:09:12Z

@swissspidy Is there any update about this issue?

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)

swissspidy · 2024-09-10T06:46:17Z

AFAIK it is supposed to be fixed in 6.7

elzadj added the [Type] Bug An existing feature does not function as intended label Jun 27, 2024

t-hamano added the Needs Testing Needs further testing to be confirmed. label Jun 28, 2024

elzadj mentioned this issue Jul 1, 2024

Incompatibility with WordPress 6.6 RC1 typesense/typesense-instantsearch-adapter#210

Open

opr mentioned this issue Jul 3, 2024

Use createRoot().render() instead of render() woocommerce/woocommerce#48858

Merged

12 tasks

ecgan mentioned this issue Jul 5, 2024

Pinterest landing page displays "Not allowed" with WordPress 6.6 woocommerce/pinterest-for-woocommerce#1031

Closed

mboynes mentioned this issue Jul 10, 2024

Update browserslist alleyinteractive/byline-manager#370

Merged

This was referenced Jul 10, 2024

WordPress 6.6 Compatibility alleyinteractive/byline-manager#371

Closed

Issue-371: WordPress 6.6 Compatibility alleyinteractive/byline-manager#372

Closed

swissspidy closed this as completed Jul 11, 2024

alecgeatches mentioned this issue Jul 17, 2024

Add HMR section to README, re-add dotenv support for webpack configuration Automattic/vip-workflow-plugin#13

Merged

ajayadav09 mentioned this issue Jul 18, 2024

added regenerator-runtime as dependency for wp6.6 fix newfold-labs/wp-module-help-center#50

Merged

9 tasks

kallehauge mentioned this issue Aug 9, 2024

fix: wcadmin react18 createroot print shipping banner woocommerce/woocommerce#48831

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WP 6.6 RC1: plugin breaks after update #62923

WP 6.6 RC1: plugin breaks after update #62923

elzadj commented Jun 27, 2024

tomusborne commented Jun 27, 2024 •

edited

Loading

elzadj commented Jun 28, 2024 •

edited

Loading

elzadj commented Jun 29, 2024

swissspidy commented Jul 1, 2024

elzadj commented Jul 1, 2024

swissspidy commented Jul 1, 2024

swissspidy commented Jul 3, 2024

mboynes commented Jul 10, 2024

swissspidy commented Jul 10, 2024

FauzanEdris commented Jul 18, 2024

yonnic commented Jul 18, 2024

swissspidy commented Jul 18, 2024

rilwis commented Sep 10, 2024

swissspidy commented Sep 10, 2024

WP 6.6 RC1: plugin breaks after update #62923

WP 6.6 RC1: plugin breaks after update #62923

Comments

elzadj commented Jun 27, 2024

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

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

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

tomusborne commented Jun 27, 2024 • edited Loading

elzadj commented Jun 28, 2024 • edited Loading

elzadj commented Jun 29, 2024

swissspidy commented Jul 1, 2024

elzadj commented Jul 1, 2024

swissspidy commented Jul 1, 2024

swissspidy commented Jul 3, 2024

mboynes commented Jul 10, 2024

swissspidy commented Jul 10, 2024

FauzanEdris commented Jul 18, 2024

yonnic commented Jul 18, 2024

swissspidy commented Jul 18, 2024

rilwis commented Sep 10, 2024

swissspidy commented Sep 10, 2024

tomusborne commented Jun 27, 2024 •

edited

Loading

elzadj commented Jun 28, 2024 •

edited

Loading