The problem with connecting gsap and ScrollSmoother to the project on the Gulp + Webpack build

[Igor Cher]

Hello. For some reason, it is not possible to connect the gsap library and the ScrollSmooter plugin to your Gulp + Webpack build.
I do everything according to the instructions from your site: I join the gsap club for a free tariff plan, give up the commercial license (because I want to try the plugin for educational purposes), install the library via npm (npm install gsap-trial), connect to my project as follows:

import { gsap } from "gsap-trial";

import { ScrollSmoother } from "gsap-trial/ScrollSmoother";

Next, I prescribe the settings as follows: 

gsap.registerPlugin(ScrollSmoother);

ScrollSmoother.create({

wrapper: '.wrapper-scroll',

content: '.content',

smooth: 1.5,

});

 

As a result, nothing works for me, and the following errors appear in the browser console: 

Uncaught Error: Cannot find module 'gsap-trial/ScrollSmoother'
    at webpackMissingModule (modules.js:1:8)
    at ./src/js/files/script.js (modules.js:1:8)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/js/app.js (log.js:81:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:6:1
    at startup:6:1
webpackMissingModule @ modules.js:1
./src/js/files/script.js @ modules.js:1
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/js/app.js @ log.js:81
__webpack_require__ @ bootstrap:24
(анонимная) @ startup:6
(анонимная) @ startup:6
index.js:493 [webpack-dev-server] Errors while compiling. Reload prevented.
logger @ index.js:493
(анонимная) @ index.js:634
error @ index.js:156
errors @ index.js:280
(анонимная) @ socket.js:62
client.onmessage @ WebSocketClient.js:45
index.js:493 [webpack-dev-server] ERROR in ./src/js/files/script.js 8:0-59
Module not found: Error: Can't resolve 'gsap-trial/ScrollSmoother' in '/Users/i.cheernyshov/Desktop/Fyrre/src/js/files'
Did you mean 'ScrollSmoother.js'?
BREAKING CHANGE: The request 'gsap-trial/ScrollSmoother' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
logger @ index.js:493
(анонимная) @ index.js:634
error @ index.js:156
errors @ index.js:289
(анонимная) @ socket.js:62
client.onmessage @ WebSocketClient.js:45
favicon.ico:1 
        
        
       GET http://192.168.0.103:8080/favicon.ico 404 (Not Found)
index.js:485 [webpack-dev-server] App updated. Recompiling...
index.js:493 [webpack-dev-server] Errors while compiling. Reload prevented.
logger @ index.js:493
(анонимная) @ index.js:634
error @ index.js:156
errors @ index.js:280
(анонимная) @ socket.js:62
client.onmessage @ WebSocketClient.js:45
index.js:493 [webpack-dev-server] ERROR in ./src/js/files/script.js 7:0-59
Module not found: Error: Can't resolve 'gsap-trial/ScrollSmoother' in '/Users/i.cheernyshov/Desktop/Fyrre/src/js/files'
Did you mean 'ScrollSmoother.js'?
BREAKING CHANGE: The request 'gsap-trial/ScrollSmoother' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

 

Please help me connect the library and plugin to my project correctly so that everything works. I will be very grateful.

[Rodrigo]

Hi,

 

I haven't used Gulp in many years but maybe you could import ScrollSmoother from the dist folder in order to use the UMD module instead of the ES module:

import gsap from "gsap-trial";
import { ScrollSmoother } from "gsap-trial/dist/ScrollSmoother";

// Remember to register your plugins to avoid tree shaking
gsap.registerPlugin(ScrollSmoother);

Hopefully this helps.

If you keep having issues, please try to create a minimal demo, maybe on replit: https://replit.com/

Happy Tweening!