Can't use segmented-button in SvelteKit

[Silver-Volt4]

Describe the bug Just importing SegmentedButton in a SvelteKit page results in the following:

C:\Users\user\Programming\test\node_modules\@material\segmented-button\segmented-button\foundation.js:23
import { __assign, __extends, __values } from "tslib";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)

To Reproduce Steps to reproduce the behavior:

1. npm init svelte
2. Copy any demo from https://sveltematerialui.com/demo/segmented-button/ into src/routes/index.svelte within the generated sveltekit app
3. Carry out the steps in https://sveltematerialui.com/SVELTEKIT.md
4. npm run dev

Expected behavior No crashes.

Desktop (please complete the following information):

• OS: Tried on Windows and Linux

Additional context One thing that I discovered is that if the app is started first and then the component is imported through HMR the crash doesn't occur. However building the SvelteKit app also produces the error above.

[mobilarte]

I ran into the same problem.

The problem seems to be in the upstream @material/segmented-button. If you add a newer version of it to your project with npm i -D @material/segmented-button, the build will still complain with

@material/segmented-button doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

but finish.

On reloading a page with a segmented button, you will still get from ..\@material\segmented-button\segmented-button\foundation.js:23

import { __assign, __extends, __values } from "tslib";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)

[hperrin]

I'm hitting the same problem now. I've got a fix.

[hperrin]

I believe the wrong import path was done because of another bug, but that seems to be resolved now.

[hperrin]

Never mind. It appears that error is not fixed. Now I'm seeing:

Unexpected token 'export'                                                                                                                                                                                          
/.../node_modules/@material/segmented-button/index.js:23                                                                                                                                 
export * from './segmented-button/index';
^^^^^^

[mobilarte]

I believe it has to do with the package.json in @material/segmented-button, but that is just a random guess!

[hperrin]

Yeah, I think it is. I've (hopefully) got a workaround for it: https://github.com/hperrin/svelte-material-ui/commit/3c736938a4574b56f2ec78509391e6bbb317f4f0

[hperrin]

Yep, that fixed it! Released in @smui/segmented-button v6.1.3.

[mobilarte]

Yes, fixed the problem. Thank you!