Jump to content
GreenSock

SimonDucak

Premium plugins - VueJS + WebPack

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

Hi,
I need a help with import MorphSVGplugin into my VueJS app. I have tried to find some solution in forum, but I didn't find anything.

I found for example this https://greensock.com/forums/topic/17245-how-to-use-gsap-with-vuewebpack-vue-cli-webpack-template/ . But also didn't help me. 

 

Firstly I moved MorphSVGPlugin.js to node_modules like in the photo. Then I tried to import plugin to app but without success.

 

And error was: 

Error message was: Failed to compile.

./node_modules/gsap/src/uncompressed/plugins/MorphSVGPlugin.js
Module not found: Error: Can't resolve 'TweenLite' in 'C:\Users\sducak\Desktop\none-yet\client\node_modules\gsap\src\uncompressed\plugins'

 

Thank for help.

 

Simon

Screenshot_1.png

Screenshot_2.png

Screenshot_3.png

Link to comment
Share on other sites

It looks like you're using the wrong file. From what I can tell, you're looking for an ES module file, but you're using the ES5 file that's intended for use directly in the browser. 

 

In your download zip, look in the "bonus-files-for-npm-users" folder. Grab the MorphSVGPlugin.js file from there (which is an ES module), and drop it into your "gsap" folder in the "node_modules" directory (NOT in src/uncompressed). Does that resolve things for you? 

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

Just require it anywhere, it will be registered to window.

Link to comment
Share on other sites

Now it works. 

 

Thank for help. 

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hey there!

 

I am trying to include the MorphSVGPlugin plugin to Vue and I get the error. :(

This dependency was not found:

* gsap/MorphSVGPlugin in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/games/drag-and-drop/Shapes.vue?vue&type=script&lang=ts&

To install it, you can run: npm install --save gsap/MorphSVGPlugin
Type checking in progress...
(node:15996) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/home/yesworld/.steampath'
(node:15996) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:15996) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

My code

import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin' // doesn't work
import { Draggable } from 'gsap/Draggable' // works fine
import gsap from 'gsap'

gsap.registerPlugin(Draggable)
gsap.registerPlugin(MorphSVGPlugin)

 

package.json

 

  "dependencies": {
    "axios": "^0.19.2",
    "blockly": "^3.20200402.1",
    "core-js": "^3.6.5",
    "gsap": "^3.4.2",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-i18n": "^8.17.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/gsap": "^1.20.2",
    "@types/webpack": "^4.4.0",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-plugin-pwa": "^4.4.0",
    "@vue/cli-plugin-typescript": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "copy-webpack-plugin": "^5.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-i18n": "^1.0.1",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-template-compiler": "^2.6.11"
  }

 

Thank you!

Link to comment
Share on other sites

Hey @yesworld. MorphSVG is a Club GreenSock plugin so you've got to join the club to get access to it :) Plus you get access to all of the other awesome and super helpful Club GreenSock plugins like DrawSVG and InertiaPlugin. Plus it helps us support the continued development of GSAP. We highly recommend it!

 

Once you get a Club GreenSock membership you can learn how to include MorphSVG in your project by following the modules installation instructions on the GSAP Installation page.

  • Like 1
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.
×