How to troubleshoot a custom Gutenberg block error: "This block has encountered an error and cannot be previewed"

Question

I'm using a plugin from LinkedIn Learning to customize into my own plugin's custom Gutenberg blocks.

After I've edited the file plugin/src/index.js (I edited the edit() & save() functions), I now have:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

// Import SVG as React component using @svgr/webpack.
// https://www.npmjs.com/package/@svgr/webpack
import { ReactComponent as Logo } from "../bv-logo.svg";

// Import file as base64 encoded URI using url-loader.
// https://www.npmjs.com/package/url-loader
import logoWhiteURL from "../purity-logo.svg";

// https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-registration/
registerBlockType("podkit/home-slider", {
  title: __("Home Slider", "podkit"),
  icon: { src: Logo },
  category: "podkit",

  // https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/
  edit() {
    return (
      <section class="ad-waypoint" data-animate-down="site-primary-menu-lrg" data-animate-up="site-primary-menu-lrg">
        <div class="sec-zero-wrapper">
          <div class="item">
              <div class="lSSlideOuter ">
                <div class="lSSlideWrapper">
                  <ul class="home-slider content-slider lightSlider lSFade" style="height: 0px; padding-bottom: 71.9931%;">        
                  <li class="lslide" style="display: none;"><div class="sec-zero-bg" style="background: url('http://purity.insightcomdes.local/wp-content/uploads/2016/03/bag-packer_250767238-opt2.jpg') center center no-repeat; background-size:cover;  background-attachment: fixed;"></div></li>
                  <li class="lslide active" style="display: list-item;"><div class="sec-zero-bg" style="background: url('http://purity.insightcomdes.local/wp-content/uploads/2016/03/shutterstock_43604071-opt.jpg') center center no-repeat; background-size:cover;  background-attachment: fixed;"></div></li>
                  <li class="lslide" style="display: none;"><div class="sec-zero-bg" style="background: url('http://purity.insightcomdes.local/wp-content/uploads/2016/03/shutterstock_123343987-opt.jpg') center center no-repeat; background-size:cover;  background-attachment: fixed;"></div></li>
                  <li class="lslide" style="display: none;"><div class="sec-zero-bg" style="background: url('http://purity.insightcomdes.local/wp-content/uploads/2016/03/wind-turbines_13504843-opt.jpg') center center no-repeat; background-size:cover;  background-attachment: fixed;"></div></li>
                </ul>
              </div>
              <ul class="lSPager lSpg" style="margin-top: 5px;"
                ><li class=""><a href="#">1</a></li>
                <li class="active"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
              </ul>
            </div>
          </div>
          <div class="sec-zero-thematic">
            <img src={logoWhiteURL} alt="main-brand-logo"/>
            <h3>imagination is only the begining</h3>
          </div>
          <div class="secondary-menu">
            <div class="center">
              <div class="content-container">
                <div style="margin-top:148px; position:absolute; width: calc(100% - 40px);" class="nav-rule"></div>
                <div class="site-navigation-head-btm">
                  <div class="site-navigation-head-btm-25">
                    <div class="menu-primary-bottom-menu-container">
                      <ul id="menu-primary-bottom-menu" class="menu">
                        <li id="menu-item-1124" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1124"><a>Our clients</a></li>
                        <li id="menu-item-1125" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1125"><a>Relationships</a></li>
                        <li id="menu-item-1132" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1132"><a>Products</a></li>
                        <li id="menu-item-1133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1133"><a>Latest News</a></li>
                      </ul>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    );
  },
  save() {
    return (
      <section class="ad-waypoint" data-animate-down="site-primary-menu-lrg" data-animate-up="site-primary-menu-lrg">
        <div class="sec-zero-wrapper">      
          <div class="item">
              <div class="lSSlideOuter ">
                <div class="lSSlideWrapper">
                  <ul class="home-slider content-slider lightSlider lSFade" style="height: 0px; padding-bottom: 71.9931%;">        
                  <li class="lslide" style="display: none;"><div class="sec-zero-bg" style="background: url('http://purity.insightcomdes.local/wp-content/uploads/2016/03/bag-packer_250767238-opt2.jpg') center center no-repeat; background-size:cover;  background-attachment: fixed;"></div></li>
                  <li class="lslide active" style="display: list-item;"><div class="sec-zero-bg" style="background: url('http://purity.insightcomdes.local/wp-content/uploads/2016/03/shutterstock_43604071-opt.jpg') center center no-repeat; background-size:cover;  background-attachment: fixed;"></div></li>
                  <li class="lslide" style="display: none;"><div class="sec-zero-bg" style="background: url('http://purity.insightcomdes.local/wp-content/uploads/2016/03/shutterstock_123343987-opt.jpg') center center no-repeat; background-size:cover;  background-attachment: fixed;"></div></li>
                  <li class="lslide" style="display: none;"><div class="sec-zero-bg" style="background: url('http://purity.insightcomdes.local/wp-content/uploads/2016/03/wind-turbines_13504843-opt.jpg') center center no-repeat; background-size:cover;  background-attachment: fixed;"></div></li>
                </ul>
              </div>
              <ul class="lSPager lSpg" style="margin-top: 5px;"
                ><li class=""><a href="#">1</a></li>
                <li class="active"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
              </ul>
            </div>
          </div>
          <div class="sec-zero-thematic">
            <img src={logoWhiteURL} alt="main-brand-logo" />
            <h3>imagination is only the begining</h3>
          </div>       
          <div class="secondary-menu">
            <div class="center">
              <div class="content-container">
                <div style="margin-top:148px; position:absolute; width: calc(100% - 40px);" class="nav-rule"></div>
                <div class="site-navigation-head-btm">
                  <div class="site-navigation-head-btm-25">
                    <div class="menu-primary-bottom-menu-container">
                      <ul id="menu-primary-bottom-menu" class="menu">
                        <li id="menu-item-1124" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1124"><a>Our clients</a></li>
                        <li id="menu-item-1125" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1125"><a>Relationships</a></li>
                        <li id="menu-item-1132" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1132"><a>Products</a></li>
                        <li id="menu-item-1133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1133"><a>Latest News</a></li>
                      </ul>
                    </div>    
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </section>
    )
  }
});

In Microsoft Visual Code, I am running the process wp-scripts start which recompiles the plugin after every save I believe. This process originally found some syntax errors for me, but I receive no more syntax errors in the output of wp-scripts start.

In a local dev WP site, when I try to add the new block, I receive an error:

This block has encountered an error and cannot be previewed

At the same time as adding the new block, in the Chrome console, I see:

Error: Minified React error #62; visit https://reactjs.org/docs/error-decoder.html?invariant=62&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
    at Pd (react-dom.min.js?ver=16.9.0:47)
    at nh (react-dom.min.js?ver=16.9.0:132)
    at lh (react-dom.min.js?ver=16.9.0:126)
    at O (react-dom.min.js?ver=16.9.0:121)
    at ze (react-dom.min.js?ver=16.9.0:118)
    at react-dom.min.js?ver=16.9.0:53
    at unstable_runWithPriority (react.min.js?ver=16.9.0:26)
    at Ma (react-dom.min.js?ver=16.9.0:52)
    at mg (react-dom.min.js?ver=16.9.0:52)
    at V (react-dom.min.js?ver=16.9.0:52)

which I'm having trouble understanding.

I've set:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', true );

but there is no output on screen or in a debug log.

I've searched online for the error, and most solutions involve updating WordPress or disabling plugins. I only have Akismet & MainWP child, plus the plugin to produce the custom blocks.

Disabling Akismet & MainWP child does not resolve the issue.

How would I go about troubleshooting this error?

Help appreciated.

Answer 1

Add this additional variable to your wp-config file:

define ( 'SCRIPT_DEBUG', true); 

Also, inline styling directly in react is declared differently is similar but different in many ways than pure, vanilla CSS.

For example, <ul class="home-slider content-slider lightSlider lSFade" style="height: 0px; padding-bottom: 71.9931%;">

is written in react as:

<ul className={ 'home-slider content-slider lightSlider lSFade'} style={{ paddingBottom: '71.9931%', height: 0}}> {'your content'} </ul> (my react code may not be exactly correct!)

As the above link notes, I would recommend to style your css in a separate file (which is already created for you in wp-scripts) instead of directly within react.

Answer 2

From my personal experience this doesn't go along well together:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;


import { ReactComponent as Logo } from "../bv-logo.svg";


import logoWhiteURL from "../purity-logo.svg";

Destructuring and import gave me the described error.

Got it fixed by recreating the SVGs like so:

const logo = el(wp.primitives.SVG,
    {width: 20, height: 20, viewBox: '0 0 64 64'},
    el('g',
        {
          'fill-rule': 'evenodd',
          fill: 'none',
        },
        el('path', {
          fill: '#3B414C',
          d: 'M-102-193h600v450h-600z',
        }),
        el('g', {
              fill: '#2FC5C0',
              'fill-rule': 'nonzero',
            },
            el('path', {
              d: 'M0 0v63.096h63.096V0H0zm60.588 60.588H2.508V2.508h58.08v58.08z',
            }),
            el('path', {
              d: 'M24.156 44.748l.924 2.508 3.168-7.524-.132-.396s-5.808-15.048-7.788-20.196l-.264-.66h-6.072l.528 1.452c3.168 8.316 9.636 24.816 9.636 24.816zM36.696 44.748l.924 2.508 3.168-7.524-.132-.396s-5.808-15.048-7.788-20.196l-.264-.66h-6.072l.528 1.452c3.3 8.316 9.636 24.816 9.636 24.816zM47.388 18.48h-6.996l3.564 9.24z',
            }),
        ),
    ),
);
updateCategory('my-blocks', {icon: logo});

If you have JSX Compilation running you could also try to do this:

registerBlockType("podkit/home-slider", {
  title: __("Home Slider", "podkit"),
  icon: 
    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 5.162h-18M15 1.196l3.75 3.966L15 9.13" stroke="#e0004d" stroke-width="1.5" stroke-linejoin="round"/></svg>,

  ...
});