Module import during build process

Hello 👋 ,

I can’t use gsap plugin like morphSVG. It throws me an error like this one

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/username/Documents/vite-project/node_modules/gsap/MorphSVGPlugin' imported from /Users/username/Documents/vite-project/.vite-ssg-temp/main.mjs
Did you mean to import gsap/MorphSVGPlugin.js?
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'

I am importing the module like this in my JS file

import gsap from 'gsap';
import MorphSVGPlugin from "gsap/MorphSVGPlugin";
gsap.registerPlugin(MorphSVGPlugin);

of course I have the premium package activated in my package.json and I am running the last version of the plugin:

"dependencies": {
    "gsap": "npm:@gsap/shockingly@^3.10.4",
  },
  "devDependencies": {
    "vite-ssg": "^0.20.1",
  }

if you already encountered the same problem or if you have an idea, please let me know !

Thank you very much in advance!! 🙏

Benjamin

[userquin]

@BenjaminOddou about cannot find module, add the relative path ./ prefix:

// main.ts
if (typeof window !== "undefined") {
  import('./gsap-loader')
}
....

EDIT: I’ll will try it later, rn too busy…

EDIT 2: if you’re using mock: true, just use the original code using the import from the dist: import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

[BenjaminOddou]

Hello @userquin, @sadeghbarati !

Thank you both for your responses !! 🙂 Finally I found that the problem came from a plugin I am using vite-svg-loader. In my vite.config.js file, I defined my import config to raw which was causing a massive bug… so I switched back to the component mode (default mode) and I don’t have the issue now ! I keep your responses in case of problems !

export default defineConfig({
  plugins: [
    vue(),
    svgLoader({
      defaultImport: 'component', // I was using 'raw'
      svgo: false // I am disabling svgo to keep my path ids, classes...
    })
  ],
  ...
})

Thank you again for your time !! 🙏

Benjamin