fullpage.js with webpack not working

[lukejagodzinski]

Hi, I know that this problem was already discussed but it still doesn't work even if I follow all suggestions. I have react application created using create-react-app tool but I don't think it's important here. It's configured using webpack and babel to allow ES imports.

I've added to my project following packages jquery@3.1.1 and fullpage.js@2.8.8.

Now in my JS code I try different versions:

import jQuery from 'jquery';
import 'fullpage.js';
...
$('#fullpage').fullpage();
// Throws: Cannot find module "jquery"

window.$ = window.jQuery = require('jquery');
import 'fullpage.js';
...
$('#fullpage').fullpage();
// Throws: Cannot find module "jquery"

import 'fullpage.js/jquery.fullpage.js';
...
$('#fullpage').fullpage();
// Throws: Cannot find module "fullpage.js/jquery.fullpage.js"

So I just wonder if the problem was already solved, or I'm doing something wrong.

[alvarotrigo]

I'm not really an expert on webpack. Have you tried as in in http://stackoverflow.com to see what they think about it?

Related https://github.com/alvarotrigo/fullPage.js/issues/2129

[lukejagodzinski]

No I haven't tried as I don't think that stackoverflow is a good place to ask such questions. I'm also not the webpack expert and I hate it but unfortunately it's necessary when using some libraries :).

However I don't think it's a problem related to webpack because when I do:

window.$ = window.jQuery = require('jquery');
require('fullpage.js/jquery.fullpage.js');
...
$('#fullpage').fullpage();
// Throws: Cannot find module "fullpage.js/jquery.fullpage.js"

window.$ = window.jQuery = require('jquery');
require('fullpage.js');
...
$('#fullpage').fullpage();
// Throws: Cannot find module "jquery"

So as you can see there are two problems. The first one is that it can't access file in a package and honestly I'm not expert in that matter. The second problem is that when I use fullpage.js directly it does not see jQuery package as it assumes that it should be global. I just wonder why don't you add jQuery as a dependency in package.json. That would make life easier.

[alvarotrigo]

I just wonder why don't you add jQuery as a dependency in package.json. That would make life easier.

It is already there? Line 27.

[lukejagodzinski]

Oh sorry there is jQuery as a dependency. It's strange that it didn't loaded it and added to the node_packages directory of the fullpage.js package.

[lukejagodzinski]

I assumed that it's not there because you wrote so in one of the issues :)

[lukejagodzinski]

Ok when I've added jQuery as top dependency in my project it somehow makes it invisible for fullpage.js. Now, when I removed jQuery, the fullpage.js package downloaded it's own dependency and an error is different right now:

import $ from 'jquery';
import 'fullpage.js';
...
$('#fullpage').fullpage();
// Throws: (0 , _jquery2.default)(...).fullpage is not a function

and

import $ from 'jquery';
import 'fullpage.js/jquery.fullpage.js';
...
$('#fullpage').fullpage();
// Throws: Cannot find module "fullpage.js/jquery.fullpage.js"

[gorelegacy]

Having the same issue. Tried using resolve.alias: 'fullscreen': fullpage.js/dist/jquery.fullpage.js' in my webpack config to no avail.

could it be the folder name?

[jacobmllr95]

I've create a minimal example application with create-react-app to showcase how easy it is to get React and fullPage.js working together.

https://github.com/jackmu95/react-fullpage

[jlmakes]

I didn't try @jackmu95's demo, but I did notice a discrepancy in the original poster's code and the proposed solutions of #2129.

Now in my JS code I try different versions...

import 'fullpage.js/jquery.fullpage.js';
...
$('#fullpage').fullpage();
// Throws: Cannot find module "fullpage.js/jquery.fullpage.js"

According to this comment in #2129, jquery.fullpage.js should be camelCase: jquery.fullPage.js

So you end up with:

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

Just swinging in the dark... maybe it helps.

[lukejagodzinski]

@jlmakes I've tried it already and it didn't make any difference. @jackmu95 it's strange because exactly the same code does not work in my project. But when I've cloned your repository it actually works. I will try to investigate this problem later today.

[lukejagodzinski]

I've just made a quick test and updated dependencies versions from:

"fullpage.js": "^2.8.8",
"jquery": "^3.1.1",
"react": "^15.3.1",
"react-dom": "^15.3.1",

to:

"fullpage.js": "^2.8.8",
"jquery": "^3.1.1",
"react": "^15.3.2",
"react-dom": "^15.3.2"

And it works... But I have no idea how React's and ReactDOM's versions could be a problem here...

[karambafe]

It's work for me:

import $ from 'jquery';
import 'fullpage.js/dist/jquery.fullPage.js';

$(document).ready(function() {
   $('#fullpage').fullpage();
});

In node_modules file jquery.fullPage.js located in folder DIST Version fullpage.js "fullpage.js": "2.8.9",

[lukejagodzinski]

As I wrote in the post above it works for me too, it was a problem with versions of dependencies. Closing this issue.

[dengshasha]

I'm alse use create-react-app and I hope it can work. I install fullpage.js and jquery:

npm install jquery fullpage.js --save

and I import some files like this:

import $ from 'jquery';
import 'fullpage.js/dist/jquery.fullpage';
import 'fullpage.js/dist/jquery.fullpage.css';

Because my fullpage item is dynamic. I could't initialize it in componentDidMount,and I do it in componentDidUpdate,but it report Fullpage.js can only be initialized once and you are doing it multiple times! So I use a flag:

this.status = false;
componentDidUpdate() {
        if (this.status) {
            $("#fullpage").fullpage({
                anchors: ['WeChat', 'Asthma', 'OpsX', 'News'],
                navigation: true,
                navigationPosition: 'right',
                css3: true,
                responsiveWidth: 1400,
                responsiveHeight: 700,
            });
            this.status = false;
        }
    }

It can work. But ~ when I leave this page, It has another report:Uncaught TypeError: Cannot read property 'top' of undefined in 1023. I don't how to solve it.Anyone can solve it? Thanks!