SvelteKit SSG, GSAP MorphSVGPlugin and Vercel

[joshuavachon25]

Hi guys, I'm trying to implement GSAP MorphSVGPlugin into a SvelteKit SSG app, but I get this error when I try to push my repo to Vercel... I use the static adapter instead of vercel adapter, but that's what I need to do so it can be static, right?

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/vercel/path0/node_modules/gsap/MorphSVGPlugin' imported from /vercel/path0/.svelte-kit/output/server/chunks/index-f07d310c.js
Did you mean to import gsap/MorphSVGPlugin.js?
    at new NodeError (internal/errors.js:322:7)
    at finalizeResolution (internal/modules/esm/resolve.js:308:11)
    at moduleResolve (internal/modules/esm/resolve.js:731:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
    at link (internal/modules/esm/module_job.js:75:36)
> 500 /p (linked from /)
Error: 500 /p (linked from /)
    at file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index4.js:86:11
    at visit (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index4.js:222:5)
    at async visit (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
    at async prerender (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index4.js:303:6)
    at async Object.prerender (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index4.js:368:4)
    at async adapt (file:///vercel/path0/node_modules/@sveltejs/adapter-static/index.js:13:4)
    at async adapt (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index4.js:393:2)
    at async file:///vercel/path0/node_modules/@sveltejs/kit/dist/cli.js:896:5
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jv-app@0.0.1 build: `svelte-kit build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the jv-app@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /vercel/.npm/_logs/2021-12-15T10_57_31_056Z-debug.log
Error: Command "npm run build" exited with 1

I use GSAP in a component:

  import gsap from 'gsap'
  import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'
  import { onMount } from 'svelte'
  export let statut = false;
  export let ind
  export let texte
  let animation

  onMount(async () => {
    gsap.registerPlugin(MorphSVGPlugin);
    animation = gsap.timeline({ paused: true })
    animation.to(`#c${ind}`, {duration: 0.5, morphSVG:`#b${ind}`});
    animation.to(`#d${ind}`, {duration: 0.5, morphSVG:`#e${ind}`}, "<");
    animation.to(`#d${ind}`, {duration: 0.5, fill: "white", stroke: "white"}, "<");
    animation.to(`#a${ind}`, {duration: 0.5, fill: "#9081CD"}, "<");
  })

  
  function handleStatut(){
      if (!statut) {
        animation.play()
      } else {
        animation.reverse()
      }
      statut = !statut
      console.log(statut)
    }

Can someone help me?

[StephDietz]

Try updating your output directory to build. You can do this in your Vercel dashboard. Click into your project and then select settings at the top of the page, toggle override on for output directory and type in 'build' then redeploy.