'useSate' error when using React on the frontend in custom block plugin

Question

I keep getting this error with React on the frontend

Uncaught TypeError: Cannot read properties of null (reading 'useState')

I'm trying to use this hamburger component (https://hamburger-react.netlify.app/) in my custom navigation block. It works in the editor but not in the frontend unless I remove state altogether. I would like to use state tho as it tracks whether to open or close the menu.

The code looks like this in my edit.js

import { registerBlockType } from '@wordpress/blocks'
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'
import { Divide as Hamburger } from 'hamburger-react'
import './main.css'

    edit() {
        const [isOpen, setOpen] = useState(false);

        return (
            <div {...blockProps} id="nav-block">
                <Hamburger toggled={isOpen} toggle={setOpen} />
                <ul {...innerBlocksProps} class="nav-menu" />
            </div>
        );
    },

And my save component looks like this with no dynamic code (learned my lesson about that already).

    save() {
        const blockProps = useBlockProps.save();
        const innerBlocksProps = useInnerBlocksProps.save({});

        return(
            <div {...blockProps} id="nav-block">
                <ul {...innerBlocksProps} class="nav-menu" />
            </div>
        );
    },

I've added a frontend JS file via "viewScript": "file:./view.js" to my block.json - it works, I've tested it.

And this code is in my view.js file.

import { render, useState } from '@wordpress/element'
import { Divide as Hamburger } from 'hamburger-react'
import './main.css'

window.addEventListener( 'DOMContentLoaded', ( event ) => {

    const wrapper = document.getElementById( `nav-block` );
    const [isOpen, setOpen] = useState(false);

    render( <Hamburger toggled={isOpen} toggle={setOpen} />, wrapper );

} );

Notice that I added useState to the import statement here, while I didn't do so in the edit.js file. This changes nothing, I still get the same error which tells me Wordpress already loads useState - correct me if I'm wrong.

What am I missing here? It seems unique to Wordpress as I've tried researching React useState and it looks like I'm doing everything right.

Answer 1

I tried your view script, i.e. the code in your view.js file, and it's true that I also got the same error in question. However, I spotted another error which appeared before the other error, and which explained why that other error appeared:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

So in your case, the problem is that you're breaking the Rules of Hooks, i.e. you're calling useState (which is a React hook) from within an event handler (which is the function called once the DOM is ready).

Therefore, instead of doing this:

window.addEventListener( 'DOMContentLoaded', ( event ) => {

    const wrapper = document.getElementById( `nav-block` );
    // You can not call useState here.
    const [isOpen, setOpen] = useState(false);

    render( <Hamburger toggled={isOpen} toggle={setOpen} />, wrapper );

} );

You can try something like this:

const MyHamburger = () => {
    // This is within a *function* component, so useState can be used.
    const [isOpen, setOpen] = useState(false);

    return <Hamburger toggled={ isOpen } toggle={ setOpen } />;
};

window.addEventListener( 'DOMContentLoaded', ( event ) => {

    const wrapper = document.getElementById( `nav-block` );

    render( <MyHamburger />, wrapper );

} );

Additional Notes

1. I had script debugging enabled, i.e. SCRIPT_DEBUG is true, hence you should do the same while developing/testing your block, to ensure your code is free from errors/warnings/etc. :)

2. I used WordPress v6.2, hence I also got this warning when I tested your code: (see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/#usage)

   Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

   So this is how I got rid of that warning:

   // At the top in the file, I imported createRoot instead:
   import { createRoot, useState } from '@wordpress/element';
   
   // ... then called it instead of wp.element.render():
   window.addEventListener( 'DOMContentLoaded', ( event ) => {
   
       const wrapper = document.getElementById( 'nav-block' );
   
       createRoot( wrapper ).render( <MyHamburger /> );
   
   } );
   

   However, you could also import both createRoot and render, and then replace the createRoot line above with:

   if ( createRoot ) {
       createRoot( wrapper ).render( <MyHamburger /> );
   } else {
       render( <MyHamburger />, wrapper );
   }
   

Answer 2

The problem is that the wp-element script is not being enqueued as a dependency. In the editor this script is always loaded because it's used by the editor, but it's not loaded on the front end. You will need to declare it as one of your view scripts for it to be loaded on the front end, and for useState to be available:

viewScript: ["wp-element", "file:./view.js"],

The reason this is necessary is because wp-scripts will see imports from @wordpress/element but not actually import the script. If it did, every block script would be bundled with its own copy of React. Instead it will change this import to a reference to the existing global instance of wp.element, but that only exists if wp-element is enqueued.