Uncaught TypeError: append_styles is not a function

[zhiyue-yi]

Describe the bug

Hi. When I was using svelte-navigator, I encountered this issue: Uncaught TypeError: append_styles is not a function and there was an issue created in svelte-navigator here: mefechoel/svelte-navigator#47

I created a PR #6828 and attempted to fix, but it looks like a lot of tests are broken. So I guess it's better to close that PR and raise an issue instead.

Reproduction

Here is the repo to reproduce the issue: https://github.com/ZhiyueYi/web-toolbox

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Memory: 12.72 GB / 23.93 GB
  Binaries:
    Node: 14.16.0 - d:\nodejs\node.EXE
    Yarn: 1.12.3 - D:\Yarn\bin\yarn.CMD
    npm: 6.14.11 - d:\nodejs\npm.CMD
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    rollup: ^1.27.14 => 1.27.14

Severity

blocking all usage of svelte

[Shinyaigeek]

I have investigated this issue a bit, and if my inference is correct, this is not a bug in svelte code, but is due to a disagreement between the svelte versions of svelte-navigator and your web-toolbox.

The version of svelte used to compile the svelte component in svelte-navgator is v3.31.2, https://github.com/sveltejs/svelte/blob/v3.31.2/src/compiler/compile/render_dom/index.ts#L540 As you can see here, apply_styles is not passed to the runtime helper function @init.

On the other hand, your web-toolbox will install the latest version of svelte and use that runtime. As a result, the dirty passed to @init in https://github.com/sveltejs/svelte/blob/v3.31.2/src/compiler/compile/render_dom/index.ts#L540 will be executed as an apply_styles function in the @init runtime of the latest svelte version, and cause this error.

https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/Component.ts#L136

So, as a workaround, try to fix the svelte version of your web-toolbox to v3.31.2, and it should work.

You may also want to discuss this with the maintainer of svelte-navigator.

[zhiyue-yi]

Thanks for suggestions! I shall close the issue.