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

TS Type mismatch for components #329

Open
BusschaertTanguy opened this issue Oct 25, 2024 · 6 comments · May be fixed by #330
Open

TS Type mismatch for components #329

BusschaertTanguy opened this issue Oct 25, 2024 · 6 comments · May be fixed by #330

Comments

@BusschaertTanguy
Copy link

Hello,

I just started a brand new svelte project in vite, and have a type mismatch when defining routes with wrap.

I'm using Svelte 5, so maybe that's related.

This is the setup

<script lang="ts">
    import Router from "svelte-spa-router";
    import wrap from "svelte-spa-router/wrap";

    const routes: RouteDefinition= {
        '/products/': wrap({
            asyncComponent: () => import('./pages/products/Products.svelte'), // Error on asyncComponent
        })
    }
</script>

<Router routes={routes} />

image

This also applies for normal route definitions

<script lang="ts">
    import Router, {type RouteDefinition} from "svelte-spa-router";
    import Products from "./pages/products/Products.svelte";

    const routes: RouteDefinition = {
        '/products/': Products // Error on '/products'
    }
</script>

<Router routes={routes} />

image

@pjaudiomv
Copy link

im having same issue

const routes = {
    '/login': Login,
    '/meetings': wrap({
      component: Meetings,
      conditions: [requiresAuthentication]
    }),
    '/formats': wrap({
      component: Formats,
      conditions: [requiresAuthenticationServerAdmin]
    }),
    '/servicebodies': wrap({
      component: ServiceBodies,
      conditions: [requiresAuthenticationAdmin]
    }),
    '/users': wrap({
      component: Users,
      conditions: [requiresAuthenticationAdmin]
    }),
    '/account': wrap({
      component: Account,
      conditions: [requiresAuthentication]
    }),
    '*': wrap({
      component: Home,
      conditions: [requiresAuthentication]
    })
  };
Screenshot 2024-10-26 at 10 07 36 AM

@pjaudiomv
Copy link

im using svelte 5 with vite and 4 compatibility mode

    svelte({
      compilerOptions: {
        compatibility: {
          componentApi: 4
        }
      }
    }),

@carbogninalberto
Copy link
Collaborator

Thanks for the issue. Tomorrow or Monday, I should have a couple of hours to open the PR for the Svelte5 support.

@pjaudiomv
Copy link

Great thanks

@pjaudiomv pjaudiomv linked a pull request Nov 3, 2024 that will close this issue
@pjaudiomv
Copy link

pjaudiomv commented Nov 3, 2024

I submitted a PR to at least fix the type and resolves issues with using the router with svelte 5 and ts #330

@patrickjquinn
Copy link

@ItalyPaleAle any chances we could get this PR merged?

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

Successfully merging a pull request may close this issue.

4 participants