Scrollmagic: webpack import not working with create-react-app

[yougotashovel]

Trying to use GSAP plugin with ScrollMagic in webpack. ScrollMagic works fine on its own, can't get the plugins to work.

import * as ScrollMagic from 'scrollmagic'
import 'scrollmagic/scrollmagic/minified/plugins/animation.gsap.min'

Have tried a few variations of the above, no luck yet.

Here's the current error:

./~/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js
Module not found: `/project/node_modules/ScrollMagic/scrollmagic/uncompressed/ScrollMagic.js` does not match the corresponding path on disk `scrollmagic`.

Anybody know why? Thanks

[alide]

Same problem here (I'm using ReactJS's create-react-app utility to create my project, I'm not using Webpack). Any solution?

[yougotashovel]

@alide create-react-app uses webpack you just can't see it until you eject, which then allows you to see the webpack configuration files.

For anyone needing a work around:

1. eject from create-react-app first: npm run eject
2. editing the following files: config/webpack.config.dev.js and config/webpack.config.prod.js

module.exports = {
  ...
  resolve: {
    ...
    alias: {
      "TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
      "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
      "TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
      "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
      "ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
      "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
      "debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),
    },
    ...
  },
  ...
}

Double dependency issues caused by this:

1. If you use import { TweenMax, ... } from 'gsap' like instructed in tutorials TweenMax will get included in the bundle twice from two different locations in node_modules.
2. Workaround is to import from 'TweenMax' instead, so you can do something like this in each component file:

import { TimelineMax, Sine } from 'TweenMax'
import ScrollMagic from 'scrollmagic'
import 'animation.gsap'
import 'debug.addIndicators'

[wisnuprayoga]

hey @yougotashovel i followed this step but still get some error
_Module not found: Can't resolve 'animation.gsap'_

Any solution ?

[FreddyFY]

With this PR you dont have to eject react #684

[kennycrosby]

hey @yougotashovel i followed this step but still get some error
_Module not found: Can't resolve 'animation.gsap'_

Any solution ?

@wisnuprayoga Did you ever figure this out? Ran into this issue.

[wisnuprayoga]

hey @yougotashovel i followed this step but still get some error
_Module not found: Can't resolve 'animation.gsap'_
Any solution ?

@wisnuprayoga Did you ever figure this out? Ran into this issue.

yups i just follow @yougotashovel instruction and it works

[ericnguyen23]

@yougotashovel I've ejected from create-react-app npm run eject but cannot locate config/webpack.config.dev.js or config/webpack.config.prod.js files.

Does anyone know where they are located?

[ericnguyen23]

I found it: 'myprojectpath\node_modules\react-scripts/config/webpack.config.js'

Although I don't see dev or prod.js version however it still fixed the issue.