vmitsaras/js-offcanvas

Uncaught TypeError: Cannot read property 'activeElement' of undefined

OmarRobinson opened this issue · 4 comments

OmarRobinson commented

Hello,

I am using Laravel Mix with Webpack to include js-offcanvas into my vendor.js file. However, when I click the off-canvas-trigger button I get the following error message:

Uncaught TypeError: Cannot read property 'activeElement' of undefined

Here is my setup:

package.js

  "devDependencies": {
    "Modernizr": "https://modernizr.com/download?ambientlight-batteryapi-webp-setclasses",
    "bootstrap": "^4.1.0",
    "js-offcanvas": "^1.2.2",
    "jquery": "^3.1.1",
    "popper.js": "^1.14.3"
     ...
  }

webpack.mix.js

mix.webpackConfig({
    resolve: {
        alias: {
            "jquery": "jquery/src/jquery",
            "popper.js": "popper.js/dist/umd/popper.js",
            "js-offcanvas": "js-offcanvas/dist/_js/js-offcanvas.pkgd.js",
        }
    }
});

mix.autoload({
    "jquery": ["$", "jQuery", "window.jQuery"],
    "popper.js": ["Popper", "window.Popper"]
});

mix.js("resources/assets/js/app.js", "public/js")

mix.extract([
    "jquery",
    "Modernizr",
    "js-offcanvas",
    "popper.js",
    "bootstrap",
]);

HTML

<button type="button" id="js-offcanvas-trigger" class="navbar-toggler">
    <i class="fa fa-bars" aria-hidden="true"></i>
</button>

<aside id="off-canvas-sidenav" class="bg-light d-none">
    ...
</aside>

Javascript

$(function(){

    $(document).trigger("enhance");

    $("#off-canvas-sidenav").offcanvas({
        modifiers: "right,overlay",
        triggerButton: "#js-offcanvas-trigger"
    });

});

More Info

When I try this without Webpack (using CDN) everything works fine. However the package I build doesn't work. Here is the line of code that throughs the error.

if( doc.activeElement ){
    this.lastFocus = doc.activeElement;
}

After looking at the error log the issue seems to be that w.document is a null value. Should this be the window object? If so, it does not seem to be injected in the w variable. It only contains two attributes componentNamespace and utils

Any help getting this to work in Laravel Webpack would be greatly appreciated.

Thanks!

vmitsaras commented

Hey,
can you try to update your modernizr-build (#17)
I think you`ve to add: prefixed & feature-detects.

{
  "minify": true,
  "options": [
    "prefixed",
    "setClasses"
  ],
  "feature-detects": [
    "test/css/transitions"
  ]
}
OmarRobinson commented

I tried researching how to do that in Laravel Mix but no luck so far. I will let you know if I find a solution.

OmarRobinson commented

OK, I will try and let you know the result