Aurelia skeleton-esnext-webpack with zurb foundation 6.2,3

Question

I am trying to use Zurb Foundation 6.2.3 with Aurelia, I started to use skeleton-esnext-webpack. The problem that I am running into is when i try to initialize $(document).foundation(). Below is snippet from my main.js

const rootElement = document.body;
rootElement.setAttribute('aurelia-app', '');
await aurelia.start().then(a => a.setRoot('app', rootElement)).then(a => {
$(document).foundation();
    console.log('foundation loaded')
});

I am new to webpack and esnext, but based on my understanding I need to include foundation using require or import. Can someone point me in the right direction and guide me in resolving this problem?

Your help is greatly appreciated.

Regards, TiKi

Answer 1

As it turns out what was happening was two part problem. one zurb foundation is not jQuery 3.0 compliant and second webpack was pulling in transitive dependencies. I ended up including jquery-migrate 1.3.0 as dependency and also updated the webpack.config.js with resolve alias as below to make sure that jQuery was only loaded once.

resolve: {
    alias: {
        'jquery': path.resolve(path.join(__dirname, 'node_modules', 'jquery'))
    }
}