React Error #321 for Custom Blocks

  • Hey y’all,

    I’m a software engineer working for the Washington University in St. Louis library system. We have a WP site here (library.wustl.edu) and I’ve come across a problem for weeks now, and I am stuck. I am hoping that this forum will help me get closer to an answer.

    Our current site was built by a third party, and they used external npm dependencies for their custom blocks in Gutenberg. The one that’s giving me trouble is react-select. The bug is that when you go to edit a block’s attributes in Gutenberg, something doesn’t load correctly and I get Minified React error 321. HOWEVER, it only happens when the Gutenberg plugin is activated. The current workaround is to have the plugin disabled, but we need to make sure that this bug won’t come and hit us again in the future.

    This is my first forum posting here, so I likely made a mistake or not provided enough information. I apologize for that.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter sehqlr

    (@sehqlr)

    I realized that I never included a code sample…

    render() {                                                               
        const multiple = this.props.isMulti;                             
        const handleChange = this.props.onChange;                        
        const { selected } = this.props;                                 
        console.log('PostTypePicker rendering now');                     
        console.log(this);                                               
        return (                                                         
                <AsyncSelect                                             
                        isMulti={multiple}                               
                        value={this.rehydratePostTypeSelection(selected)}
                        loadOptions={this.loadOptions}                   
                        defaultOptions                                   
                        onChange={handleChange}                          
                />                                                       
        );                                                               
}

    The console logs always print, and the rehydratePostTypeSelection function also runs (because I have a few logging statements there too). But something happens when this AsyncSelect component renders and triggers the exception.

    • This reply was modified 3 years, 5 months ago by sehqlr.
    Thread Starter sehqlr

    (@sehqlr)

    For Your Information… I decided to create an issue in the react-select GitHub repository.

    Greetings,

    I am a collaborator on the react-select project and was hoping to assist with this issue but it’s a bit unclear of how the Gutenberg plugin is working or even how to begin debugging.

    The reported issue according to the console error seems to indicate that there are either multiple instances of react or a misuse of hooks, but we’re unable to replicate nor have we come across anything like this error before.

    Please let me know if there is anything I can do on my end to assist in troubleshooting.

    Hi,

    I’m a webapp freelancer, and I’m currently expanding my skills with WP Gutenbergs custom blocks.

    I run into the same error while developing my first custom block, and in my case the origin of the error was in the save() function of the custom block .js file.
    It was due to the fact, that my RichText element was wrongly rendering. Whereas in the edit() function you just use “<RichText />”, in the save() function I had to refer to <RichText.Content />, which resembles my attributes structure -> attributes:{content: {…}}.

    I hope this will help you solve your issue.

    • This reply was modified 3 years, 2 months ago by blauweb. Reason: typo
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘React Error #321 for Custom Blocks’ is closed to new replies.