I’m trying to use this hamburger component in my custom navigation block (https://hamburger-react.netlify.app/). It works fine in the editor from within the edit component but I cannot for the life of me get it work on the frontend.

First attempt: loading frontend JS via "viewScript": "file:./view.js" in the block.json file per current documentation. It loads (I’ve tested with cosole.log) but it doesn’t work with the hamburger component. Not only does state not work, resulting in a Uncaught TypeError: Cannot read properties of null (reading 'useState'), but after removing state from the component I get Target container is not a DOM element. Which makes me wonder if the script is being loaded before the DOM. And I confirmed that it is, the view.js file is being loaded in the head. I feel like this should’t matter since I’m using ReactDOM.render(<Hamburger/>, document.querySelector('#nav-block')); to insert the component into the nav div. Nevertheless I change my tactic to the following..

Second attempt: I opt to enqueue the JS file the traditional way using PHP becuase I can control where it loads, ie: in the footer. I once again confirm that the script is loading before messing around with the react component. I try inserting the same code as before, now I’m getting this Uncaught SyntaxError: Cannot use import statement outside a module (at ....) I’m out of ideas.

This is the simplified react code I’m trying to load in the view.js file. I’ve experimented with importing state directly into this file and it doesn’t change a thing so I removed that altogether.

import { Divide as Hamburger } from 'hamburger-react'

ReactDOM.render(<Hamburger/>, document.querySelector('#nav-block'));

This is how the nav html apears on the frontend

<div id="nav-block" class="wp-block-des-navigation">
  <ul style="background-color:none;color:#ffffff" class="nav-menu is-horizontal is-content-justification-left is-layout-flex wp-container-2">
    <li class="nav-link">Home</li>
  </ul>
</div>

This is what I’m using within the edit component and is working within the gutenberg editor (stripped of unnecessary bits for brevity).

import { Divide as Hamburger } from 'hamburger-react'

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

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