Igor Cher Posted February 20 Share Posted February 20 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. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted February 20 Solution Share Posted February 20 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now