error under "Svelte DevTools"

[bestguy]

error under "Svelte DevTools"

[RedHatter]

Thanks for the heads up. Shouldn't be a problem to fix. Looks like I just need to filter out native functions before I clone the local context.

I don't have time today but I should be able to look more into it soon.

[vfilatov]

Checked on

• Chromium: Version 81.0.4033.2 (Developer Build) Ubuntu 19.10 (64-bit)
• Chrome: Version 80.0.3987.116 (Official Build) unknown (64-bit)

[vfilatov]

On Firefox 73.0 (64-bit) Ubuntu:

• DataCloneError: The object could not be cloned.

[bestguy]

Hi @vfilatov, are you running the sample locally? Or are you looking at the website docs.
The docs use storybook library which uses React, etc that might confuse things or trigger errors

[frederikhors]

@bestguy I think we should only accept issue with issue reproduction on REPLs online.

The little time we can devote to FOSS should not be supportive of non-repository problems.

Am I wrong?

[vfilatov]

No, you are not wrong. but I might be wrong and there is a big change I'm doing something wrong. I'm not able to reproduce that on REPLs online. Here are steps to reproduce the error. - npx degit sveltejs/template my-svelte-project - cd my-svelte-project/ - npm i - npm i sveltestrap - npm i bootstrap - cat <<EOF > src/App.svelte <script> import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'sveltestrap'; let isOpen = false; function handleUpdate(event) { isOpen = event.detail.isOpen; } </script> <Navbar color="light" light expand="md"> <NavbarBrand href="/">sveltestrap</NavbarBrand> <NavbarToggler on:click={() => (isOpen = !isOpen)} /> <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}> <Nav class="ml-auto" navbar> <NavItem> <NavLink href="#components/">Components</NavLink> </NavItem> <NavItem> <NavLink href="https://github.com/bestguy/sveltestrap ">GitHub</NavLink> </NavItem> <UncontrolledDropdown nav inNavbar> <DropdownToggle nav caret>Options</DropdownToggle> <DropdownMenu right> <DropdownItem>Option 1</DropdownItem> <DropdownItem>Option 2</DropdownItem> <DropdownItem divider /> <DropdownItem>Reset</DropdownItem> </DropdownMenu> </UncontrolledDropdown> </Nav> </Collapse> </Navbar> EOF - npm run dev - open browser (chrome/chromium/firefox) I use Ubuntu 19.10 - open DevTools - go to http://localhost:5000 It works, no errors - in DevTools click "Svelte" tab [image: image.png] - reload http://localhost:5000 [image: image.png]

…

On Wed, Feb 19, 2020 at 10:50 AM frederikhors ***@***.***> wrote: @bestguy <https://github.com/bestguy> I think we should only accept issue with issue reproduction on REPLs online. The little time we can devote to FOSS should not be supportive of non-repository problems. Am I wrong? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#127?email_source=notifications&email_token=AAJMTYWAEN46SSOUVARJOMTRDVESDA5CNFSM4KXLNWZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMIGISQ#issuecomment-588276810>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJMTYSHNAKRJMPZBU6AHPTRDVESDANCNFSM4KXLNWZQ> .

[frederikhors]

It's not because of you or related to you, @vfilatov.

[vfilatov]

Hi @vfilatov, are you running the sample locally? Or are you looking at the website docs.
The docs use storybook library which uses React, etc that might confuse things or trigger errors

locally.

[bestguy]

Thanks @vfilatov for the reproduction steps, can take a look

[vfilatov]

node_modules/sveltestrap/src/Nav.svelte:
variable "fill" conflicts with Svelte DevTools
a workaround:

diff --git a/Nav.svelte b/Nav.svelte
index f5493c9..247ff22 100644
--- a/Nav.svelte
+++ b/Nav.svelte
@@ -9,7 +9,7 @@
   export let vertical = false;
   export let horizontal = '';
   export let justified = false;
-  export let fill = false;
+  export let navfill = false;
   export let navbar = false;
   export let card = false;
 
@@ -35,7 +35,7 @@
       'nav-pills': pills,
       'card-header-pills': card && pills,
       'nav-justified': justified,
-      'nav-fill': fill
+      'nav-fill': navfill
     }
   );
 </script>

[bestguy]

Thanks @vfilatov - we could change this, although would be a small breaking change.
Perhaps this is an issue we could fix in Svelte Devtools? Any thoughts @RedHatter ?

[vfilatov]

@RedHatter any chances to look at that issue? :)

[RedHatter]

Thank you for the ping. Sorry I haven't looked into this sooner.

As far as I can tell this is fixed in svelte-devtools version 1.2.3. Can you verify? The latest version hasn't gone through review on chrome yet but you should be able to install on firefox. Make sure to use the latest svelte version.

[vfilatov]

@RedHatter, thank you, I can confirm it is working on FireFox now.
Meanwhile it crashes under huge data set, but that might be a different story.

Thanks again!

[bestguy]

Resolved in other repo, thanks.