Fullpage.js: Require.js: Uncaught ReferenceError: IScroll is not defined

[khleealton]

Thanks for your awesome library – Fullpage!
My team is currently upgrading the version from 2.7.6 to 2.8.6 in requireJS

However, we met the following JS error:
“Uncaught ReferenceError: IScroll is not defined”

I have tried to include your customized IScroll into the same JS file we are using fullpage.js.
May I know if you have any clue on this?

[alvarotrigo]

It is due to the use of requiere.js that won't expose the the IScroll variable globally.

[alvarotrigo]

The problem when using require is that makes dependencies compulsory as far as I know.
And scrollOverflow shouldn't be compulsory.

It seems to be some kind of trick, but I didn't look at it very much to be honest.

[c10854]

I try add this in webpack.config.js, and that work for me

new webpack.ProvidePlugin({
    IScroll: "fullpage.js/vendors/scrolloverflow.min"
})

[alvarotrigo]

@c10854 thanks for the info!!

[Jacodom]

@c10854
Hi, i've tried this solution but it's not working for me. Please, can you paste a bit more of your webpack.config.js file? Thanks!

[alvarotrigo]

This issue should get solved in the next release 2.9.5.
Hopefully a few weeks.

[Jacodom]

Awesome!! thank you very much! wonderful library :D

[wallyzielinski]

Any headway on this? So far I can't get the scrolloverflow plugin to work with requireJS at all.

[alvarotrigo]

I can't get the scrolloverflow plugin to work with requireJS at all.

Easy. Copy the content of scrolloverflow and paste it at the very top of the fullPage file.
This way you'll solve it :)

You just need to make sure it loads before fullpage.js, and this way will do it.

[wallyzielinski]

@alvarotrigo Unfortunately, that doesn't work with RequireJS, I suspect because they are both exporting variables. When I try it, I get an error that fullpage is not a function. Also, it's not ideal for our workflow to have two third-party plugins hacked together in one file. We try to keep a clean directory.

Thus far, our only solution has been to include the script on the page before require, but this is not in our best practice.

If you have an official fix coming for this, do let me know so we can clean things up. Thank you!

[alvarotrigo]

If you have an official fix coming for this, do let me know so we can clean things up.

Not really. As detailed above, the issue is require.js using compulsory dependencies and not optional ones.

[alvarotrigo]

This should be fixed on the dev branch 2.9.5 where big changes have been done in the scrolloverflow.js file and the way it loads.

[Rogant]

@c10854 Works for me thanks! (Vue2 / Webpack)

[vinoth44]

After spending lot of time I have managed to fix this issue.

config file

var config = {
    paths: {
        "IScroll" :        "js/scrolloverflow.min",
        "fullpage":        "js/jquery.fullpage"
    }
};

my script file:

define(["jquery", "IScroll", "fullpage"], function($,IScroll) {
    "use strict";

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

fullpage.js

/ just changed the top section /

(function(global, factory) {
    'use strict';

    if (typeof define === 'function' && define.amd) {
        define(['jquery', 'IScroll'], function($, IScroll) {
          return factory($, IScroll, global, global.document, global.Math);
        });
    } else if (typeof exports === "object" && exports) {
        module.exports = factory(require('jquery'), global, global.document, global.Math);
    } else {
        factory(jQuery, global, global.document, global.Math);
    }
})(typeof window !== 'undefined' ? window : this, function($, IScroll, window, document, Math, undefined) 

[alvarotrigo]

Fixed in 2.9.5

[NicolasEhrhard]

Hello , I've got the version 2.9.5 and it's not fixed for me.

I've got the following error :
Uncaught (in promise): ReferenceError: IScroll is not defined
ReferenceError: IScroll is not defined
at scrolloverflow.min.js:14

[alvarotrigo]

Are you using the latest scrolloverflow.js version too? version 0.0.2 ?

If you still have errors try the dev version 0.0.3.

[pttsky]

I am using webpack and having the same issue. I manually copied scrolloverflow.js v0.0.3 from the dev branch.

import 'fullpage.js/vendors/scrolloverflow';
import 'fullpage.js';

$(document).ready(() => {
    $('#fullpage').fullpage({ /* ... */, scrollOverflow: true });
})

The result is error like:

scrolloverflow.js:2392 Uncaught ReferenceError: IScroll is not defined
    at scrolloverflow.js:2392
    at scrolloverflow.js:2733
    at Object.<anonymous> (scrolloverflow.js:2734)
    at __webpack_require__ (bootstrap 2162fd49c11f037fb8f3:19)
    at Object.defineProperty.value (main.js:15)
    at __webpack_require__ (bootstrap 2162fd49c11f037fb8f3:19)
    at Object.<anonymous> (tether.js:1811)
    at __webpack_require__ (bootstrap 2162fd49c11f037fb8f3:19)
    at module.exports.ctor.super_ (bootstrap 2162fd49c11f037fb8f3:62)
    at bootstrap 2162fd49c11f037fb8f3:62

[alvarotrigo]

@pttsky have you checked this? https://github.com/cubiq/iscroll/issues/1027

[pttsky]

Gracias Álvaro!

I just did yarn add iscroll then put import IScroll from 'iscroll' in the very beginning of vendors/scrolloverflow.js and obviously the error has gone.

But for now I will come with my own solution for scroll overflow since I already have one library apart IScroll for smooth scrolling in my project.

[dante-blitz]

I am also using webpack and v2.9.5 and still having the same issue...

import 'fullpage.js/vendors/scrolloverflow';
import 'fullpage.js';

I get the same error as @pttsky.

Anyone managed to get this working?

[chriz1984]

Still doesn´t work for me with the latest Version of Fullpage and Scrolloverflow

requirejs.config({
    baseUrl: 'js',
    paths: {
        jquery: 'jquery-3.3.1.min',
        IScroll: 'scrolloverflow',
        fullpage: 'jquery.fullPage',
    },
     shim: {
         IScroll: {
               deps: ['jquery']
         },
         fullpage: {
               deps: ['IScroll']
         }
    }
});

and

define(['jquery', 'IScroll', 'fullpage'], function($,IScroll) {
        $('#fullpage').fullpage();  
});

causes

scrolloverflow.js:2393 Uncaught ReferenceError: IScroll is not defined

[davidjr82]

@chriz1984 for me it is working with

window.IScroll = require('./../vendor/iscroll/iscroll.js');

hope this helps.

[minlare]

I solved this in webpack using the following config:

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

EDIT
This has now been proved incorrect as this breaks scrolling in IE11 between sections.
See @mrG0bliN comment on Apr 16 2018 for an update to the issue.
_As yet unresolved_

[c1moore]

I'm still getting this error with the most recent versions. I tried the ProvidePlugin; however, it basically results in

(function(IScroll) {  // IIFE defined by Webpack.
  (function() {
    // Right here a different (local) IScroll is defined.
    function IScroll() { /*...*/ }
  })();

  (function() {
    // Right here the IScroll passed to IIFE defined by webpack is used.
    IScroll.prototype.onWheel = /*...*/;
  })();
})(IScroll);

Since you define IScroll on the window if module/define are not defined anyways, why don't you just do something like

var IScroll;

(function() {
  IScroll = function IScroll() {/*...*/};
})();

(function() {
  IScroll.prototype.onWheel = /*...*/;
})();

This should work in just about any environment (Require.js, Webpack, non-AMD/UMD).

[alvarotrigo]

why don't you just do something like

@c1moore please feel free to provide a pull request for it if you think that's a solution.

[thisVioletHydra]

Uncaught TypeError: Cannot set property 'wheelOn' of undefined
```
webpackProvidePluginConfig = {
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery',
'owl.carousel': 'owl.carousel',
'IScroll': 'fullpage.js/vendors/scrolloverflow.min',
},

import 'fullpage.js/vendors/scrolloverflow.min';
import 'fullpage.js/dist/jquery.fullpage.min';

[minlare]

Using @mrG0bliN setup above, the error is due to window.IScroll not being set on line 2120 of scrolloverflow.js _(module && module.exports are defined in webpack setup)_.

To bypass this issue I implicitly set window.IScroll using https://www.npmjs.com/package/string-replace-loader using the following setup in webpack.config.js.

module.exports = {
  module: {
    rules: [
      {
        test: /scrolloverflow\.js$/,
        use: [{
          loader: 'string-replace-loader',
          options: {
            search: 'IScroll.utils = utils;',
            replace: 'IScroll.utils = utils;window.IScroll = IScroll;'
          }
        }]
      }
    ]
  }
}

Hopefully this will help someone else....
Let me know if anyone comes up with a neater solution.

[rafaelmagalhaes]

@minlare that didn't seem to fix the issue still getting
Cannot set property 'wheelOn' of undefined

[rafaelmagalhaes]

@mrG0bliN did you manage to solve that error ?

[VladlenTsoy]

webpackProvidePluginConfig = {
        '$': 'jquery',
        'jQuery': 'jquery',
        'window.jQuery': 'jquery',
        'owl.carousel': 'owl.carousel',
        'IScroll': 'fullpage.js/vendors/scrolloverflow.min', (DELETE)
},

Delete this "IScroll': 'fullpage.js/vendors/scrolloverflow.min" and code is work

[urbantrout]

@minlare This seems to work. Thanks!