table: Svelte 5 support: ERROR: No matching export in "a" for import "b"

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:

  VITE v5.0.9  ready in 866 ms

  ➜  Local:   http://localhost:5173/next
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "SvelteComponent"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:9:
      13 │ import { SvelteComponent, init, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_com...
         ╵          ~~~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "init"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:26:
      13 │ import { SvelteComponent, init, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_com...
         ╵                           ~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "safe_not_equal"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:32:
      13 │ import { SvelteComponent, init, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_com...
         ╵                                 ~~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "claim_text"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:54:
      13 │ import { SvelteComponent, init, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_com...
         ╵                                                       ~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "insert_hydration"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:66:
      13 │ import { SvelteComponent, init, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_com...
         ╵                                                                   ~~~~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "set_data"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:84:
      13 │ import { SvelteComponent, init, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_com...
         ╵                                                                                     ~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "noop"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:94:
      13 │ ...t { SvelteComponent, init, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_compo...
         ╵                                                                                             ~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "detach"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:100:
      13 │ ...lteComponent, init, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_component, m...
         ╵                                                                                            ~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "create_ssr_component"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:108:
      13 │ ...nit, safe_not_equal, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_component, mount_component,...
         ╵                                                                                     ~~~~~~~~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "escape"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:130:
      13 │ ...qual, text, claim_text, insert_hydration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_component, mount_component, transition_in,...
         ╵                                                                                            ~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "create_component"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:158:
      13 │ ...dration, set_data, noop, detach, create_ssr_component, escape, validate_component, create_component, claim_component, mount_component, transition_in, transition_out, destroy_componen...
         ╵                                                                                       ~~~~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "claim_component"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:176:
      13 │ ..., noop, detach, create_ssr_component, escape, validate_component, create_component, claim_component, mount_component, transition_in, transition_out, destroy_component } from 'svelte/...
         ╵                                                                                        ~~~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "mount_component"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:193:
      13 │ ... detach, create_ssr_component, escape, validate_component, create_component, claim_component, mount_component, transition_in, transition_out, destroy_component } from 'svelte/internal';
         ╵                                                                                                  ~~~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "transition_in"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:210:
      13 │ ... detach, create_ssr_component, escape, validate_component, create_component, claim_component, mount_component, transition_in, transition_out, destroy_component } from 'svelte/internal';
         ╵                                                                                                                   ~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "transition_out"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:225:
      13 │ ... detach, create_ssr_component, escape, validate_component, create_component, claim_component, mount_component, transition_in, transition_out, destroy_component } from 'svelte/internal';
         ╵                                                                                                                                  ~~~~~~~~~~~~~~

X [ERROR] No matching export in "node_modules/svelte/src/internal/index.js" for import "destroy_component"

    node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:241:
      13 │ ... detach, create_ssr_component, escape, validate_component, create_component, claim_component, mount_component, transition_in, transition_out, destroy_component } from 'svelte/internal';
         ╵                                                                                                                                                  ~~~~~~~~~~~~~~~~~

7:32:47 AM [vite] error while updating dependencies:
Error: Build failed with 16 errors:
node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:9: ERROR: No matching export in "node_modules/svelte/src/internal/index.js" for import "SvelteComponent"
node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:26: ERROR: No matching export in "node_modules/svelte/src/internal/index.js" for import "init"
node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:32: ERROR: No matching export in "node_modules/svelte/src/internal/index.js" for import "safe_not_equal"
node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:54: ERROR: No matching export in "node_modules/svelte/src/internal/index.js" for import "claim_text"
node_modules/@tanstack/svelte-table/build/lib/index.mjs:13:66: ERROR: No matching export in "node_modules/svelte/src/internal/index.js" for import "insert_hydration"
...
    at failureErrorWithLog (D:\ClientApp\node_modules\esbuild\lib\main.js:1650:15)
    at D:\ClientApp\node_modules\esbuild\lib\main.js:1058:25
    at D:\ClientApp\node_modules\esbuild\lib\main.js:1526:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Your minimal, reproducible example

https://github.com/exceptionless/Exceptionless/tree/feature/svelte-5-runes/src/Exceptionless.Web/ClientApp

Steps to reproduce

  1. create a svelte app https://kit.svelte.dev/docs/creating-a-project and when asked select svelte 5 beta/preview as an option.
  2. Install and configure tanstack svelte table…
  3. run app

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

  • I agree to follow this project’s Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

About this issue

  • Original URL
  • State: open
  • Created 7 months ago
  • Comments: 32 (13 by maintainers)

Most upvoted comments

I’ve drafted up an approach using the vanilla library.

Repo: https://github.com/wlockiv/svelte5-tanstack-table-demo Demo: https://adorable-beijinho-47e52b.netlify.app/

This gives us a <RenderCell cell={cellContext} /> component, a <RenderHeader header={headerContext} />, and another for footer that is basically just a wrapper of header… haven’t touched placeholder yet. But I’d be interested to hear thoughts.

+2
wlockiv on Mar 5, 2024

@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!

+1
wlockiv on Mar 8, 2024

Thanks @KevinVandy for the ping.

@dummdidumm The idea to keep inline wrapper component logic was for mainly 2 reasons:

  • In most cases the the cell to be rendered is either a static string (when it’s for cell headers), or a string that can be computed or accessed from table info. In these cases it’s much more intuitive to just be able to write these in the table definition (as shown below) than create components for them.
    const defaultColumns: ColumnDef<Person>[] = [
  {
    accessorKey: 'firstName',
    header: 'First Name', // static string
    cell: info => info.getValue(), // computed string
    footer: FooterComponent // svelte component
  }
]
  • In addition to this we need to support svelte components as these cells as well, so returning the reference from flexRender wouldn’t be enough.

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.

+1
Mokshit06 on Feb 16, 2024

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?

+1
KevinVandy on Dec 16, 2023
Read more comments on GitHub
← table: Size property not working
table: Table does not re-render when using redux for pageSize →