houdini
houdini copied to clipboard
Using Houdini breaks `export { type Foo } from ...` syntax - causes crashes in the browser
Describe the bug
Using the houdini vite plugin causes the following code to cause crashes when hydrating in the browser:
lib/test/test.svelte:
<script lang="ts" module>
export type TestTypeExport = string;
</script>
<p>foo</p>
lib/test/index.ts:
import Test from "./test.svelte";
export { type TestTypeExport } from "./test.svelte";
export { Test };
Reproduction here: https://github.com/fnimick/houdini-svelte-export-syntax-bug - created a blank sveltekit + houdini project using the templates, and adding the above files. No other changes were made.
Environment:
System:
OS: macOS 15.1
CPU: (10) arm64 Apple M1 Pro
Memory: 112.53 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.13.1 - ~/.asdf/installs/nodejs/20.13.1/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 10.5.2 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: 9.7.0 - ~/.asdf/shims/pnpm
npmPackages:
houdini: ^1.3.0 => 1.3.0
houdini-svelte: ^2.0.0 => 2.0.0
Reproduction
https://github.com/fnimick/houdini-svelte-export-syntax-bug
Same issue, breaks shadcn-svelte
The requested module '/src/lib/shadcn/ui-next/alert/alert.svelte' does not provide an export named 'AlertVariant' (at index.ts:4:25)
You can work around it
-export { alertVariants, type AlertVariant } from "./alert.svelte";
+import { alertVariants, type AlertVariant } from "./alert.svelte";
+export { alertVariants, type AlertVariant };
I took a look, confirmed the reproduction and have no idea what's causing it. I'll keep thinking. Like you said, its realllly strange this happens on the client and not on the server 🤔
I encountered a very similar issue when using next.shadcn-svelte components with <script lang="ts" module> and exporting variables.
After some debugging, I discovered a workaround by explicitly excluding the problematic folder src/lib/components/ui in the houdini.config.js file through the include property, like this:
include: ['src/**/*.{svelte,graphql,gql,ts,js}', '!src/lib/components/ui/**/*.{svelte,graphql,gql,ts,js}']
Strangely, using the exclude option alone did not work:
exclude: ['src/lib/components/ui/**/*.{svelte,graphql,gql,ts,js}'],
This workaround solved the issue for me, but the behavior is unexpected and inconsistent.
---- update ----
After clearing the cache, I realized that my previous workaround does not actually resolve the issue. The problem persists unless I explicitly define all paths where queries are used in the houdini.config.js file.
Here is the configuration that worked for me:
exclude: [
'src/**/*.{svelte,graphql,gql,ts,js}',
],
include: [
'src/routes/**/*.{svelte,graphql,gql,ts,js}',
'src/lib/server/**/*.{svelte,graphql,gql,ts,js}',
'src/lib/graphql/**/*.{svelte,graphql,gql,ts,js}',
'src/lib/queries/**/*.{svelte,graphql,gql,ts,js}',
],