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

fix(icon): use optional chaining to fix 'undefined' error in Histoire #147

Merged
merged 1 commit into from
Mar 20, 2024

Conversation

RobertHaba
Copy link
Contributor

@RobertHaba RobertHaba commented Mar 20, 2024

Problem

When using the NuxtIcon (Icon) component in Histoire stories, an error occurs:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'component') at Icon.vue:71:49
obraz

Solution

Added optional chaining (?.) to component computed:
...nuxtApp.vueApp?.component...

Changes

  • Implemented optional chaining to check the existence of vueApp in nuxtApp before trying to access.
  • This resolves the error: "TypeError: Cannot read properties of undefined (reading 'component')".

Test

clone: https://github.com/RobertHaba/icon/tree/feature/histoire-example
or add Histoire package

package.json

"devDependencies": {
    "@histoire/plugin-nuxt": "^0.17.14",
    "@histoire/plugin-vue": "^0.17.14",
    "histoire": "^0.17.14",
    ...
  }

histoire.config.ts

import { defineConfig } from "histoire"
import { HstVue } from "@histoire/plugin-vue"
import { HstNuxt } from "@histoire/plugin-nuxt"
export default defineConfig({
  plugins: [
    HstVue()
    HstNuxt()
  ]
})

Icon.story.vue

<template>
  <Story>
    <Icon name="uil:github" />
  </Story>
</template>

obraz

@atinux atinux merged commit d579df5 into nuxt:main Mar 20, 2024
@awacode21
Copy link

Might be related: #212

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

Successfully merging this pull request may close these issues.

3 participants