[houdini] Vite plugin + Svelte not working

[Arkezz]

Describe the bug

Using houdini vite plugin seems to fail instantly whether in dev or build mode with the following error:

✖ Command failed after 693 ms                                                                                                                   

 ERROR  The "path" argument must be of type string or an instance of URL. Received undefined                                                        10:05:02 PM

  at fileURLToPath (node:internal/url:1489:11)
  at C:/Users/Desktop/test/repro/svelte/node_modules/.pnpm/[email protected]/node_modules/houdini/build/vite-cjs/index.js:68413:61
  at evalModule (node_modules\.pnpm\[email protected]\node_modules\jiti\dist\jiti.js:1:247313)
  at jiti (node_modules\.pnpm\[email protected]\node_modules\jiti\dist\jiti.js:1:245241)
  at C:/Users/ezzel/Desktop/test/repro/svelte/wxt.config.ts:2:36

Reproduction

Minimal reproduction instantly crashes on build or dev mode:
https://github.com/Arkezz/wxt-houdini

Steps to reproduce

1. git clone https://github.com/Arkezz/wxt-houdini
2. pnpm install in the project directory.
3. pnpm build || pnpm dev

System Info

OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 2.32 GB / 15.86 GB
  Binaries:
    Node: 22.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.3.0 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.56)

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aklinker1]

This seems to be a problem with Houdini's CJS build, but also the fact that WXT is loading the CJS version of the package. If it loaded the ESM version, it wouldn't crash like this.

Specifically, here's the line in the source code that's causing problems: https://github.com/HoudiniGraphql/houdini/blob/6c5dbda72fb4b7c42dc85a3991e9705224dda080/packages/houdini/src/lib/config.ts#L24

Here's the built ESM code:

Everything looks good.

Here's the CJS code:

And the problem is quite obvious... If import_meta is set to {}, then of course import_meta.url is undefined, and you can't call fileURLToPath(undefined).

On a side note... I have never seen a comma used like this before: (0, import_node_url2.fileURLToPath)(...). Turns out it's a fancy way of calling a function with an undefined this value.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

WTF JS lol

So yeah, I would say their CJS build is just broken, or this would be fixed by #297.

For now, you can patch the package to get past this error:

// node_modules/.pnpm/[email protected]/node_modules/houdini/build/vite-cjs/index.js
-var import_meta = {};
-var currentDir = dirname((0, import_node_url2.fileURLToPath)(import_meta.url));
+var currentDir = __dirname;

https://pnpm.io/cli/patch

Unfortunately, I don't know if that "works", your reproduction doesn't seem to use the client? The $houdini/ directory doesn't seem to be generated (which I assume should happen since it's got aliases and references to it), so I don't think it's working.

When I add a log to the houdini.config.js file, it's not getting logged. Even if I rename it to houdini.config.cjs or convert it to an ES module, houdini.config.mjs with a default export.

I'm also getting a type error in wxt.config.ts, it seems houdini's vite plugin is for vite 4, not vite 5... https://github.com/HoudiniGraphql/houdini/blob/6c5dbda72fb4b7c42dc85a3991e9705224dda080/packages/houdini-svelte/package.json#L41

$ why vite
devDependencies:
@wxt-dev/module-svelte 1.0.0
├─┬ @sveltejs/vite-plugin-svelte 3.1.1
│ ├─┬ @sveltejs/vite-plugin-svelte-inspector 2.1.0
│ │ └── vite 4.5.3 peer
│ ├── vite 4.5.3 peer
│ └─┬ vitefu 0.2.5
│   └── vite 4.5.3 peer
└─┬ wxt 0.18.7 peer
  └── vite 5.3.1
houdini-svelte 1.2.47
├─┬ @sveltejs/kit 1.30.4
│ ├─┬ @sveltejs/vite-plugin-svelte 2.5.3
│ │ ├─┬ @sveltejs/vite-plugin-svelte-inspector 1.0.4
│ │ │ └── vite 4.5.3 peer
│ │ ├── vite 4.5.3 peer
│ │ └─┬ vitefu 0.2.5
│ │   └── vite 4.5.3 peer
│ └── vite 4.5.3 peer
└── vite 4.5.3
wxt 0.18.7
└── vite 5.3.1

WXT was created after vite 5 was released, and does not support vite 4... So I think you're out of luck :/

HoudiniGraphql/houdini#1306

If you want to use houdini, you'll probably need to write a vite 5 compatible plugin. Before that, create a basic vite 5 project and see if it works there as expected. If it does, provide that reproduction here and I'll re-open this.

[aklinker1]

Alright, after releasing #760, applying the patch I mentioned in #750 (comment), and upgrading the reproduction to v0.18.8, the plugin is running!

WXT 0.18.7                                                                                                          9:20:35 AM
ℹ Building chrome-mv3 for production with Vite 5.3.1                                                               9:20:35 AM
⠋ Preparing...HOUDINI LOADED
⠸ [1/3] background🎩 Generating runtime...
💡 No operation found. If that's unexpected, please check your config.
⠦ [2/3] content🎩 Generating runtime...
💡 No operation found. If that's unexpected, please check your config.
⠇ [3/3] popup🎩 Generating runtime...
⠏ [3/3] popup💡 No operation found. If that's unexpected, please check your config.
✔ Built extension in 6.663 s                                                                                       9:20:42 AM
  ├─ .output/chrome-mv3/manifest.json               427 B
  ├─ .output/chrome-mv3/popup.html                  456 B
  ├─ .output/chrome-mv3/background.js               10.43 kB
  ├─ .output/chrome-mv3/chunks/popup-Bcgz__NX.js    7.93 kB
  ├─ .output/chrome-mv3/content-scripts/content.js  13.72 kB
  ├─ .output/chrome-mv3/assets/popup-BJWy3nl9.css   1.3 kB
  ├─ .output/chrome-mv3/icon/128.png                3.07 kB
  ├─ .output/chrome-mv3/icon/16.png                 559 B
  ├─ .output/chrome-mv3/icon/32.png                 916 B
  ├─ .output/chrome-mv3/icon/48.png                 1.33 kB
  ├─ .output/chrome-mv3/icon/96.png                 2.37 kB
  └─ .output/chrome-mv3/wxt.svg                     1.07 kB
Σ Total size: 43.57 kB
✔ Finished in 7.254 s                                                                                              9:20:42 AM

It's not pretty, but it is doing something lol. Still don't know if it's generating the files correctly because I'm unfamiliar with houdini, but the $houdini directory exists now.

Looks like it's running multiple times, so you may want to control which build steps it's added to, something like this:

#596 (comment)