Cannot read property 'components-spinner' of undefined on WordPress 5.7

[rawrndres]

Description

Adding the Spinner component to a custom block results in a blank post editor page. The block was compiled using create-guten-block: https://github.com/ahmadawais/create-guten-block
Block works properly in WordPress 5.6

Step-by-step reproduction instructions

1. Activate plugin for a custom block with spinner component
2. Go to a post and add the custom block
3. Publish
4. Reload or go back to All posts and try to access the same post again.
5. Blank screen with JS errors in the console

Expected behaviour

No blank screen and the custom block loading properly.

Actual behaviour

The block and post editor load when first adding the block but pon saving and visiting the page again the Blank screen and errors in the console appear.

Screenshots or screen recording (optional)

https://snipboard.io/5eVHR0.jpg

Code snippet (optional)

https://gist.github.com/rawrndres/c9ca2bb111d9bb0d606fb6db21755c1e
Compiled with https://github.com/ahmadawais/create-guten-block
npm install
npm run build

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Macbook Pro
• Operating system: macOS Catalina
• Browser: Chrome

[ockham]

It's weird that the error

Uncaught TypeError: Cannot read property 'components-spinner' of undefined
    at components.min.js?ve...4539a5c19832b0114:7

is happening in components.min.js 🤔

Bit of a Hail Mary, but any chance this is related to CSS-in-JS/G2, @sarayourfriend?

[emrikol]

Hi @ockham! I've been helping out @rawrndres with this issue some, and here's a bit more details if it helps:

With unminified (SCRIPT_DEBUG as true) components, the error I'm getting in the console is:

components.js?0=ver&1=wp-components606f648fe2c14:5465 Uncaught TypeError: Cannot read property 'components-spinner' of undefined
    at components.js?0=ver&1=wp-components606f648fe2c14:5465
    at Array.forEach (<anonymous>)
    at getRegisteredStyles (components.js?0=ver&1=wp-components606f648fe2c14:5463)
    at Object.children (components.js?0=ver&1=wp-components606f648fe2c14:18084)
    at renderElement (element.js?0=ver&1=wp-element606f648fe1fd2:1453)
    at renderElement (element.js?0=ver&1=wp-element606f648fe1fd2:1453)
    at renderElement (element.js?0=ver&1=wp-element606f648fe1fd2:1456)
    at renderElement (element.js?0=ver&1=wp-element606f648fe1fd2:1445)
    at renderChildren (element.js?0=ver&1=wp-element606f648fe1fd2:1551)
    at renderNativeComponent (element.js?0=ver&1=wp-element606f648fe1fd2:1487)

in components.js the error is happening in this function (the file seems too big to deep link in GitHub, unfortunately):

function getRegisteredStyles(registered, registeredStyles, classNames) {
  var rawClassName = '';
  classNames.split(' ').forEach(function (className) {
    if (registered[className] !== undefined) { ---ERROR HERE--- 
      registeredStyles.push(registered[className]);
    } else {
      rawClassName += className + " ";
    }
  });
  return rawClassName;
}

registered is undefined at the ---ERROR HERE--- point, but that's the furthest I've been able to take it without trying to set up a WordPress dev setup to hack the script sources.

[sarayourfriend]

getRegisteredStyles is actually an emotion function. I don't see it being used directly by the @wp-g2 packages or by Gutenberg at this point.

Likewise, the spinner is still just the regular spinner, not the one from @wp-g2:

gutenberg/packages/components/src/spinner/index.js

Line 7 in 7dd2501

return <StyledSpinner className="components-spinner" />;

(You can tell because there's no next.js file in the spinner directory)

So this appears to be just a regular bug with Gutenberg rather than a style system thing.

I did a little more digging but I couldn't see anything that would cause this issue. I'll do some research on how getRegisteredStyles is supposed to be used to see if that yields anything.

Update: this was the closest thing I could find in the Emotion issues about this: emotion-js/emotion#1728

[talldan]

Are components from the components package generally considered to be usable in a block save function?

I'm not sure those components are really intended for that use. A lot of them have associated styling and event handling that wouldn't work when rendered to a string.

Spinner is an interesting one, because it's just a span with some styling, but it looks like the css-in-js styles being rendered to a string is where this error is happening.

For other components in the package that use scss stylesheets, I don't think those styles will be loaded on the front-end of a site.

[gziolo]

I second what @talldan said. It's very tricky to use regular React components inside the save implementation that should contain code that generates HTML output saved in the post content. In theory, you can share code with edit, but as soon as you use data API interactions, React hooks, or lifecycle methods it either breaks or doesn't work as expected.

I would personally recommend using HTML tags, class names, and styles, or everything you would use in PHP to generate the output.

[talldan]

I'll close this, as it hasn't had an update in a while, and the situation is still the same.