Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Agnostic UI for Vue not working with Histoire #260

Open
JoJk0 opened this issue May 28, 2023 · 2 comments
Open

Agnostic UI for Vue not working with Histoire #260

JoJk0 opened this issue May 28, 2023 · 2 comments

Comments

@JoJk0
Copy link

JoJk0 commented May 28, 2023

Describe the bug
I want to use Agnostic UI with Histoire so I can build my own component library with stories.
At the moment it's not possible

Error while collecting story **:
SyntaxError: Unexpected token '}'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)
    at async link (node:internal/modules/esm/module_job:67:21)

To Reproduce
https://stackblitz.com/edit/histoire-vue3-starter-ybomb1?file=package.json,src%2FBaseButton.vue

  1. Use Histoire's official starter template https://histoire.dev/guide/getting-started.html
  2. Install agnostic-vue
  3. Import Button from agnostic-vue package inside BaseButton.vue
  4. Replace button with Button
  5. Observe error in node console

Alternatively, I managed to reproduce it coming from Agnostic Ui's official starter template:
https://stackblitz.com/edit/github-sxfr9i?file=histoire.setup.mjs,src%2Fcomponents%2Fvue%2FButton.stories.vue,vite.config.js,package.json

Expected behavior
It loads Agnostic UI Button component in Histoire

Desktop (please complete the following information):

  • OS: [e.g. iOS] macOS
  • Browser [e.g. chrome, safari] node.js
  • Version [e.g. 22] 18.12.1
@JoJk0
Copy link
Author

JoJk0 commented May 28, 2023

I'm not 100% sure on whether the issue lies in Histoire or Agnostic UI so I created an issue on Histoire as well
histoire-dev/histoire#542

@JoJk0
Copy link
Author

JoJk0 commented May 29, 2023

I managed to find a workaround to use the 'raw' components from source.
Looks like the issue lies in built script for ES6 modules.

<script lang="ts" setup>
import { Button } from 'agnostic-vue/src/components'
</script>

<template>
  <Button>
    <slot />
  </Button>
</template>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant