(...).hcOffcanvasNav is not a function after Upgrade to 5.0.3

[glavrjk]

Hello i have a issue after update to 5.0.3 from webpack. (...).hcOffcanvasNav is not a function but it was working without problems before. There is something wrong in my app.js file? or did the alias change after update? I had to rollback to 4.2.6 meanwhile, i'll appreciate your help.

import $ from 'jquery';
import 'bootstrap';
import 'hc-offcanvas-nav';

$(function () {
        $('#main-nav').hcOffcanvasNav({
                disableAt: false,
                customToggle: $('.toggle'),
                levelSpacing: 40,
                navTitle: 'MENÚ PRINCIPAL',
                labelClose: 'Cerrar',
                labelBack: 'Atrás',
                levelTitles: true,
                levelTitleAsBack: true,
                pushContent: '#container',
                insertClose: 2
        });
});

[somewebmedia]

Hey @glavrjk, in the major version 5 the lib is now dependency free, so you don't need jQuery anymore for using it, but it can still be used with it if you prefer that way (check the readme).

In order to use it as jQuery plugin, the jQuery object needs to be attached to the global window object, which is not the case if you load it with Webpack or Browserify. Read it here: https://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack

But to save yourself the hassle just instance it like this:

import hcOffcanvasNav from 'hc-offcanvas-nav';

const Nav = new hcOffcanvasNav('#main-nav', {
    disableAt: false,
    customToggle: $('.toggle'),
    levelSpacing: 40,
    navTitle: 'MENÚ PRINCIPAL',
    labelClose: 'Cerrar',
    labelBack: 'Atrás',
    levelTitles: true,
    levelTitleAsBack: true,
    pushContent: '#container',
    insertClose: 2
});

[somewebmedia]

Just update to new v5.0.4 I just published, I actually forgot to return the main function. :)

[glavrjk]

ggle: $('.toggle'),

I'ts still not working man. I'm using the symfony's webpack. I took your recommendation and i deleted the $ import and it's fine but the library broken with same issue. this my complete app.js

// any CSS you import will output into a single css file (app.css in this case)
import '../css/app.css';
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';
import 'bootstrap';
import 'noty';
import * as hcOffcanvasNav  from 'hc-offcanvas-nav';

$(function () {
// ===========Right Sidebar============
    $('[data-toggle="offcanvas"]').on('click', function () {
        $('body').toggleClass('toggled');
    });
    // ===========Hover Nav============ 
    $('.navbar-nav li.dropdown').on('mouseenter', function () {
        $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(500);
    });
    $('.navbar-nav li.dropdown').on('mouseleave', function () {
        $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(500);
    });
    // ===========Tooltip============
    $('[data-toggle="tooltip"]').tooltip();
    // ===========Mobile Menu============
    $('#main-nav').hcOffcanvasNav({
        disableAt: false,
        customToggle: $('.toggle'),
        levelSpacing: 40,
        navTitle: 'MENÚ PRINCIPAL',
        labelClose: 'Cerrar',
        labelBack: 'Atrás',
        levelTitles: true,
        levelTitleAsBack: true,
        pushContent: '#container',
        insertClose: 2
    });
});

[somewebmedia]

Can you try this code:

// any CSS you import will output into a single css file (app.css in this case)
import '../css/app.css';
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
import $ from 'jquery';
import 'bootstrap';
import 'noty';
import hcOffcanvasNav from 'hc-offcanvas-nav';

$(function () {
// ===========Right Sidebar============
    $('[data-toggle="offcanvas"]').on('click', function () {
        $('body').toggleClass('toggled');
    });
    // ===========Hover Nav============ 
    $('.navbar-nav li.dropdown').on('mouseenter', function () {
        $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(500);
    });
    $('.navbar-nav li.dropdown').on('mouseleave', function () {
        $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(500);
    });
    // ===========Tooltip============
    $('[data-toggle="tooltip"]').tooltip();
    // ===========Mobile Menu============
    new hcOffcanvasNav('#main-nav', {
        disableAt: false,
        customToggle: $('.toggle')[0],
        levelSpacing: 40,
        navTitle: 'MENÚ PRINCIPAL',
        labelClose: 'Cerrar',
        labelBack: 'Atrás',
        levelTitles: true,
        levelTitleAsBack: true,
        pushContent: '#container',
        insertClose: 2
    });
});

[somewebmedia]

@glavrjk did you manage to get it to work?

[glavrjk]

@glavrjk did you manage to get it to work?

thank you so much you solution worked for me...! Sorry for the delay

[somewebmedia]

No problem, glad I could help.