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

[Suero152]

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

Complete error

react-dom.development.js:19527 The above error occurred in the <Menu> component:
    in Menu (at notes/index.js:13)
    in div (created by Context.Consumer)
    in Generic (created by Column.Group)
    in Column.Group (at notes/index.js:12)
    in Notes (at index/index.js:9)
    in NotesScreen (at routes.js:17)
    in PrivateRoute (at routes.js:17)
    in Routes (at routes.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at routes.js:12)
    in AppRoutes (at App.js:8)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Code:

import React, { Fragment} from 'react';
import { Column} from "rbx";
import "../../styles/notes.scss";
import { push as Menu } from 'react-burger-menu'

const Notes = props =>{

  return (
    <Fragment>
      <Column.Group className="notes" id="notes">
        <Menu
          pageWrapId={"notes-editor"}
          isOpen={props.isOpen}
          onStateChange={(state) => props.setIsOpen(state.isOpen)}
          disableAutoFocus
          outerContainerId={"notes"}
          customBurgerIcon={false}
          customCrossIcon={false}
        >
          <Column.Group>
            <Column size={10} offset={1}>
              Search...
            </Column>
          </Column.Group>
          <p>List...</p>
        </Menu>

        <Column size={12} className="notes-editor" id="notes-editor">
          Editor...
        </Column>
      </Column.Group>
    </Fragment>
  )
}

export default Notes;

[jaredwa]

Not a great answer, but you could downgrade away from hooks to

npm install react-burger-menu@^2.9.2 --save

It works, though it's not sustainable. Only way I could get it to work with next.js

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.