How can we use uBeac components in Svelre Repl?

[pournasserian]

It raises error when we import uBeac components in Svelte repl. Here is the code:

<script>
    import {Button} from '@ubeac/svelte@0.0.3-next.162'
    let name = 'world';
</script>

<Button color="primary">
    Submit
</Button>

Here is the REPL: https://svelte.dev/repl/342f6ded5edb436bb0d50c3de842fa5a?version=3.55.0

[TheHadiAhmadi]

one of our dependencies uses 'crypto' package which is not available in unpkg.com

[TheHadiAhmadi]

also some components depend on Sveltekit (uses $app/environement)

Which we can solve this problem easily

[TheHadiAhmadi]

@pournasserian here is the result of my testing and investigation about REPL:

1: most important thing is to update imports.

export * from './components'
export * from './preprocessors'
export * from './types'

above code doesn't work. we should update all imports to something like this:

export * from './components/index.js'
export * from './preprocessors/index.js'
export * from './types/index.js'

also in components we should not use import {El} from '$lib/components'.

in above image in line 1 we have import {...} from '..' which unpkg.com cdn doesn't know we want to import from '../index.js'.

2: another problem is that we are using $app/environment in some components. which cdn provider thinks $app/environement is npm package

https://svelte.dev/repl/a95509140c5a4a239f94963f8a16b8a5?version=3.55.0 (please check console or network tab)

https://svelte.dev/repl/6ff841d6b8ca478c89829b8efebde0e5?version=3.55.0 in this repl I tested El component and GoogleMap component which didn't imported other components and everything (except styles) works.

and here is an example which I created with a testing UI library. https://svelte.dev/repl/d1718869c2e345a49e08ce3cbadce4c7?version=3.55.0

all imports are like this:

export * from './menu/index.js'
export * from './button/index.js'
export * from './modal/index.js'

as you can see import {Menu, MenuItem} from '.../components/menu/index.js' works.

[TheHadiAhmadi]

@pournasserian if we import from directory ($lib/components), this will happen.

instead of redirecting to https://unpkg.com/@ubeac/svelte@next/components/index.js; request will be redirected to https://unpkg.com/browse/@ubeac/svelte@next/components/ (which is HTML)

[TheHadiAhmadi]

I think this is one of reasons that ubeac components are not working in svelte repl