Scrollmagic: There are multiple modules with names that only differ in casing.

[mutoo]

When requires ScrollMagic with its jQuery Plugin and then pack them with webpack, it says:

WARNING in ./~/ScrollMagic/scrollmagic/uncompressed/ScrollMagic.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* G:\Sites\Secret-Project\node_modules\ScrollMagic\scrollmagic\uncompressed\ScrollMagic.js
    Used by 1 module(s), i. e.
    G:\Sites\Secret-Project\node_modules\scrollmagic\scrollmagic\uncompressed\plugins\jquery.ScrollMagic.js
* G:\Sites\Secret-Project\node_modules\scrollmagic\scrollmagic\uncompressed\ScrollMagic.js
    Used by 1 module(s), i. e.
    G:\Sites\Secret-Project\node_modules\babel-loader\lib\index.js!G:\Sites\Secret-Project\src\entry-client.js

[nkeena]

Any update here? I'm experiencing the same issue

[koole]

It seems like ScrollMagic is importing its scripts using the capitalized name ScrollMagic instead of scrollmagic.

I had this same issue and solved it by also capitalizing it in my own import statements.
So in your _entry-client.js_ you would for example do:

import ScrollMagic from 'ScrollMagic';
import 'ScrollMagic/scrollmagic/uncompressed/plugins/debug.addIndicators'

instead of this:

import ScrollMagic from 'scrollmagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'

This solved the issue for me.

[darbley]

@koole Thanks mon!!!

[koole]

@darbley No problem 👍

[joepagan]

Still getting this myself, npm installs to a directory node_modules/scrollmagic, however @koole solutions doesn't work for me as node_modules/ScrollMagic does not exist and errors out:

3:1   error    'ScrollMagic' should be listed in the project's dependencies. Run 'npm i -S ScrollMagic' to add it                      import/no-extraneous-dependencies
  3:25  error    Casing of ScrollMagic/scrollmagic/uncompressed/ScrollMagic.js does not match the underlying filesystem                  import/no-unresolved
  4:1   error    'ScrollMagic' should be listed in the project's dependencies. Run 'npm i -S ScrollMagic' to add it                      import/no-extraneous-dependencies
  4:8   error    Casing of ScrollMagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js does not match the underlying filesystem  import/no-unresolved

Guess I can't npm this one and will install to another dir.

Update:
So, it appears that this issue is caused by debug.addIndicators including ScrollMagic library itself, so it's treated as a 2nd import. But, it's path uses the different casing.

You can comment out the lines at the top of the plugin file, so stop it from being imported, but, it still thinks that the plugin has not being loaded :(

if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['ScrollMagic'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        // factory(require('scrollmagic')); // This is the line...
    } else {
        // no browser global export needed, just execute
        factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic));
    }

[egarofalo]

I have the same issue. In Windows compile successfull with this warning, but in Linux environments the compilation crash, because is case sensitive.

@joepagan you can replace the line define(['ScrollMagic'], factory); with this define(['scrollmagic'], factory);, andthis final is the correct way, because the ScrollMagic package folder installed with yarn or npm is in lowercase: scrollmagic. Therefore this is an issue of the library.

[egarofalo]

Hopefully the manufacturer will notice this error and correct it.

[joepagan]

@egarofalo as this was some time ago the project I was working on needed to be completed, I abandoned working with this package because of these issues in favor of one that worked. I no longer have an suitable project though shouldn't take long to set up a minimal working webpack project yourself if you wanted.