houdini icon indicating copy to clipboard operation
houdini copied to clipboard

Using Houdini breaks `export { type Foo } from ...` syntax - causes crashes in the browser

Open fnimick opened this issue 1 year ago • 4 comments

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

fnimick avatar Nov 13 '24 20:11 fnimick

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)

joleeee avatar Jan 06 '25 07:01 joleeee

You can work around it

-export { alertVariants, type AlertVariant } from "./alert.svelte";
+import { alertVariants, type AlertVariant } from "./alert.svelte";
+export { alertVariants, type AlertVariant };

joleeee avatar Jan 06 '25 07:01 joleeee

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 🤔

AlecAivazis avatar Jan 17 '25 08:01 AlecAivazis

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}',
    ],

banakh avatar Jan 24 '25 20:01 banakh