Doesn't work: causes compile errors even with basic example

[TylerRick]

I was really excited to see a nice workaround for the lack of support for dynamic elements in Svelte.

But as soon as I even add this line to my project:

import { Input } from 'svelte-elements

, I got dozens of errors like this:

ERROR in ./node_modules/svelte-elements/dist/svelte-elements.es.js 85:6-26
"export 'add_binding_callback' was not found in 'svelte/internal'
    at HarmonyImportSpecifierDependency._getErrors (node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (node_modules/webpack/lib/Compilation.js:1463:22)
    at node_modules/webpack/lib/Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (node_modules/webpack/lib/Compilation.js:1253:28)
    at node_modules/webpack/lib/Compiler.js:672:17
    at _done (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:104:22)

I tried to reproduce in a sandbox and got errors there too, though they were different errors:

Cannot read property 'ctx' of null
get_slot_context
/node_modules/svelte/internal/index.mjs:67:18
  64 | function get_slot_context(definition, ctx, $$scope, fn) {
  65 |     return definition[1] && fn
  66 |         ? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
> 67 |         : $$scope.ctx;
     |                  ^
  68 | }
  69 | function get_slot_changes(definition, $$scope, dirty, fn) {
  70 |     if (definition[2] && fn) {

create_slot
/node_modules/svelte/internal/index.mjs:60:25
  57 | }
  58 | function create_slot(definition, ctx, $$scope, fn) {
  59 |     if (definition) {
> 60 |         const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
     |                         ^
  61 |         return definition[0](slot_ctx);
  62 |     }
  63 | }

...

What am I doing wrong? How do I get it to work? Is it just not compatible with current version of svelte?

[TylerRick]

Okay, I cloned the repo, and ran

npm i
npm run build
npm run example

and the example worked. But it looks like it was using a really old version of svelte ([email protected]).

When I upgraded to [email protected] then I get the same error I was getting in my own project:

[!] Error: 'add_binding_callback' is not exported by ../node_modules/svelte/internal/index.mjs
https://rollupjs.org/guide/en#error-name-is-not-exported-by-module-
../dist/svelte-elements.es.js (1:122)
1: import { SvelteComponent, init, safe_not_equal, create_slot, assign, element, set_attributes, listen as listen$1, insert, add_binding_callback, get_slot_changes, get_slot_context, get_spread_update, detach, run_all, exclude_internal_props, bubble, noop } from 'svelte/internal';
                                                                                                                             ^
2: 
3: function subscribe(node, listeners) {
Error: 'add_binding_callback' is not exported by ../node_modules/svelte/internal/index.mjs

[TylerRick]

Rebuilding dist after upgrading svelte should fix the problem. (add_binding_callback wasn't reference directly by this project's code, only from dist)