Fullpage.js: Not support webpack?

[rayliao]

After installed fullpage.js by npm, and I used it throught webpack like this:

import 'fullpage.js';

$(function() {
    $('#fullpage').fullpage({
        navigation: true
    });
});

then output error like this:

jQuery.Deferred exception: $(...).fullpage is not a function 
TypeError: $(...).fullpage is not a function

[alvarotrigo]

You might need to use jquery.fullpage.js. Not just fullpage.js.

fullPage.js provides support for the universal module definition (UMD), which includes AMD, commonJS and node modules.

[ghost]

For anyone who might still be confused, it works if you import it like this:

import 'fullpage.js/jquery.fullpage.js';

[shavidzet]

@rravikot I've imported just like you but the problem is same :)

[alvarotrigo]

@ShavidzeT are you using the latest fullpage.js version? 2.8.5 ?
There was an issue which was solved in 2.8.5 regarding webpack and commonJs

[shavidzet]

@alvarotrigo Problem has been solved.
I have created vendor.entry.js source file with following content

window.$ = window.jQuery = require('jquery')
import 'fullpage.js/jquery.fullPage.js'

and bundle of this file is imported in html above application logic bundle

[edwardfhsiao]

i had the same error TypeError: $(...).fullpage is not a function when working my project with [email protected] (using webpack).
Then I tried to downgrade it to [email protected].
It wont work at first, however I found there was a node_modules directry contains another jquery inside the fullpage.js.
After removing it, fullpage.js worked.

├── node_modules
│ ├── fullpage.js
│ │ ├── README.md
│ │ ├── jquery.fullPage.js
│ │ ├── package.json
│ │ ├── jquery.fullPage.css
│ │ ├──vendors
│ │ └── node_modules
│ │ │ ├── jquery

If anyone had the same problem with fullpage.[email protected] and webpack, maybe could try to downgrade it to fullpage.[email protected] and
rm -rf my_awesome_project/node_modules/fullpage.js/node_modules

Then just

import 'fullpage.js/jquery.fullPage.js';

$('#fullpage').fullpage({
    ...
});

[alvarotrigo]

@edwardfhsiao I don't see why it shouldn't work with 2.8.7. There was a small change in the package.json file but the rest of changes shouldn't interfiere at all as far as I know.

[edwardfhsiao]

@alvarotrigo Yes, You were right. I tried 2.8.7 again and it worked.
The fundamental interfierence is the Jquery inside the fullpage.js/node_modules.
Thanks for your time.

[alvarotrigo]

@edwardfhsiao as far as I know fullPage.js doesn't include any node_modules by default. They are only necessary if you want to create your own build as detailed in the docs. Also, even when doing so, there's no jquery dev dependency in the package.json file.

[edwardfhsiao]

@alvarotrigo yeah, I guess it must be my setting issue which irrelevant to fullpage.js. I also encountered the same problem(multi jquery) with pickadate and ujs in the past. really appreciate