ReferenceError: __dirname is not defined

[TiroZit]

@Applelo Hi

I found a critical bug, your plugin doesn't work in dev, build modes. I have done everything as specified in README. I get this error on output:

bun run dev
$ vite
file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:56
      join(__dirname, `/template.${this._options.styles.lang}`),
           ^

ReferenceError: __dirname is not defined
    at Styles.insert (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:56:12)
    at Styles.generate (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:176:23)
    at SVGManager.createFileStyle (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4560:36)
    at SVGManager.updateAll (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4489:16)
error: script "dev" exited with code 1 (SIGHUP)

System: NodeJS: 18 LTS Bun: 1.0.7 OS: Linux Kubuntu 23.10

rep: https://github.com/TiroZit/vite-project

[Applelo]

Hi, I didn't test this plugin with bun yet. Have you tried to run your dev command with bunx --bun like the tutorial from bun website https://bun.sh/guides/ecosystem/vite ?

[TiroZit]

Hi, I didn't test this plugin with bun yet. Have you tried to run your dev command with bunx --bun like the tutorial from bun website https://bun.sh/guides/ecosystem/vite ?

@Applelo

I checked using npm too. This bug when you use the styles option

npm run dev                                                                                                                                                                                          

> vite-project@0.0.0 dev
> vite

error when starting dev server:
ReferenceError: __dirname is not defined
    at Styles.insert (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:56:12)
    at Styles.generate (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:176:23)
    at SVGManager.createFileStyle (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4560:36)
    at SVGManager.updateAll (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4489:16)
    at async Context.buildStart (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4640:7)
    at async Promise.all (index 6)
    at async hookParallel (file:///home/tirozit/projects/vite-project/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:43927:9)
    at async Object.buildStart (file:///home/tirozit/projects/vite-project/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44251:13)
    at async file:///home/tirozit/projects/vite-project/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:65315:13
    at async httpServer.listen (file:///home/tirozit/projects/vite-project/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:65332:17)

[Applelo]

So the plugin is working with bun. Just change "dev": "bunx --bun vite", inside your package.json to prevent the __dirname error. Then, create the scss folder inside your src folder because the plugin need it to create the file since your filepath is ./src/scss/spritemap.scss.

[TiroZit]

So the plugin is working with bun. Just change "dev": "bunx --bun vite", inside your package.json to prevent the __dirname error. Then, create the scss folder inside your src folder because the plugin need it to create the file since your filepath is ./src/scss/spritemap.scss.

@Applelo

It still doesn't work. Even if you use npm or yarn, still the same error. Above is an example of npm

yarn run dev                                                                                                                                                                                         
yarn run v1.22.19
$ vite
file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:56
      join(__dirname, `/template.${this._options.styles.lang}`),
           ^

ReferenceError: __dirname is not defined
    at Styles.insert (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:56:12)
    at Styles.generate (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:176:23)
    at SVGManager.createFileStyle (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4560:36)
    at SVGManager.updateAll (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4489:16)

Node.js v18.18.2
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

rep: https://github.com/TiroZit/vite-project

[TiroZit]

So the plugin is working with bun. Just change "dev": "bunx --bun vite", inside your package.json to prevent the __dirname error. Then, create the scss folder inside your src folder because the plugin need it to create the file since your filepath is ./src/scss/spritemap.scss.

@Applelo

It still doesn't work. Even if you use npm or yarn, still the same error. Above is an example of npm

yarn run dev                                                                                                                                                                                         
yarn run v1.22.19
$ vite
file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:56
      join(__dirname, `/template.${this._options.styles.lang}`),
           ^

ReferenceError: __dirname is not defined
    at Styles.insert (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:56:12)
    at Styles.generate (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:176:23)
    at SVGManager.createFileStyle (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4560:36)
    at SVGManager.updateAll (file:///home/tirozit/projects/vite-project/node_modules/@spiriit/vite-plugin-svg-spritemap/dist/index.mjs:4489:16)

Node.js v18.18.2
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

rep: https://github.com/TiroZit/vite-project

If you specify the file extension as css, everything works

[Applelo]

I have clone your repository and just add "dev": "bunx --bun vite", create the src/scss folder, and everything work fine for me with bun run dev so I don't know what is the problem 🤷‍♂️

[TiroZit]

I have clone your repository and just add "dev": "bunx --bun vite", create the src/scss folder, and everything work fine for me with bun run dev so I don't know what is the problem 🤷‍♂️

What's your OS?

[Applelo]

MacOS and I have CI test to check on all platform are ok to prevent this kind of issue. Can you update or a create a new repo with a reproduction so I can check with the same environment.

[psychobolt]

I believe this issue occurs for ESM projects (using type: modules in package.json). Details on the issue. I suggest adding a ESM sub-package/workspace test. I patched index.mjs based on working solutions for Node LTS 18+ in my yarn project alone. See contents bellow for my fix:

.yarn/patches/@spiriit-vite-plugin-svg-spritemap-npm-1.4.0-b3ef82a3eb.patch

diff --git a/dist/index.mjs b/dist/index.mjs
index acdc5896138f77579d9148e65ddb381f52a181f5..f630c578ee02bc0de436e6aaabe77a526ae75c2c 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -12,8 +12,11 @@ import hash_sum from "hash-sum";
 // src/styles/styles.ts
 import { readFile } from "fs";
 import { promisify } from "util";
-import { join } from "path";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
 import svgToMiniDataURI from "mini-svg-data-uri";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
 var Styles = class {
   constructor(svgs, options) {
     this._svgs = /* @__PURE__ */ new Map();

[Applelo]

@TiroZit Did you manage to make it work ?

[Applelo]

I was able to reproduce the bug with ReferenceError: __dirname is not defined as @psychobolt mention by passing a type module on my package.json. I will try to see if I can implment a fix to work with CJS and ESM.