Fullpage.js: Not working with webpack 3

[yonathan06]

Description

Hi, Tried several approaches to make fullpage.js work with webpack v3

First approach:

//@ main.js
import 'fullpage.js/dist/jquery.fullpage' // || import 'fullpage.js'

$(document).ready(function() {
    $('#fullpage').fullpage() //$(...).fullpage is not a function
})

//@ webpack.config.js
plugins: [
 new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  }),
  ...
]

Second approach:

//@ main.js
import $ from 'jquery'
import 'fullpage.js/dist/jquery.fullpage'  // || import 'fullpage.js'

$(document).ready(function() {
    $('#fullpage').fullpage() //(0 , _jquery2.default)(...).fullpage is not a function
})

Versions

webpack: 3.0.0
fullpage.js: ^2.9.4
jquery: ^3.2.1

saw few discussions regarding webpack, but none of the is using v3
did anyone encountered it?

[PeterBielak]

Hello guys, this is what works for me. Please note you have to be using JavaScript ES6.
Hope it helps a bit.

$npm install --save jquery
$npm install --save fullpage.js

webpack.config.js

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
]

in your .js file

import fullpage from "fullpage.js"

[yonathan06]

thanks @PeterBielak. I Moved to Typescript and it solved the issue
in my webpack.config.js I added to module.rules this:

{
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
}

and added two entries, app.ts and vendors.ts

at vendors.ts I used a simple import statement

import 'fullpage.js'

and it works!