Jump to content
Search Community

sybilrondeau

Members

  • Posts

    47

  • Joined

  • Last visited

 Content Type 

Posts posted by sybilrondeau

    Netlify deploy error with greensock-member

    in GSAP

    Posted

    Hi ! I put this line :

    registry=https://npm.greensock.com

    in the .npmrc file and it worked ! But Cassie said it could fail because of the other packages... so I deleted it and now each time I push on Github it's still working. 

    Have you tried it ? 

    Bonus Plugins problem on netlify

    in GSAP

    Posted

    Ok So I tried doing the private registry and what @Prasanna said about deploying in Netlify but I got this now : 

      

    10:34:21 PM: Installing NPM modules using Yarn version 1.22.4
10:34:22 PM: yarn install v1.22.4
10:34:22 PM: [1/4] Resolving packages...
10:34:23 PM: [2/4] Fetching packages...
10:34:24 PM: error An unexpected error occurred: "https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.1.tgz: Request failed \"403 Forbidden\"".

     

    Bonus Plugins problem on netlify

    in GSAP

    Posted

    3 hours ago, OSUblake said:

     

    Are you importing gsap? If so, then you would have to change your imports to point to that folder. If you are just putting the scripts in the head, then you really don't need the tgz.

     

    So now I have all gsap files in static folder (gsap, ScrollTrigger, DrawSVGPlugin and MorphSVGPlugin). 

    I had the scripts in the head :  

    script: [
      { src: '/MorphSVGPlugin.min.js', body: true },
      { src: '/ScrollTrigger.min.js', body: true },
      { src: '/gsap.min.js', body: true },
      { src: '/DrawSVGPlugin.min.js', body: true },
    ],

    and I import them like this in a file or component, for example :  

    import { gsap } from '~/static/gsap.min.js';
import { ScrollTrigger } from '~/static/ScrollTrigger.min.js';
gsap.registerPlugin(ScrollTrigger)

    I works fine in dev mode. But on Netlify I have this error :  

    9:15:51 PM: $ yarn generate
9:15:51 PM: yarn run v1.22.4
9:15:51 PM: $ nuxt generate
9:16:16 PM: [fatal] Nuxt build error
9:16:16 PM:   ERROR in ./components/BasePortrait.vue?vue&type=script&lang=js& (./node_modules/@nuxt/webpack/node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/BasePortrait.vue?vue&type=script&lang=js&)
9:16:16 PM:   Module not found: Error: Can't resolve '~/static/DrawSVGPlugin.min.js' in 'components'
  @ ./components/BasePortrait.vue?vue&type=script&lang=js& (./node_modules/@nuxt/webpack/node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/BasePortrait.vue?vue&type=script&lang=js&) 21:0-62 22:20-33
9:16:16 PM:   @ ./components/BasePortrait.vue?vue&type=script&lang=js&
9:16:16 PM:   @ ./components/BasePortrait.vue
9:16:16 PM:   @ ./node_modules/.cache/nuxt/components/plugin.js
9:16:16 PM:   @ ./node_modules/.cache/nuxt/index.js
9:16:16 PM:   @ ./node_modules/.cache/nuxt/client.js
9:16:16 PM:   @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js
9:16:16 PM:   ERROR in ./components/TheNavBar.vue?vue&type=script&lang=js& (./node_modules/@nuxt/webpack/node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheNavBar.vue?vue&type=script&lang=js&)
9:16:16 PM:   Module not found: Error: Can't resolve '~/static/MorphSVGPlugin.min.js' in 'components'

    And so on... with all gsap files. 

     

    Should I try @Prasanna method instead ? Going back with the tgz file ? I am lost 😕

     

     

     

     

    Bonus Plugins problem on netlify

    in GSAP

    Posted

    Hi ! My repo is public so I can't have this file in it. ;-) 

    My questions are : 

    - do I really need it ? (as I use the plugins bonus minified files in the static folder)

    - and if the answer is yes, how can I do ?

    • Like 1

    Bonus Plugins problem on netlify

    in GSAP

    Posted

    Hi 

     

    I have the same issue (error "gsap-bonus.tgz": Tarball is not in network and can not be located in cache) when deploying on Netlify. I understand that it is because the file is not on my github repo and that's ok because it should be private.

     

    But I use the js minified bonus files in the static folder of Nuxt. So I wonder if I really need the tgz file in the first place because I already use the plugins files in static. So I tried to remove the tgz file and install a regular yarn add gsap instead but I have an error each time... 

     

    So how should I do ? I am a little lost with all that... 

    If I need the tgz and put it in a private repo on github, how to I link it to my project ?

     

    Regards.

     

    Testing with Jest in Nuxt

    in GSAP

    Posted

    Hi !

     

    Node version is V16.0.0.

    This is the code in the component I try to test.

    I didn't use $refs but actual classes. 

     

    I tried with /dist or with file in the /static folder. Same error with convertToPath method.

      

    <script>
import { gsap } from 'gsap/dist/gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import IconButton from './icons/IconButton.vue';
import IconLab from './icons/IconLab.vue';
import { MorphSVGPlugin } from '~/static/MorphSVGPlugin.min.js';
gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin);

export default {
  components: {
    IconLab,
    IconButton,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  mounted() {
    const circle = MorphSVGPlugin.convertToPath('.circle');
    this.navTl = gsap
      .timeline()
      .to(circle, { morphSVG: '.close-btn' })
      .reverse();
  },
  methods: {
    openNav() {
      // toogle play and reverse on timeline
      this.navTl.reversed(!this.navTl.reversed());
      this.isOpen = !this.isOpen;

      // class active on menu items
      function activeMenu(trigger, end, targets) {
        ScrollTrigger.create({
          trigger,
          start: 'top bottom',
          end,
          toggleClass: { targets, className: 'active' },
        });
      }

      activeMenu('#section2', 'bottom 20%', '.nav-about');
      activeMenu('#section3', 'bottom 20%', '.nav-portfolio');
      activeMenu('#section4', 'bottom 20%', '.nav-skills');
      activeMenu('#section5', '200% 20%', '.nav-contact');
    },
  },
};
</script>

     

     

    Testing with Jest in Nuxt

    in GSAP

    Posted

    So I tried using  

    import gsap from 'gsap/dist/gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { MorphSVGPlugin } from 'gsap/dist/MorphSVGPlugin';

    and now it failed on the converToPath method. Any idea ? 

     

     Details:

        /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/MorphSVGPlugin.js:12
        import { getRawPath, reverseSegment, stringToRawPath, rawPathToString, convertToPath as _convertToPath } from "./utils/paths.js";
        ^^^^^^

        SyntaxError: Cannot use import statement outside a module

    Testing with Jest in Nuxt

    in GSAP

    Posted

    Thank you for your help ! Unfortunately it's the same. I don't understand how it should be done...

    I shouldn't have to transpile gsap as I don't use SSR but Static rendering. (according to the doc).

     

     

    Testing with Jest in Nuxt

    in GSAP

    Posted

    Hi,

    I am trying to test a Nuxt app with jest. But on files with gsap, I have an error : 

     

    Jest encountered an unexpected token

        This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

        By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

        Here's what you can do:
         • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
         • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
         • If you need a custom transformation specify a "transform" option in your config.
         • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    Details:

        /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/ScrollTrigger.js:650
        export var ScrollTrigger = /*#__PURE__*/function () {
        ^^^^^^

        SyntaxError: Unexpected token 'export'

          43 | <script>
          44 | import { gsap } from 'gsap';
        > 45 | import { ScrollTrigger } from 'gsap/ScrollTrigger';
             | ^
          46 | import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin';
          47 | import IconButton from './icons/IconButton.vue';
          48 | import IconLab from './icons/IconLab.vue';

     

    I am using gsap with the gsap-bonus.tgz file. Everything is working fine expect with jest. I use Static rendering (not SSR).

    This is my jest config : (it's already configured with babel-jest)

     

    I tried importing gsap via dist folder, as I read in the forum. But then I still have a problem with morphSVGPlugin : 

    Details:

        /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/MorphSVGPlugin.js:12
        import { getRawPath, reverseSegment, stringToRawPath, rawPathToString, convertToPath as _convertToPath } from "./utils/paths.js";
        ^^^^^^

        SyntaxError: Cannot use import statement outside a module

          11 | <script>
          12 | import gsap from 'gsap';
        > 13 | import MorphSVGPlugin from 'gsap/MorphSVGPlugin';
             | ^
          14 | gsap.registerPlugin(MorphSVGPlugin);
          15 |
          16 | export default {

     

     

    What should I do ? 

     

    module.exports = {
    // tell Jest to handle `*.vue` files
    moduleFileExtensions: ['js', 'json', 'vue'],
    watchman: false,
    moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/$1',
    '^~~/(.*)$': '<rootDir>/$1',
    '^@/(.*)$': '<rootDir>/$1',
    },
    transform: {
    // process js with `babel-jest`
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    // process `*.vue` files with `vue-jest`
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
    },
    snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
    collectCoverage: true,
    collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/*.vue',
    ],
    };
1
2
Page 1 of 2  
×
×
  • Create New...