Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
microeinhundert

Importing Plugins in Nuxt.js

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

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

  • Like 1
Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

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.

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

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 by Sixtus
Clearify.
Link to comment
Share on other sites

  • 4 weeks later...

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.

  • Like 3
Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...
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.

Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

  • 4 months later...
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

Link to comment
Share on other sites

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')
}

 

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

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

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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';

 

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