Jump to content
Search Community

Importing Plugins in Nuxt.js

microeinhundert test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I too just purchased a license and am having trouble importing my CustomEase plugin into Nuxt. 
TweenMax is working fine for me. 

 

I just followed Dipscom's instructions and I am getting 'Missing stack frames' in the browser. 

Link to comment
Share on other sites

Welcome to the forums, @H0BB5. And thanks for being a Club member!

 

Sorry to hear about the trouble. I've never used Nuxt, so I'm probably not the best person to answer your question, but have you tried the ES Module version as well as the UMD version of the plugin file? I'm not sure what Nuxt prefers, but we provide both for flexibility. I've never heard of "missing stack frames". This definitely sounds like more of a Nuxt issue than a GSAP question. I sure wish I had a great answer for you. 

Link to comment
Share on other sites

Hi H0BB5,

 

Can you show us how you've imported the CustomEase plugin? And, as asked by Jack, did you use the version for the NPM bundling?

 

I do agree with Jack, it does sounds like it's something else, not related to GSAP. Is webpack compiling correctly or are you getting errors in your terminal?

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hi @wisead. Welcome to the forums. Can you provide more details? What errors are you getting? Which file are you using (ES module, UMD, minified)? Do you have a reduced test case you can provide that reproduces the error? We know it works with Nuxt.js, as it seems plenty of others have done so successfully, but I'm not sure what configuration is necessary on the Nuxt side of the equation. It'd definitely help get you a better quality answer if you provided a reduced test case (or at least a few more details). We'd like to help. 

 

Cheers!

  • Like 1
Link to comment
Share on other sites

16 hours ago, GreenSock said:

Hi @wisead. Welcome to the forums. Can you provide more details? What errors are you getting? Which file are you using (ES module, UMD, minified)? Do you have a reduced test case you can provide that reproduces the error? We know it works with Nuxt.js, as it seems plenty of others have done so successfully, but I'm not sure what configuration is necessary on the Nuxt side of the equation. It'd definitely help get you a better quality answer if you provided a reduced test case (or at least a few more details). We'd like to help. 

 

Cheers!

Thank you for response. I've find the best way to resolve this problem. That's how i did it:

- just copy and paste "minified" folder in "plugins" directory of your project. Then go to "plugins/minfied/plugins" open any plugin file and enter the following code in the file

export default (app) => {
 	//...plugin code here 
}

 

- then in nuxt.config.js file

plugins: [
  { src: '~plugins/minified/plugins/PluginFileName.js', ssr: false },
  { src: '~plugins/minified/plugins/OneMorePluginFileName.js', ssr: false },
],

 

and it works

  • Like 1
Link to comment
Share on other sites

Oh, interesting. It kinda sounds like you just needed an ES Module file - did you try using the ones that come in the download? In other words, it appears as if you're using the minified ES5 file, dropping it into a module wrapper, and using that instead of just using the regular ES module files from GreenSock. I mean, it's totally fine if your solution is working for you - I'm just saying you might not need any workaround at all if you use the correct ES module files. :)

Link to comment
Share on other sites

Right everybody, I've taken some time to dive in and look for the most distilled way to import GSAP plugins into Nuxt.

 

Bellow is a repository with the bare minimum needed to run GSAP and ANY of its plugins. I have only left Draggable and some commented out ThrowProps to avoid excessive code confusing people but the gist of the thing is the same.

 

The summary: Use the UMD version of GSAP. It really works out of the box if you do so. All of the other errors I have seen people report here seem to stem from the fact that people (myself included) have been using the ES modules version.

 

For my part, @nicoladelazzari , I apologise as I gave you incorrect information. The error you posted the screenshot of was caused by using the ES modules version of GSAP.

 

The example repo:

https://github.com/dipscom/nuxt-gsap-plugins

  • Like 1
  • Thanks 4
Link to comment
Share on other sites

On 4/30/2019 at 8:11 PM, Dipscom said:

Right everybody, I've taken some time to dive in and look for the most distilled way to import GSAP plugins into Nuxt.

 

Bellow is a repository with the bare minimum needed to run GSAP and ANY of its plugins. I have only left Draggable and some commented out ThrowProps to avoid excessive code confusing people but the gist of the thing is the same.

 

The summary: Use the UMD version of GSAP. It really works out of the box if you do so. All of the other errors I have seen people report here seem to stem from the fact that people (myself included) have been using the ES modules version.

 

For my part, @nicoladelazzari , I apologise as I gave you incorrect information. The error you posted the screenshot of was caused by using the ES modules version of GSAP.

 

The example repo:

https://github.com/dipscom/nuxt-gsap-plugins

 

Hi @Dipscom, thanks for your help I really appreciate it.

 

Everything is fine even if I have to add an es-lint custom rules on my component and delete a trailing space from the plugin file:

 

<script>
/* eslint-disable no-unused-vars */
import TweenMax from 'gsap/umd/TweenMax'
import Draggable from 'gsap/umd/Draggable'
import ThrowPropsPlugin from '~/assets/js/vendor/ThrowPropsPlugin'

export default {
  mounted() {
    Draggable.create(obj, { throwProps: true })
  }
}
/* eslint-enable no-unused-vars */
</script>

 

Now it's working ?

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 months later...

Thanks for all of the info on this thread.

I'm a Shockingly Green member, learning vue and nuxt, and trying to integrate GSAP right now.

 

I used the cdn to add regular GSAP functions and that's working fine.

 

I also downloaded the 'bonus-files-for-npm-users' and placed the umd version of the files in assets/js/vendor/umd .

 

Could someone give a code sample of how to use one of the bonus files / scripts

 

I've tried SplitText and ThrowPropsPlugin but have not gotten either to work.

 

Have tried placing the following code in the script section of the main index.vue page 

import ThrowPropsPlugin from '~/assets/js/vendor/umd/ThrowPropsPlugin'

(along with similar variants )

import {ThrowPropsPlugin} from '~/assets/js/vendor/umd/ThrowPropsPlugin'

import ThrowPropsPlugin from '~/assets/js/vendor/umd/ThrowPropsPlugin.js'

import ThrowPropsPlugin from '~assets/js/vendor/umd/ThrowPropsPlugin.js'

import ThrowPropsPlugin from './assets/js/vendor/umd/ThrowPropsPlugin.js'

 

App failed to load in these instances.

 

With SplitText, the app loaded in localhost:3000, but when I clicked on text to trigger a function using SplitText, I got this error message: 

_assets_js_vendor_umd_SplitText__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor

An error occurred while rendering the page. Check developer tools console for details.

 

Would appreciate help in getting this to work.

Link to comment
Share on other sites

Hi @Dipscom - 

 

Yes, I've been through that repo - and I have an account on CodePen for testing and sharing, but I'm not sure how to share a nuxt application there.

If that's possible, I'm happy to create a very simple nuxt application and just work on importing the premium gsap scripts/plugins.

 

For now, I've pasted code below showing my import statement for SplitText - and this gives me the following error:

"export 'default' (imported as 'SplitText') was not found in '~/assets/js/vendor/umd/SplitText'        

 

 

<script>
import gsap from 'gsap'
import SplitText from '~/assets/js/vendor/umd/SplitText'
 
export default {
 
data() {
return {
}
},
 
 
methods: {
dragBlueSquare: function(){
Draggable.create(".blue");
}
},
 
methods: {
runSplit: function(){
var mySplitText = new SplitText("#mysplit", {type:"words", position:"absolute"});
// console.log(mySplitText.words);
TweenMax.staggerFrom(mySplitText.words, .5, {opacity:0, rotation:-180, y:-100, ease:Back.easeOut}, .02);
},
// TweenMax.staggerFrom(".nuxtlink", .6, {x:"+=500", y:"+=550", opacity:.25, rotation: 720, scale:.1}, .03)
},
 
}
Link to comment
Share on other sites

Additional note to post above, 

First, I don't see a way to post an image here, but I've double checked my path to the premium gsap plugins and the files are indeed in assets/js/vendor/umd  (I've tried placing them directly in the vendor directory as well instead of a umd subfolder, but I get the same errors)

 

When I try to import one of the Premium Plugins, I'll get the following errors/warnings, which tell me to install the Plugins via npm, but when I try to do that, they throw another error, saying no package.json file is contained.  Here are those errors for both SplitText and ThrowPropsPlugin:

 

 

 

WARN  in ./pages/gorgons_grotto/gsap_tests/index.vue?vue&type=script&lang=js&                                                                friendly-errors 10:49:37
 
"export 'default' (imported as 'SplitText') was not found in '~/assets/js/vendor/umd/SplitText'  
 
ERROR  Failed to compile with 1 errors                                                                                                       friendly-errors 12:59:52
 
This dependency was not found:                                                                                                                friendly-errors 12:59:52
                                                                                                                                              friendly-errors 12:59:52
* ~/assets/vendor/umd/ThrowPropsPlugin in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/gorgons_grotto/gsap_tests/index.vue?vue&type=script&lang=js&
                                                                                                                                              friendly-errors 12:59:52
To install it, you can run: npm install --save ~/assets/vendor/umd/ThrowPropsPlugin      
 
PS D:\Users\Robert\Documents\WEBSITES\nuxt\ygnuxt> npm install --save ~/assets/vendor/umd/ThrowPropsPlugin
npm ERR! code ENOLOCAL
npm ERR! Could not install from "C:\Users\Robert\assets\vendor\umd\ThrowPropsPlugin" as it does not contain a package.json file.
Link to comment
Share on other sites

Gosh, this error sure sounds like you're using the ES Module files: 

Quote

"export 'default' (imported as 'SplitText') was not found in..."

 

UMD files don't even use the word "export" with "default". Are you absolutely positive you're using the correct files? One way you can check is to just crack one open and at the top, the ES Module files will have "import" statements as well as "export" statements at the bottom. There should be a "umd" directory inside the "bonus-files-for-npm-users" folder of your download zip - that's where you'll find the UMD files (those won't have "import" at the top, and probably won't have the word "default" anywhere near exports).

 

Like @Dipscom said, it's definitely best to see a reduced test case that we can use to reproduce the issue.  I really want to help, but feel like my hands are tied a bit (and frankly, I'm not at all familiar with Nuxt). 

Link to comment
Share on other sites

Hi @Jack ,

 

These are the UMD version.  After a commented section, they start with var _gsScope   and I do not see any import statements at the beginning or exports at the end. (I opened the regular ES versions and see the imports and exports you mentioned).

 

I'm happy to create a 'reduced test case' with the simplest version of a nuxt file just to see how to successfully import the premium gsap files.

Is there a way to post that project to CodePen? Or should I set for universal and and use npm run generate and then share the dist folder?
I imagine I'm just missing a line somewhere or off in my syntax, but right now that means I can't use the premiums at all :(  

Link to comment
Share on other sites

@Lack and @Dipscom - 

 

Started from scratch with a basic nuxt project and deleted the logo (which @Dipscom noted has animation that could conflict with GSAP) - so all I have left is a single page with a title and a subtitle.

 

Am now able to get the Premium plugins working.

 

Not sure if I just had an incorrect path in my original project (because I'd tried many, and at one point was missing js/ from one of the paths) - or if it was that I'd missed one of the animation bits in the CSS. But working through all of that now.

 

Thanks to both of you for your help and I can't wait to get GSAP running with this!

 

 

Link to comment
Share on other sites

I've tested several of the Premium plugins, and those are all working. But I haven't been able to get any of the Premium items without plugins in their names to work - such as SplitText.js and GSDevTools.js   Do those require a different method to bring them into nuxt?

 

import PhysicsPropsPlugin from '~/assets/vendors/PhysicsPropsPlugin'
import CustomBounce from '~/assets/vendors/CustomBounce'
import GSDevTools from '~/assets/vendors/GSDevTools'
 

I'm not getting an error that prevents the initial load, but if I invoke it in a function, the app fails, with a 500 error, saying object undefined. (had similar results when trying to use SplitText)

runScramble: function(){
TweenLite.to("#mysplit", 3, {scrambleText:"THIS IS NEW TEXT"});
GSDevTools.create();

 

$metaInfo:Object
meta:Array[1]
title:"Cannot read property 'create' of undefined"
message:"Cannot read property 'create' of undefined"
statusCode:500

 

Getting closer - thanks for any help.

Link to comment
Share on other sites

Hm, I'm not sure what could be the problem there, @mosk. I'm not aware of anything substantially different about those. I doubt this would help, but have you tried putting ".js" at the end of the import files? Maybe try making sure they're in the correct directory structure, like /vendors/utils/GSDevTools (notice "utils"), and the main TweenLite (and other non-plugin) files one directory up? I'm totally guessing at things here. 

Link to comment
Share on other sites

17 hours ago, mosk said:

I'm not sure how to share a nuxt application there.

 

CodePen is great for small interfaces and code snippets. You can use their 'Projects' to create full applications but you'll be limited by your account tier.

 

For bigger applications or frameworks like Nuxt, CodeSandbox is a good option. Between CodePen and CodeSandbox you should be able to create anything your heart desire.

 

Not that it helps much here as you're having issues with the Premium Club Greensock plugins. We kindly ask you to not put any of the premium plugins on open repositories or online editors.

 

As for your issue, I don't see anything sticking out from reading your posts. What I'll do is, as soon as I find a little bit of downtime at work, I'll try and create a working prototype with the plugins you seem to be having an issue. Do you have a preference to any of them?

 

  • Like 2
Link to comment
Share on other sites

9 hours ago, GreenSock said:

Hm, I'm not sure what could be the problem there, @mosk. I'm not aware of anything substantially different about those. I doubt this would help, but have you tried putting ".js" at the end of the import files? Maybe try making sure they're in the correct directory structure, like /vendors/utils/GSDevTools (notice "utils"), and the main TweenLite (and other non-plugin) files one directory up? I'm totally guessing at things here. 

 

Hi @Jack - thanks for the suggestions. Tried adding ".js" without effect, and tried the directory structure you mentioned with utils, but that doesn't fix things either.

 

5 hours ago, Dipscom said:

 

CodePen is great for small interfaces and code snippets. You can use their 'Projects' to create full applications but you'll be limited by your account tier.

 

For bigger applications or frameworks like Nuxt, CodeSandbox is a good option. Between CodePen and CodeSandbox you should be able to create anything your heart desire.

 

Not that it helps much here as you're having issues with the Premium Club Greensock plugins. We kindly ask you to not put any of the premium plugins on open repositories or online editors.

 

As for your issue, I don't see anything sticking out from reading your posts. What I'll do is, as soon as I find a little bit of downtime at work, I'll try and create a working prototype with the plugins you seem to be having an issue. Do you have a preference to any of them?

 

 

Hi @Dimscom - thanks for pointing me to CodeSandbox. May not help with this specific problem, since trying to get premium scripts working (and won't post those there) - but may use this in future for general help.

 

Would be fantastic if you could show a working prototype.  In terms of 'preferred' premiums, maybe start with GSDevTools and SplitText. I'd like to be able to use all of GSAP's tools, obviously, and I'm hoping once we figure out how to get one working, the rest will follow the same pattern.

I'm going to do some more testing today, and will post back later once I've seen which items I can get working and which ones I can't. (curious to see if it's really that all the premiums with 'plugin' in their name work and all the others don't - or if that was just with the few I'd tested.  In terms of versions of software I'm using, it should be the latest versions for node.js / npm / nuxt / and gsap - working on a Windows 10 Pro PC - let me know if I should provide specific version numbers)

 

More later - thank you for your help.

Link to comment
Share on other sites

Further testing: 

 

If I try to invoke GSDevTools, SplitText, CustomBounce, CustomEase, and CustomWiggle in functions, I get the following warnings upon compiling:
  • WARN  in ./pages/index.vue?vue&type=script&lang=js&       friendly-errors 13:34:03
  • "export 'default' (imported as 'GSDevTools') was not found in '~/assets/vendors/GSDevTools'  
  • "export 'default' (imported as 'SplitText') was not found in '~/assets/vendors/SplitText'   
  • "export 'default' (imported as 'CustomBounce') was not found in '~/assets/vendors/CustomBounce'
  • "export 'default' (imported as 'CustomEase') was not found in '~/assets/vendors/CustomEase'
  • "export 'default' (imported as 'CustomWiggle') was not found in '~/assets/vendors/CustomWiggle'
And if I click on a div to actually trigger the function while running on server/localhost:3000, app crashes and says:
  • vendors.app.js:393 error TypeError: Cannot read property 'create' of undefined

 

Next, I'll test the Premium scripts that include the word 'plugin' - but so far I have not run into issues with those so far.

Link to comment
Share on other sites

My advice... 

GSAP works as a global. Stop wasting your time trying to import it and just load it through normal script tags. Your animation code will work just fine without the imports. 

 

All these importing problems should be resolved in the next version of GSAP

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...