Jump to content
Search Community

Premium plugins - Vue + npm run build

SimonDucak 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

Hi,

 

Premium Plugins on Vue works Fine. But if I build a vue app and create a _dist directory with "npm run build" cmd. In console I get the

"invalid morphSVG tween value: # LoaderFront2" error.

 

Probably it doesn't work because in the _dist directory MorphSVG plugin is missing. I opened chrome dev tools then sources tab and I can't find this plugin there.

 

How can I add plugin to _dist directory? Or how can I fix this problem? 

 

Thanks for helping me.

 

Simon.

Screenshot_1.png

Link to comment
Share on other sites

I am using Vue cli. So I created my app with Vue cli. Then I added morphSVGplugin.js to "node_modules/gsap/src/uncompressed" directory.

Yes I put morphSVGplugin to node_modules maybe 2 month ago. I don't think greensock had any new updates. 

 

I import morphSVGplugin in app.vue

  import "gsap/src/uncompressed/plugins/MorphSVGPlugin";

 

This is my pacakge.json 

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "gsap": "^2.1.3",
    "vee-validate": "^2.2.11",
    "vue": "^2.6.10",
    "vue-carousel": "^0.18.0",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.10"
  }
}

 

If I run my app with the command "npm run serve" the plugin works fine. 

Problem is when I built _dist directory and try run app via this directory.

Sorry I am not very familiar with webpack. 

Could you give me some advice? 

 

Thanks. 

 

Simon

Link to comment
Share on other sites

3 hours ago, SimonDucak said:

If I run my app with the command "npm run serve" the plugin works fine. 

Problem is when I built _dist directory and try run app via this directory.

 

I see. Your build is probably is probably dropping the import. See the section on Tree Shaking here.

https://greensock.com/docs/NPMUsage

 

So you would probably need to do this.

import MorphSVGPlugin from "gsap/src/uncompressed/plugins/MorphSVGPlugin";

// You need to reference the plugin somewhere in your code
const plugins = [MorphSVGPlugin];

 

  • Like 2
  • Thanks 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.
×
×
  • Create New...