konstaui / konsta

Mobile UI components made with Tailwind CSS
https://konstaui.com
MIT License
3.52k stars 131 forks source link

Example code does not work - Some svelte conflict? #86

Closed dikovmaxim closed 2 years ago

dikovmaxim commented 2 years ago

Check that this is really a bug

Reproduction link

https://konstaui.com/svelte/usage

Bug description

Hi. I just created a basic svelte application with the following App.svelte code:

<script>
    /* App.svelte */
    import { Block, Button } from 'konsta/svelte';
  </script>

  <Block class="space-y-4">
    <p>Here comes the button</p>
    <Button>Action</Button>
  </Block>

I Installed tailwind css and followerd all Instructions, but my application won't buid

────────────────── LOGS ──────────────────

publicFolder is public
rollup v1.16.3
bundles src/main.js → public\bundle.js...
[!] (plugin svelte) ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component
node_modules\konsta\svelte\components\ActionsButton.svelte
71: </script>
72:
73: <svelte:element
     ^
74:   this={Component}
75:   bind:this={rippleEl.current}
ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component
    at error$1 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\utils\error.ts:25:16)
    at Parser$2.error (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:93:3)
    at read_tag_name (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\state\tag.ts:303:10)
    at tag (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\state\tag.ts:101:15)
    at new Parser$2 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:45:12)
    at parse$2 (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\parse\index.ts:208:17)
    at parse (C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\svelte\src\compiler\compile\index.ts:68:14)
    at C:\Users\max\Desktop\MyApp\MyApp\MyApp\node_modules\rollup-plugin-svelte\index.js:252:22

Expected Behavior

Should display a basic app

Actual Behavior

Throws an error

Konsta UI version

1.0.2 (just installed it from npm)

Platform/Target and Browser Versions

Firefox

Validations

Would you like to open a PR for this bug?

dikovmaxim commented 2 years ago
<script>
    /* App.svelte */
    import { Block, Button } from 'konsta/svelte';
  </script>

After reading a log I provided, it really looks like it is a framework-specific problem, but aven this code in enough yo produce the same error

nolimits4web commented 2 years ago

Make sure you are using latest Svelte version

dikovmaxim commented 2 years ago

I just updated