Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
fnimick opened this issue Nov 13, 2024 · 4 comments

Comments

@fnimick
Copy link
Contributor

fnimick commented Nov 13, 2024

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

@joleeee
Copy link

joleeee commented Jan 6, 2025

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
Copy link

joleeee commented Jan 6, 2025

You can work around it

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

@AlecAivazis
Copy link
Collaborator

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 🤔

@banakh
Copy link

banakh commented Jan 24, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants