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

Hey OSUblake

First off - thank you for pointing me toward Vue (which ultimately led me to Nuxt as well) a couple of months ago. Great framework that should ultimately let me do all of the cool website stuff I was hoping to do.

 

Regarding import vs script tags, I am using all of the non-premium parts of GSAP through script tags to access the CDN

It's just the Premium scripts and plugins (available in Shockingly Green as a download) that I'm trying to incorporate at this point.

 

(and @Dipscom has reproduced at least part of the issue on his end)

 

 

 

Link to comment
Share on other sites

4 minutes ago, OSUblake said:

PS: You're mixing es modules and umd imports which messes stuff up. 

 

Sorry -this snippet came in right after my initial response.

 

I've downloaded the umd versions of the Premium scripts, added them to an assets/vendors directory, and have been  importing those.

 

but elsewhere, I do use a generic:  import gsap from 'gsap' 

and I did use:      npm install --save gsap 

 

Is there a different way to do that to avoid mixing ES and UMD in case that's the problem?

Link to comment
Share on other sites

I'm on mobile right now so it's hard for me to give detailed advice.

 

Using imports for premium pluguins and a cdn for gsap is going to cause problems because the plugins will try to import GSAP. 

 

To avoid mixing modules I would just copy the pluguins into your GSAP folder in node_modules and try following the advice in the docs. 

 

https://greensock.com/docs/NPMUsage

 

However, Nuxt might have issues with importing es modules. Well it did last time I checked, but I can't really investigate right now. I'm out of town at the moment. 

  • Like 2
Link to comment
Share on other sites

7 minutes ago, OSUblake said:

I'm on mobile right now so it's hard for me to give detailed advice.

 

Using imports for premium pluguins and a cdn for gsap is going to cause problems because the plugins will try to import GSAP. 

 

To avoid mixing modules I would just copy the pluguins into your GSAP folder in node_modules and try following the advice in the docs. 

 

https://greensock.com/docs/NPMUsage

 

However, Nuxt might have issues with importing es modules. Well it did last time I checked, but I can't really investigate right now. I'm out of town at the moment. 

 

Appreciate you helping out from the road (and no expectation that you'll continue troubleshooting while traveling; I'm just posting back so it will be available when you have time and in case it helps Dipscom figure things out)

 

I have now completed testing on DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, PhysicsPropsPlugin, ScrambleTextPlugin, and ThrowPropsPlugin- and I've gotten all six of those (with 'plugin' in the name) to run successfully within my nuxt app - while all five Premiums without 'plugin' (CustomBounce, CustomEase, CustomWiggle, GSDevTools, and SplitText) lead to the failures and error messages I listed in a previous ppost.

 

Looking inside my node_modules/gsap/ I do indeed see all the regular gsap files along with a package.json file. And there's also a subdirectory with umd version of the non-premium gsap files (node_modules/gsap/umd).    I tried moving GSDevTools into that - so node_modules/gsap/umd/GSDevTools - and I no longer get a warning or error message when I do   npm run dev,

but on localhost:3000, can't bring up the site and says:   ReferenceError -  document is not defined

and points toward node_modules\gsap\umd\GSDevTools.js  as the problem.

 

 

 

 

 

 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

Right, I got it working. Bloody Nuxt and its ES5 underlying system.

 

It really bothers me that you write in ES6+ syntax with Nuxt but their underlying import/export system is all UMD.

 

In the end it was the SSR that was causing the trouble. It's late here and I won't write a full explanation right now. Might do later, might just update the repo I made to incorporate these quirks we've just found.

 

Assuming you ARE using the UMD version of the premium plugins, chuck them into the vendor folder as originally suggested BUT DO NOT import them. You'll need to require those buggers. Because SSR.

 

/*
 * The two bellow will not work
*/
// import GSDevTools from '~/assets/vendor/GSDevTools'
// import SplitText from '~/assets/vendor/SplitText'

/*
 * This will work. Why? Beats me, something to do with how backend, frontend works.
*/
if(process.client) {
  const SplitText = require('~/assets/vendor/SplitText')
  const GSDevTools = require('~/assets/vendor/GSDevTools')
}


export default {
  //...
}

 

One needs to really have some legacy knowledge to do the 1+1 = 2 here.

 

https://nuxtjs.org/faq/window-document-undefined/

 

  • Like 3
Link to comment
Share on other sites

@Dipscom - (and @OSUblake and @Jack / Greensock )

 

Thank you so much for sticking with this and figuring out a solution to the problem!  That did the trick and have everything working now!

 

I'd stumbled upon a piece of code

  • if (process.browser) { code here }

from a different thread where that was used to make sure you weren't trying to manipulate things before the DOM (and assumedly virtual DOM) were ready. Looking at that now, I see process.browser has been deprecated in favor of process.client, so will update accordingly.

 

And I'd come across a note in the repo about require vs import and wondered if that was worth fiddling with.

 

Really did try to troubleshoot this on my own as much as I could, but I just didn't have enough background knowledge to pull everything together - so really can't thank all of you who support Greensock enough for getting me past this hurdle.

 

Next challenge is to integrate either with Drupal or a separate database on the backend while re-familiarizing myself with everything greensock has to offer. 

Have a great weekend and thanks again!

 

 

 

  • Like 3
Link to comment
Share on other sites

I'll try to revisit this thread when I get back to my home office and explain why @Dipscom got it working using require inside an if statement. 

 

For more in depth knowledge, I would recommend trying to build a node web app without any libraries or frameworks. You'll get a good understanding of how server and client side JavaScript differ. 

 

Here's one tip. You can't use import inside an if statement. Well, you can, but it should look like the second import in my tweet here, and I don't know if nuxt supports that. 

 

https://twitter.com/OSUbowen/status/1082027558730911746?s=19

 

For database stuff, I love using Firebase because you don't need an actual backend i.e. serverless. 

 

https://firebase.google.com/

 

And dipscom will rightly point out that I'm a Google lackey for recommending Firebase, but I don't care. ?

 

 

  • Like 3
Link to comment
Share on other sites

Hey guys - 

 

Back for more help with a general problem that may affect others as well. I have nuxt/vue working with all of the Greensock platform on localserver:3000 

When I use the command:  npm run generate to create a distribution folder with the files I'd need to upload to run things on my website, I received an error message which eventually tracks back to a line of code, which is found in DrawSVGPlugin, GSDevTools.js, SplitText.js  ThrowPropsLPlugin.js

The specific code is

"undefined" ? window:_doc.defaultView || {getComputedStyle:function () {}})

Here's an example in context from DrawSVGPlugin

var _doc = _gsScope.document,
        _computedStyleScope = (typeof(window) !== "undefined" ? window : _doc.defaultView || {getComputedStyle:function() {}}),
        _getComputedStyle = function(e) {
            return _computedStyleScope.getComputedStyle(e); //to avoid errors in Microsoft Edge, we need to call getComputedStyle() from a specific scope, typically window.

 

Someone on StackOverflow saw my initial error message (pasted below) and noted that: The error is Cannot read property 'defaultView' of undefined as nuxt tries to generate you pages. Therefore one of your pages is trying to use something.defaultView and that something doesn't exist. You'll need to look in your various pages code and find this. 

 

That's what helped me track this down to the Greensock files mentioned above. Would appreciate suggestions on how to work around this, since I can't complete the npm run generate command so I can then upload and test files on my real server. Thanks as always for your help and suggestions.

 

(and here's the initial error message in case that's helpful:)

Entrypoint app = server.js server.js.map i Generating pages 13:47:44 ERROR / 13:47:44 TypeError: Cannot read property 'defaultView' of undefined at b0a24a811505a689c203.js:2:455 at Object.24 (b0a24a811505a689c203.js:1:0) at r (server.js:1:0) at Module.32 (b0a24a811505a689c203.js:1:0) at r (server.js:1:0) at async server.js:1:7975 at async Promise.all (index 0) at async y (server.js:1:0) at async Promise.all (index 0) at async v (server.js:1:0) at async W (server.js:1:0) at async e.default (server.js:1:0)

 

 

 

 

 

Link to comment
Share on other sites

I've found several Greensock threads where it looks like people had a potentially related problem,

 

 

but I still haven't been able to figure out or fix the exact problem I'm having, which prevents me from using npm run generate to create the necessary files so I can upload site to actual webhost and build a functional site. 

 

 

One thread talked about 'Tree Shaking' - and in accord with that I added

import CSSPlugin from "gsap/umd/CSSPlugin";

in my main index.vue file, right after my statement:

import gsap from "gsap";

I also tried to import CSSPlugin from "gsap/CSSPlugin" - without 'umd' but that didn't fix things either.

And right after requiring my varied GSAP plugins within an if (process.client) statement, I added

const myPlugins = [CSSPlugin];

 

Tried a couple of other changes that didn't help so set those back.

Added async and await to my axios get call, in case that could have been causing problems, so now looks like

async callDrupalSite() {
return await axios
.get("https://www.mySite.com/api/movies" . . .)

And everything still continues to work correctly on localserver:3000 - but I get the same error upon npm run generate, 

 Cannot read property 'defaultView' of undefined as nuxt tries to generate you pages. (which StackOverflow person noted means) Therefore one of your pages is trying to use something.defaultView and that something doesn't exist. You'll need to look in your various pages code and find this. 

And that seems to boil down to this line used in several GSAP plugins:

 _computedStyleScope = (typeof(window) !== "undefined" ? window : _doc.defaultView || {getComputedStyle:function() {}}),

 

Over my head right now, so would appreciate any help. Thanks.

 

 

 

  • Like 1
Link to comment
Share on other sites

That basically means that "document" doesn't exist in that environment which is rather awkward because GSAP needs to tap into that in order to do various tasks. Think of it this way: it's like it's trying to run GSAP in a browserless environment (at least initially). It's the "server-side rendering" in Nuxt I guess. 

 

Did you read that link that @Dipscom linked to above? https://nuxtjs.org/faq/window-document-undefined/

 

Or if that doesn't work, can you just link to the files (perhaps on a CDN like cloudflare) instead of trying to run it all through an NPM-based build system that doesn't expose the document properly? 

  • Like 1
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Or if that doesn't work, can you just link to the files (perhaps on a CDN like cloudflare) instead of trying to run it all through an NPM-based build system that doesn't expose the document properly? 

 

Again, this is going back to what I said earlier. Just load your GSAP files through normal script tags. Nuxt is going to try and run stuff as server side code.

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi @Greensock / Jack & @OSUBlake

 

Thank you for helping.  As a quick reminder, I am using the cloudfare CDN's to import all of the non-premium gsap files in the opening script tag of my nuxt.config.js file. I've had the premium ones working on my local server, but hit this new issue while trying to generate files to upload to real webhost.

 

As for the link from @Dipscom, I think I'd read that, but don't think I quite got it last week. Now I understand its importance better. And for the four plugins that were giving me error statements, if I require those inside of the if(process.client) { **requirePluginsCode** } statement as opposed to just importing them in the general script tag, that gets rid of the errors and allows me to use "npm run generate" to successfully generate a dist folder. Uploading those files to my webhost results in a working site. GSDevTools doesn't seem to be working, but I'll go back and review proper usage tomorrow since I may have just messed up something simple there. I think the rest of the tools are working, but will go through and check that more carefully over next couple of days since I'd deactivated a bunch of functions and commented various things out as I was trying to isolate the problem and just get a minimal build generated and uploaded.

 

In terms of Tree Shaking, I placed this in my script tag:

import CSSPlugin from "gsap/umd/CSSPlugin";

and this within the if (process.client) {    }  statement:

const myPlugins = [CSSPlugin];

Is that the (a) correct way to do it?

 

Thanks for all of the help.

  • Like 1
Link to comment
Share on other sites

Did some more testing with GSDevTools today, and it is indeed behaving inconsistently, not just on the webhost but on my localhost:3000 as well.

I set up a simple test where i can click on an item to trigger a function that uses TimelineMax to run through a series of tweens. About half the time GSDevTools show up on the bottom of the screen and work precisely as expected. But the other half (just by refreshing the browser page, not changing any code), the GSDevTools show up at the same place but have no effect whatsoever. When this happens, if I drag in the right or left markers to set a range for the animation, they just snap back in place. And if I drag the dot (indicating current time of animation) and drag that around, it doesn't control the animation, and it snaps back to its original position when I release it.  Here's the function that gets called whenever someone clicks a bit of text which serves as the triggering element. Note that the timeline / tweens run successfully every time, regardless of whether the DevTools work - and both console.log statements show up each time, whether or not the tools worked.

 

runTween: function() {
var tl = new TimelineMax()
tl.to(".title", 2, { x: 50, y: 50 })
.to(".title", 1, { x: -30, y: -10, alpha: .5 })
.to(".subtitle", 1, { x: 30, y: 25, alpha: .5 })
.to(".subtitle", 1, { x: 40, y: 10, alpha: 1 });
console.log("Pre GSDevTools");
GSDevTools.create();
console.log("Post GSDevTools");
},

 

<div>
<h1 class="title" v-on:click="runTween">Developing in Nuxt</h1>
<h2 class="subtitle" >Integrating Drupal, Vue, Nuxt & Greensock</h2>
<hr />

 

I also changed all of my GSAP Premium plugins to be required in the if(process.client) {} statement, rather than using a plain import statement. Should this be ok:

if (process.client) {
const gsap = require("gsap");
const CSSPlugin = require("gsap/umd/CSSPlugin");
 
const MorphSVGPlugin = require("~/assets/vendors/MorphSVGPlugin");
const Physics2DPlugin = require("~/assets/vendors/Physics2DPlugin");
const PhysicsPropsPlugin = require("~/assets/vendors/PhysicsPropsPlugin");
const ScrambleTextPlugin = require("~/assets/vendors/ScrambleTextPlugin");
const DrawSVGPlugin = require("~/assets/vendors/DrawSVGPlugin");
const ThrowPropsPlugin = require("~/assets/vendors/ThrowPropsPlugin");
const GSDevTools = require("~/assets/vendors/GSDevTools");
const SplitText = require("~/assets/vendors/SplitText");
const CustomBounce = require("~/assets/vendors/CustomBounce");
const CustomEase = require("~/assets/vendors/CustomEase");
const CustomWiggle = require("~/assets/vendors/CustomWiggle");
const myPlugins = [CSSPlugin];
console.log("through process.client");
}

 

(I'm posting here as a continuation of this thread since this may relate to proper configuration to get Nuxt fully integrated with GSAP, but if a moderator fees this would be more appropriate as its own forum thread, please feel free to move / split this off. 

 

Link to comment
Share on other sites

Hm, I'd definitely be curious to see a reduced test case showing the GSDevTools behavior you described, but I think part of the problem may be the way you're handling things. By default, GSDevTools "listens" for any animations that are created in the FIRST 2 SECONDS of the page load (you can configure that). It's just a much more complex thing to have a GSDevTools instance constantly listening for anything that gets created, and adjusting everything on-the-fly. So unless you must have global functionality (that's actually kinda rare), I'd strongly recommend linking a GSDevTools instance directly to a specific animation, like:

 

var tl = new TimelineLite();
tl.to(...); //or whatever

//now set the GSDevTools instance's "animation" to be your timeline or tween:
GSDevTools.create({
  animation: tl, // <- THIS IS THE KEY
  globalSync: false //and turn off the global synchronization
});

Does that help at all? 

  • Like 1
Link to comment
Share on other sites

Thanks for that information - will try to do some more testing tomorrow with that advice in mind and see if it fixes the issue.

A reduced test case might be difficult, because I suspect it has something to do with the overall setup and integration with nuxt/vue.

I'd tested GSDevTools on codepen a couple of months ago and never ran into any problems.  Will post back once I've done some more testing.  

Link to comment
Share on other sites

For what it is worth: I have updated the skeleton repo with my findings after your reports, @mosk.

 

I take you are using Drupal as a headless CMS, right? I have very little experience with that sort of stuff but as simple as a example you can provide us is very helpful. Otherwise, we'll be shooting in the dark here and probably making comments that are not pertinent to your case.

 

When I get some time, I'll try and do a Nuxt install in SPA and static mode to test all the premium plugins. So far, I haven't needed to use them and only had a couple of projects using Nuxt so far.

  • Like 1
Link to comment
Share on other sites

Hey @GreenSock  thanks for the detailed info and suggestion.  Didn't get to sit down and test till after midnight- but re-coding as you described above indeed fixed my issues with GSDevTools so everything is now working as expected.  

 

@Dipscom - glad you're updating the repo; that was a big help in getting past my initial problems.

 

In terms of Drupal, although I still need to do some more reading and research, a headless version of Drupal is probably the direction I'm going, but right now, while I've been trying to just get the basics down for integrating Vue / Nuxt / GSAP & Drupal 8, I've been using a new drupal dummy site in which I'm using the (now) native REST functionality along with a REST UI module to take information I enter in a drupal 'view' and present that in json format, which I can bring into my nuxt app through an axios / GET call.   I didn't see a way to direct message you in the forum options (and I wasn't sure if there was any policy about posting our emails directly here in the forums) - but if you can DM me, I can give you login credentials for the site or any other info you find helpful so you can poke around and see if you have any thoughts on best way to integrate things.

Right now I don't have any specific technical hurdles blocking progress, so will hopefully make some progress on site over next few days and actually start implementing gsap in a useful manner rather than just testing out to see if things are working. 

 

Thanks to everyone on this thread for the help. Excited that everything is now primed to go and looking forward to the fun part!

  • Like 1
Link to comment
Share on other sites

To message someone directly, the easiest way is to go to the person's profile. There is a 'message' button there. It will open a compose modal and whenever you get a reply, it will go to your own inbox. You should see a little envelop icon at the top of the site next to your profile name/icon.

 

And you definitely do not want to go posting your email publicly in forums, you will only be inviting spam.

Link to comment
Share on other sites

  • 7 months later...

 

On 4/12/2019 at 2:31 PM, nicoladelazzari said:

Thank you for the answers! ?

 

Now this is my situation:


import TweenMax from 'gsap/TweenMax'
import Draggable from 'gsap/Draggable'
if (process.client) {
  require('~/assets/vendor/ThrowPropsPlugin')
}

 

response:


  41:8  warning  Using exported name 'TweenMax' as identifier for default export   import/no-named-as-default
  42:8  warning  Using exported name 'Draggable' as identifier for default export  import/no-named-as-default

 

And the browser error is: 

Unexpected identifier
 

What is going on?

 

Schermata 2019-04-12 alle 14.29.07.png

 

 

 

 

Try this:
 

nuxt.config.js

build: {
  transpile: [
    "gsap"
  ],
}


 

In a page or elsewhere

<script>
import { gsap } from "gsap";
import { Draggable } from 'gsap/Draggable';

export default {
  mounted() {
    if (process.client) {
		// Here you can use gsap now and draggable
    }
  }
}

</script>

 

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...