Svelte 5 support: ERROR: No matching export in "a" for import "b" #5213
Comments
|
Seems like the culprit is these libraries are depending on 'svelte/internal' which has breaking changes and is not backwards compatible. |
|
Which internal APIs is Tanstack Svelte relying on and why? |
|
The Svelte adapter has to be rewritten/overhauled to work with Svelte 5. Who wants to help? |
|
Svelte maintainer here - I won't have time to work on this but if you have questions regarding the new APIs I'm happy to help. Also note that it's probably wise to wait a few more weeks until things have stabilize a bit more. |
Our plan was to wait for Svelte 5 to get to beta at least. @Mokshit06 created the original Svelte 3 adapter. Maybe will be able to help again? |
|
@dummdidumm If this library supports 4x currently and 5x has backwards compatibility. I don't get why you recommend waiting until 5 is stable since this library shouldn't be using internal svelte apis, nothing should break... |
We were using internal Svelte APIs a lot. Happy to see other approaches for rendering custom Svelte components inline though. |
@KevinVandy sorry for hijacking but since (at some point) you're going to rework the svelte adapter, I want to bring to your attention #4962 too. |
|
@sledgehammer999 I'm guessing that the use of flexRender in svelte is just inefficient in general. Unless the new internal svelte 5 apis might have some improvements. |
|
You lost me at internal, which is why this issue is open. Seems like the svelte team should add some public lifecycle helpers / renders for components. Thinking snippets could help. |
The adapter isn't that big. Anyone can see it here down below. https://github.com/KevinVandy/tanstack-table/blob/main/packages/svelte-table/src/index.ts This will have to be completely rewritten to work with Svelte 5. As far as I know, Svelte application code will mostly have backwards compatibility, but use of the internals will not. So these breaking changes are not unexpected. |
|
If you look at the linked issue svelte team will break internal apis in revisions if necessary. As such the adapter would be much more stable if we came up with exactly what we need or perhaps better if the svelte team writes the adapter so they can see pain points. |
|
Agreed. I'd be happy if you or another Svelte expert did that for us |
|
RC coming before march (via https://syntax.fm/show/723/svelte-5-speed-simplicity-and-size) would be great to figure out what public api's would make this possible so this project doesn't need to consume internal api's |
If there is a way to define components in line for custom cell, header, etc. renders, and a way to call a function (flexRender) that can render inline Svelte components both client-side and sever-side, then I think we'll be set. Otherwise, we might not be able to support that functionality anymore. |
|
Could you explain why the inline wrapper component logic is necessary? i.e. why can't you directly return a reference of |
|
Can we get some response to the question above. Also, if anyone has any bandwidth would be good to start on this now that svelte 5 is much further along. |
|
Hey everyone, the Svelte adapter was provided by the Svelte community. I'm not that knowledgeable with Svelte myself anymore. A Svelte 5 adapter will need to be provided by the community again for best results. |
|
@Mokshit06 was a valuable contributor to the original adapter. Maybe they can weigh in here. |
|
Thanks @KevinVandy for the ping. @dummdidumm The idea to keep inline wrapper component logic was for mainly 2 reasons:
Ideally we would want to support both these use cases. It would be helpful if svelte had a way to mount components at runtime or create instances of them outside of svelte tree, but I can see why would require a lot more work on the svelte team's side and it might not be deemed worth the effort. I am open to suggestions on how this can be improved on TanStack Table's end though so that future svelte internal versions don't cause issues. |
|
Eagerly waiting for this issue to be resolved. I also agree that |
What would be a more Svelte compatible way to add markup to cells and headers in the column definitions? Or should we just remove that capability altogether and just expect Svelte devs to add a lot of if blocks in the cell components? |
|
Do we like the way that svelte-headless-table has accomplished this? Tbh the column defn system doesn't feel that different to me, but It looks like he uses svelte-render, which he built, to render components though. |
|
Having a |
|
Thinking out loud, why couldn't each cell be a svelte snippet? |
|
I like the idea - this would basically let Svelte do all the if blocks that @KevinVandy was mentioning, right? I've only read some of the docs for snippets, so I'm curious how would this look? Something like: Plain Text Cells<script>
const exampleColDefn = [{
accessorKey: 'createdAt',
accessorFn: (data) => new Date(data.createdAt).toLocaleDateString(),
header: 'Date Added',
enableGrouping: false
}]
const table = // create the tanstack table...
</script>
{#snippet cellSnippet(cell)}
<div>{cell.getValue()}</div>
{/snippet}
{#each $table.getRowModel().rows as row (row.id)}
{#each row.getVisibleCells() as cell (cell.id)}
{@render cellSnippet(cell)}
{/each}
{/each}Component Cells<script>
const exampleColDefn = [{
accessorKey: 'createdAt',
accessorFn: (data) => new Date(data.createdAt).toLocaleDateString(),
cell: (ctx) =>
renderComponent(DataTableCell, {
data: ctx.getValue()
}),
header: 'Date Added',
enableGrouping: false
}]
const table = // create the tanstack table...
</script>
{#snippet cellSnippet(cell)}
<svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />
{/snippet}
{#each $table.getRowModel().rows as row (row.id)}
{#each row.getVisibleCells() as cell (cell.id)}
{@render cellSnippet(cell)}
{/each}
{/each}If my explanation seems unclear, it's because I'm still familiarizing myself with how TanStack Table works, and I'm also not very knowledgeable about how snippets work either. So, I ask for your understanding regarding my syntax errors as we delve into this concept. 🫠 |
|
Yeah, I like the idea of a RenderCell too. Whose up for making a PR for an official Svelte 5 adapter? |
|
I've drafted up an approach using the vanilla library. Repo: https://github.com/wlockiv/svelte5-tanstack-table-demo This gives us a |
|
Sorry I didn't realize before that Placeholder in the adapter has nothing to do with placeholders in the core library. I should be good to make this into a PR here then... |
|
@wlockiv Didn't know if you were going to make a PR for your adapter or not. Took a look at your repos. Do you think it would be best to just have 1 |
|
@KevinVandy yep I do. I went on vacation and left the laptop. Yep I can do that when I get back I think. Thank you for taking a look at the repo! |
|
Svelte RC is out :) |
|
This is fixed on the |
|
Use |
Svelte 5 adapter is present in Tanstack Table's v9 alpha, per this issue comment: TanStack/table#5213 (comment) I am now moving away from hosting a redundant svelte-table package in favor of following tanstack table v9
|
Are there any docs on what to use instead of flexrender? |
|
FlexRender. At this point, you'll have to read the docs and examples on GitHub |
|
If anyone's looking for a drop-in replacement that largely keeps the old API of |
Describe the bug
Svelte 5 preview ships with the new create app cli as an option. When using the previous the app cannot compile due to the errors below:
Your minimal, reproducible example
https://github.com/exceptionless/Exceptionless/tree/feature/svelte-5-runes/src/Exceptionless.Web/ClientApp
Steps to reproduce
Expected behavior
Should load the page and not error.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Windows latest, edge latest.
"@tanstack/svelte-table": "^8.10.7",
react-table version
8.10.7
TypeScript version
5.3.3
Additional context
No response
Terms & Code of Conduct
The text was updated successfully, but these errors were encountered: