Share Posted February 18, 2018 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 1 Link to comment Share on other sites More sharing options...
Share Posted February 19, 2018 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 More sharing options...
Share Posted February 19, 2018 Also, I wonder if this thread might help at all: 1 Link to comment Share on other sites More sharing options...
Share Posted February 19, 2018 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 19, 2018 Thank you, im gonna try it with a fresh Nuxt project and report back. Link to comment Share on other sites More sharing options...
Author Share Posted February 19, 2018 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. 1 Link to comment Share on other sites More sharing options...
Share Posted July 6, 2018 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 More sharing options...
Share Posted July 6, 2018 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. 2 Link to comment Share on other sites More sharing options...
Share Posted July 10, 2018 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 More sharing options...
Author Share Posted July 11, 2018 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. 4 Link to comment Share on other sites More sharing options...
Share Posted July 12, 2018 Thank you very much @microeinhundert! This was just too easy ? Link to comment Share on other sites More sharing options...
Share Posted July 12, 2018 (edited) 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. Link to comment Share on other sites More sharing options...
Share Posted August 9, 2018 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. 3 Link to comment Share on other sites More sharing options...
Share Posted August 10, 2018 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 2 Link to comment Share on other sites More sharing options...
Share Posted August 10, 2018 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. 2 Link to comment Share on other sites More sharing options...
Share Posted August 10, 2018 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 2 Link to comment Share on other sites More sharing options...
Share Posted August 27, 2018 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 More sharing options...
Share Posted November 14, 2018 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 More sharing options...
Share Posted April 12, 2019 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 More sharing options...
Share Posted April 12, 2019 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') } 1 1 Link to comment Share on other sites More sharing options...
Share Posted April 12, 2019 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 More sharing options...
Share Posted April 12, 2019 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. 1 Link to comment Share on other sites More sharing options...
Share Posted April 12, 2019 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? Link to comment Share on other sites More sharing options...
Share Posted April 12, 2019 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 More sharing options...
Share Posted April 12, 2019 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 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