Error using metisMenu with React: metisMenu is not a function

[inigomarquinez]

I'm trying to use metisMenu inside a React component. But it throws an error. This is what I do:

1. Install jQuery and metisMenu through npm.

2. Import jQuery and metismenu scripts:

import $ from 'jquery';
import 'metismenu/dist/metismenu.js';

3. Define the metismenu html element:

<ul className="metismenu" ref="metismenu">

4. Call metisMenu inside componentDidMount():

    componentDidMount() {
        $(this.refs.metismenu).metisMenu();
    }

But when I run it, it throws the following error: bundle.js:32077 error TypeError: (0 , _jquery2.default)(...).metisMenu is not a function at Menu.componentDidMount (bundle.js:54715) at CallbackQueue.notifyAll (bundle.js:6649) at ReactReconcileTransaction.close (bundle.js:16407) at ReactReconcileTransaction.closeAll (bundle.js:7010) at ReactReconcileTransaction.perform (bundle.js:6957) at ReactUpdatesFlushTransaction.perform (bundle.js:6944) at ReactUpdatesFlushTransaction.perform (bundle.js:6441) at Object.flushBatchedUpdates (bundle.js:6502) at Object.wrapper [as flushBatchedUpdates] (bundle.js:1645) at ReactDefaultBatchingStrategyTransaction.closeAll (bundle.js:7010)

Here is the code of the component:

class Menu extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        $(this.refs.metismenu).metisMenu();
    }

    render() {
        let items = Object.values(this.props.hierarchy).map((item, index) =>
                                                            <MenuItem key={index} data={item} />);

        return (
            <div className="mCustomScrollbar" data-mcs-theme="dark">
                <aside className="sidebar">
                    <nav className="sidebar-nav">
                        <ul className="metismenu" ref="metismenu">
                            {items}
                        </ul>
                    </nav>
                </aside>
            </div>
        );
    }
}

By the way, I can't use the react-metismenu component because the application's redux state is overwritten inside the component.

[yoyoys]

I'm using vue, but maybe this is helpful. It works for me.

import MetisMenu from 'metismenu/src'
// also works
// import MetisMenu from 'metismenu/dist/modules/index.js'


mounted () {
    const config = {}
    const menu = new MetisMenu(this.$el, config)  // $el is the dom needs metisMenu

    menu.init()
}

[Way-U-Need]

any other option??

[onokumus]

You can use metismenujs (not metismenu) if you want to use it with React.

metismenujs: https://github.com/onokumus/metismenujs

Example repo : https://github.com/onokumus/metismenu-react-example

[anosteve]

We are getting the same error "metisMenu is not a function" when we upgrade tablesaw (responsive tables) from version 1.0.4 to 3.1.2. Has anyone else had this problem? I will try the suggestion on using metismenujs.