Jump to content
GreenSock

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

Premium plugins - Vue + npm run build

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

Share this post


Link to post
Share on other sites

Saying you ran "npm run build" means nothing to us because that is based on your how your project is setup.

 

Did you try putting the actual plugin in the gsap folder in node_modules?

 

 

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×