`__dirname is not defined` / `Missing "./main-modules.js" export in "svgdom" package`

[PhirosWolf]

Hello 👋

I'm currently creating a project with Nuxt.js and I'm using svg.js. But since the Svg element doesn't work on server-side, I need to use svgdom.

Unfortunately, if I use import { createSVGWindow } from 'svgdom';, svgdom returns an error in the console saying Uncaught ReferenceError: __dirname is not defined referencing the src/utils/dirname.cjs file.

I've searched for solutions and I've found issue #67 . It tells to use svgdom/main-module.js in the import so I tried. But if I do it gives me the Missing "./main-module.js" export in "svgdom" package error on top of the __dirname is not defined one. And I believe that svgdom/main-module.js should work but it somehow doesn't.

If I use ./node_modules/svgdom/main-module.js it results in the same behaviour as the first one where I used only svgdom in the import.

Honestly, I don't really know where this issue is coming from. Is it Nuxt? Vite? svgdom? And if it is indeed coming from svgdom, how do I fix it?

Thanks in advance for your answer.

[Fuzzyma]

Nuxt and Vite sound more like client side then server side. svgdom is serveronly. If it gets served to the client somewhere it will fail. Vite also tries to wrap all cjs modules into esm modules which will cause __dirname to not be defined

[PhirosWolf]

What I'm trying to do is to generate an SVG on the server side, color it on the server side and then include it in a div (client-side).
Is there I way I can do that properly or should I move my code so that it is only executed on the client side?

[Fuzzyma]

ist fine to do that but then I wonder what nuxt and vite has to do with all that