Daniel Hult Posted February 21, 2020 Share Posted February 21, 2020 Hi guys, Im trying to import the MorphSVG plugin in a Nuxt project. I've seen some threads here that there has been some confusion about how to import them and I just want to know what you guys recommend. In the image below I've imported gsap as usual and put the morphSVG plugin and the registration inside an if to not run on the server. Inside the mounted hook Im trying to console log the morphSVG plugin, but get an error in the console (2nd image). Anybody know what Im doing wrong? Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 21, 2020 Share Posted February 21, 2020 Hey Daniel. That error message makes it seem like you're trying to load the modules version of GSAP but your system doesn't seem to work with modules. We recommend that you use the UMD version instead. If you want to use the require syntax you can do so like so: const { gsap } = require("gsap/dist/gsap"); const { MorphSVGPlugin } = require("gsap/dist/MorphSVGPlugin"); gsap.registerPlugin(MorphSVGPlugin); Our install helper is incredibly handy for learning the right syntax Link to comment Share on other sites More sharing options...
Daniel Hult Posted February 21, 2020 Author Share Posted February 21, 2020 That doesn't seem to fix the problem unfortunately Link to comment Share on other sites More sharing options...
Daniel Hult Posted February 21, 2020 Author Share Posted February 21, 2020 Also this returned undefined. I had to remove the .default at the end. const { gsap } = require("gsap/dist/gsap").default; Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 21, 2020 Share Posted February 21, 2020 Can you send a minimal ZIP of your project? I'll test some things locally. CodePen or something would also be fine. Link to comment Share on other sites More sharing options...
OSUblake Posted February 21, 2020 Share Posted February 21, 2020 Please read this thread. It's much easier if you tell nuxt to transpile gsap. You're didn't install it. Please watch this video. @ZachSaucier You forgot to remove the .default part when you added the brackets. It should just be. const { gsap } = require("gsap/dist/gsap"); 2 Link to comment Share on other sites More sharing options...
Daniel Hult Posted February 21, 2020 Author Share Posted February 21, 2020 Sure! Where do I send it to? Link to comment Share on other sites More sharing options...
Daniel Hult Posted February 21, 2020 Author Share Posted February 21, 2020 I will try and watch the video and see if that helps first! Thanks @OSUblake Link to comment Share on other sites More sharing options...
OSUblake Posted February 21, 2020 Share Posted February 21, 2020 Just now, Daniel Hult said: I will try and watch the video and see if that helps first! Thanks @OSUblake And also go through that thread I linked to. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 21, 2020 Share Posted February 21, 2020 5 minutes ago, OSUblake said: You forgot to remove the .default part when you added the brackets. Sorry, I wasn't aware that I needed to. I'll get that fixed today. Working on another piece of the installation page at the moment. 1 Link to comment Share on other sites More sharing options...
Daniel Hult Posted February 21, 2020 Author Share Posted February 21, 2020 Very helpful @OSUblake - this solved the issue I was having. I wasn't aware of the gsap-bonus.tgz file that I can add to install them with NPM/Yarn. So the final code after following the video above was: import { gsap } from 'gsap'; import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'; if (process.client) { gsap.registerPlugin(MorphSVGPlugin); } 3 Link to comment Share on other sites More sharing options...
OSUblake Posted February 21, 2020 Share Posted February 21, 2020 11 minutes ago, ZachSaucier said: Working on another piece of the installation page at the moment. You might want add to the install page about how to get nuxt SSR working by letting it transpile gsap, and using process.client. 1 Link to comment Share on other sites More sharing options...
Daniel Hult Posted February 21, 2020 Author Share Posted February 21, 2020 Sorry, actually there must've been a hiccup here. I get an syntax error when Im trying to import the MorphSVGPlugin. Have you seen this error before? Link to comment Share on other sites More sharing options...
Daniel Hult Posted February 21, 2020 Author Share Posted February 21, 2020 Okay, I see you had to put this inside the build settings in nuxt.config: Now it works! Sorry again build: { /* ** You can extend webpack config here */ extend() {}, transpile: ['gsap'], }, 2 Link to comment Share on other sites More sharing options...
OSUblake Posted February 21, 2020 Share Posted February 21, 2020 Yes. That's the key!!! 1 Link to comment Share on other sites More sharing options...
Christos Tsangaris Posted December 2, 2020 Share Posted December 2, 2020 Hi, Maybe something else is happening in my case since i am using what mentioned above and still get "gsap not defined". Feel free to check code blocks below. I dont understand why this is not working. I am on latest Nuxt version (2.14). Thanks! Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 2, 2020 Share Posted December 2, 2020 @Christos Tsangaris I'm not a Nuxt guy, but shouldn't the plugins that you're loading in your config.js file actually be the GSAP files? Not some file where you're importing GSAP? The imports and registering of the plugins usually go in the files where you want to use GSAP and the plugins. Link to comment Share on other sites More sharing options...
Christos Tsangaris Posted December 2, 2020 Share Posted December 2, 2020 4 minutes ago, ZachSaucier said: @Christos Tsangaris I'm not a Nuxt guy, but shouldn't the plugins that you're loading in your config.js file actually be the GSAP files? Not some file where you're importing GSAP? The imports and registering of the plugins usually go in the files where you want to use GSAP and the plugins. Hi @ZachSaucier, thanks for the reply! Actually you import everything you need in a plugin (first image) and then you use this plugin inside the config.js file of Nuxt. This way its cleaner. Link to comment Share on other sites More sharing options...
GreenSock Posted December 2, 2020 Share Posted December 2, 2020 I have zero experience with Nuxt, so I can't help much here but why do you have the trailing "/" in your gsap import? import { gsap } from "gsap/"; // <- weird import { gsap } from "gsap"; // correct You could also try importing the UMD version if your build system needs that - it's in the /dist directory, so you'd import from "gsap/dist/gsap", for example. 1 Link to comment Share on other sites More sharing options...
Christos Tsangaris Posted December 5, 2020 Share Posted December 5, 2020 @GreenSock the “/“ part was a typo while transferring the code to the post. Btw, i have used the UDM approach and had the same issues. Right now i am importing the library in each component i want to use it.. Your documentation really shines, but it would be great to have a section where you guide people using your library in different well known JS frameworks (VueCLI, NuxtJS, NextJS, etc.) 1 Link to comment Share on other sites More sharing options...
Daniel Hult Posted December 7, 2020 Author Share Posted December 7, 2020 This is how I used plugins in nuxt to include Splitting.js in one of my projects. Should be the same for gsap. Try to change this code to relevant gsap code and you should be fine. /plugins/splitting.js let Splitting; if (process.client) { require('splitting/dist/splitting.css'); require('splitting/dist/splitting-cells.css'); Splitting = require('splitting'); } export default Splitting; 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