Looking for a working example of smui split button

Question

I'm following the example SMUI here: https://sveltematerialui.com/demo/button/

and I've written this component (UserDropdown):

<script>
    import Button, { Group, GroupItem, Icon } from '@smui/button';
    import Menu from '@smui/menu';
    import List, { Item, Separator, Text } from '@smui/list';

    let menu
    export let user
    export let onLogout
</script>

{#if user && user.hasOwnProperty('username')}
    <Group variant="outlined">
        <Button variant="outlined">
           Logged in as: { user.username }
        </Button>
        <div use:GroupItem>
            <Button on:click={() => menu.setOpen(true)} variant="raised" style="padding: 0; min-width: 36px;">
                <Icon class="material-icons" style="margin: 0;">arrow_drop_down</Icon>
            </Button>
            <Menu bind:this={menu} anchorCorner="TOP_LEFT">
                <List>
                    <Item on:SMUI:action={onLogout}>
                        <Text>Logout</Text>
                    </Item>
                </List>
            </Menu>
        </div>
    </Group>

{:else}

<div>
    <a href="/login">LOGIN</a>
</div>
{/if}

Even though the code is pretty much verbatim from the SMUI site, it doesn't work. I get this error:

Cannot read properties of null (reading 'SmuiElement')
TypeError: Cannot read properties of null (reading 'SmuiElement')
    at CommonIcon.svelte:32:23
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1771:22)
    at Object.default (/src/lib/components/UserDropdown.svelte:43:96)
    at Object.default (/node_modules/@smui/button/dist/Button.svelte:195:34)
    at eval (/node_modules/@smui/common/dist/SmuiElement.svelte:62:40)
    at eval (/node_modules/@smui/common/dist/SmuiElement.svelte:63:7)
    at SmuiElement.svelte:11:10
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1771:22)
    at Button.svelte:2:17
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1771:22)

Does anyone have a working example of the SMUI split button that works with 7.0 beta 1?

Thanks

Answer 1

I had the same issue using the DataTable, and fixed it by importing the Label from the @smui/data-table instead of the @smui/common. They are pointing to the same file in the end, so I really don't get the reason of the error, but it did solve it.

Answer 2

I had the same issue. When I checked, I didn't have @smui/button in my package.json

Just do

npm i @smui/button

And it should work