Importing Plugins in Nuxt.js

[microeinhundert 6 Likes (Newbie)]

Hello everyone,

 

i just started using the Club Greensock Plugins with Nuxt.js and quickly faced the problem of importing them using the ES6 import syntax. I have tried multiple methods to get it working, but all i get is the error "Cannot read property 'middleware' of undefined" after importing it in my component with "import 'gsap/DrawSVGPlugin'". Importing TimelineMax works. The same happens when using a private git repo like described here:

 

All the files from the Club Download's "bonus-files-for-npm-users" folder are in the root of the gsap package downloaded from npm, with a custom package.json like described in the post above.

 

Thanks in advance

[GreenSock 8,117 Likes (Superhero)]

Hm, I'm not familiar with Nuxt.js and I can't imagine why it'd be spitting that error out. Never heard of that before, and there's nothing in GSAP that's named anything like "middleware". Sounds like a Nuxt.js issue - have you sought help from them? Perhaps it's a configuration problem? 

[GreenSock 8,117 Likes (Superhero)]

Also, I wonder if this thread might help at all:

 

[Dipscom 2,815 Likes (Superhero)]

Would it be possible to see a setup where that is occurring?

 

Doesn't need to be your full blown project, the smaller the example the better. How about a tiny git repo with a bare-bone installation, one component throwing the fit?

 

I too don't see why it would not work of you are bundling everything in.

[microeinhundert 6 Likes (Newbie)]

Thank you, im gonna try it with a fresh Nuxt project and report back.

[microeinhundert 6 Likes (Newbie)]

Just testet it with a fresh Nuxt.js project and got the same error as in the thread you linked, adding 

if (isClient) {
   config.entry.app.push('gsap','gsap/DrawSVGPlugin');
}

to the extend function in nuxt.config.js fixed the problem.

[Sixtus 1 Likes (Newbie)]

May I ask how to import several gsap plugins that way? I have problems getting MorphSVGPlugin, SplitText and DrawSVGPlugin running together in Nuxt. I tried to do some research on config.entry.app.push(), without much success - I am a beginner with Nuxt.

[GreenSock 8,117 Likes (Superhero)]

First of all, thanks for joining the club, @Sixtus.

 

As I stated above, I'm not at all familiar with Nuxt, but are you using the files from the "bonus-files-for-npm-users" directory in the download zip? If you're still having trouble, it may help if you create a reduced test case and provide it here so that folks can see what's going on. 

[Sixtus 1 Likes (Newbie)]

Yes, I use the downloaded files.

The question is very nuxt specific. I hoped for an answer from @microeinhundert. A reduced test case doesn't make much sense here. Take a vanilla Nuxt, then try to get more than one bonus plugin working ?

[microeinhundert 6 Likes (Newbie)]

I ended up importing the plugins in nuxt.config.js like this:

 

  head: {
    script: [
      { src: '/DrawSVGPlugin.min.js' }
    ]
  },

 

and placed the plugin file inside the static folder (ih the root directory) . This method also works with nuxt generate.

[Sixtus 1 Likes (Newbie)]

Thank you very much @microeinhundert! This was just too easy ?

[Sixtus 1 Likes (Newbie)]

Interesting. This is not working for me. If I take the regular bonus files I get warnings about missing dependencies in my console. With the npm bonus files, the imports are not working of course.
EDIT: 
Got it now. It's working when not using the npm packages at all - I was still importing TweenMax from node_modules. Now I have also the TweenMax-Script in the header.
 

script: [
  { src: 'gsap/TweenMax.min.js' },
  { src: 'gsap/MorphSVGPlugin.min.js' },
  { src: 'gsap/SplitText.min.js' },
  { src: 'gsap/DrawSVGPlugin.min.js' },
  { src: 'gsap/GSDevTools.min.js' }
]

 

Edited July 12, 2018 by Sixtus
Clearify.

[blueblau 11 Likes (Newbie)]

The ZIP now includes src/bonus-files-for-npm-users/umd/CustomEase.js which you can put inside a local folder (/vendor/gsap/CustomEase in my example) and import that inside the component.

 

import CustomEase from "../vendor/gsap/CustomEase";

 

And now works as intended.

[OSUblake 9,990 Likes (Superhero)]

Most of the problems people are having with nuxt is that it does Server Side Rendering (SSR), so client side scripts like GSAP may not run correctly. I think you have to setup your project as a Single Page Application, put client side scripts in the head, or create a vendor bundle.

 

https://nuxtjs.org/api/configuration-build#vendor

 

 

[blueblau 11 Likes (Newbie)]

I might have replied on the wrong thread, but saw multiple instances where people (including me) had difficulties with simply using the plugin in Nuxt. Not because of SSR, as such, but because Nuxt apparently doesn't allow ES6 imports.

 

Just trying to help.

[OSUblake 9,990 Likes (Superhero)]

1 minute ago, blueblau said:

I might have replied on the wrong thread, but saw multiple instances where people (including me) had difficulties with simply using the plugin in Nuxt. Not because of SSR, as such, but because Nuxt apparently doesn't allow ES6 imports.

 

Just trying to help.

 

You're good. I really wasn't replying to your comment, which is good. I've noticed problems with ES6 imports too. I brought up the SSR because that causes problems with GSAP because window and document will be undefined.

 

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

 

[Sixtus 1 Likes (Newbie)]

On 8/10/2018 at 3:34 AM, OSUblake said:

Most of the problems people are having with nuxt is that it does Server Side Rendering (SSR), so client side scripts like GSAP may not run correctly. I think you have to setup your project as a Single Page Application, put client side scripts in the head, or create a vendor bundle.

 

https://nuxtjs.org/api/configuration-build#vendor

 

 

It is not about SSR – I struggle with a SPA. I tried referencing the scripts in nuxt.config.js as vendor scripts, like suggested. Not working.
Putting them in the head is what microeinhundert already suggested as a workaround on July 11. It is the solution I'm using.

[msymms 0 Likes (Newbie)]

This is the same solution that I had to use.  The below is placed in my local index.vue file.  It does not work (at least for me) when placed in the nuxt.config.js

head() {
      return {
        script: [
          { src: 'gsap/TweenMax.min.js' },
          { src: 'gsap/TweenLite.min.js' },
          { src: 'gsap/TimelineLite.min.js' },
          { src: 'gsap/TimelineMax.min.js' },
          { src: 'gsap/SplitText.min.js' },
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js' },
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js' },
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js' },
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js' }
        ]
      }
    }

 

 

NOTE:  SplitText.js threw an "Unexpected Token {" error.  I had to use the .min version and had no problems.  All greensock files are located in a subfolder 'gsap' inside of the 'static' folder.

[nicoladelazzari 3 Likes (Newbie)]

On 8/9/2018 at 11:33 AM, blueblau said:

The ZIP now includes src/bonus-files-for-npm-users/umd/CustomEase.js which you can put inside a local folder (/vendor/gsap/CustomEase in my example) and import that inside the component.

 

import CustomEase from "../vendor/gsap/CustomEase";

 

And now works as intended.

 

Hi, this solutions is not working.

I receive this warning:

 

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

 

 

I've put ThrowPropsPlugin inside /assets/vendor folder and imported inside a component.

What's wrong?

 

nuxt v2.4.0

universal mode

gsap v2.1.2

[Dipscom 2,815 Likes (Superhero)]

Hi nicoladelazzari,

 

It looks like you have not placed the correct version of the plugin in the your vendors folder. Can you check that you have used the ThrowPropsPlugin that is inside the folder: 'bonus-files-for-npm-users'?

 

I have just created a dummy project here in my desktop, added Draggable and ThrowPropsPlugin as a test and it is working as expected.

 

The catch to pay attention to with ThrowPropsPlugin is that you should only require it in the browser side of the build and not import it as if it's a npm package.

 

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

 

[nicoladelazzari 3 Likes (Newbie)]

Hi Dipscom, thanks for your reply.

I'm a bit confused and i've some questions:

 

1- ThrowPropsPlugin work together with Draggable, is that correct? Should I have to import both?

2- Draggable came from gsap free, ThrowPropsPlugin from ShockinglyGreen licence, Correct?

3- The correct version of ThrowPropsPlugin is inside folder bonus-files-for-npm-users/ or bonus-files-for-npm-users/umd/ ?

 

Thank you

 

[Dipscom 2,815 Likes (Superhero)]

Hey,

 

1 - Yes. Yes.

2 - Yes. Yes.

3 - I used the version from bonus-files-for-npm-users/ - the umd one is a different spec. Don't ask me to explain, I don't know enough. All I know is that is the 'other' spec that is losing preference over time but still exists around.

 

 

Let us know if you have more questions.

[nicoladelazzari 3 Likes (Newbie)]

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?

 

 

 

[Dipscom 2,815 Likes (Superhero)]

It looks like you're using a linter that's compaining about how gsap was set up.

 

When I made my test here, I didn't add a linter. Are you using one? Which?

 

It might be that you will need to customize the linter you're using to allow GSAP to do its thing.

[GreenSock 8,117 Likes (Superhero)]

Hm, those GSAP files do indeed define a default export. You are using the ES module version of the GSAP files, right? You definitely are if you simply did an npm install - I'm just a bit concerned about those error messages but maybe I'm reading them wrong. 

 

You could also try: 

import { TweenMax } from 'gsap/TweenMax';
import { Draggable } from 'gsap/Draggable';