histoire

histoire copied to clipboard

Describe the bug

When we use the HstText element to add control to our story, We have a warn output :

[Vue warn]: Failed to resolve component: HstText
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

Reproduction

Just use a HstText in our story like this :

<template>
    <Story title="Components/Forms/AqZxcvbn">
        <aq-zxcvbn
            :label="state.label"
            :variant="state.variant"
            :prepend-inner-icon="state.prependInnerIcon" />

        <template #controls>
            <HstText
                v-model="state.variant"
                title="Variant" />
            <HstText
                v-model="state.label"
                title="Label" />
            <HstText
                v-model="state.prependInnerIcon"
                title="Prepend inner icon" />
        </template>
    </Story>
</template>

<script>
import { reactive } from 'vue';
import AqZxcvbn from '@/components/forms/AqZxcvbn.vue';

export default {
    components : {
        AqZxcvbn,
    },
    setup() {
        const state = reactive({
            variant             : 'outlined',
            label               : 'password',
            prependInnerIcon    : 'mdi-lock',
        });

        return {
            state,
        };
    },
};

</script>

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 221.93 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    npm: 8.13.1 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Edge: 104.0.1293.54
    Firefox: 102.0
    Firefox Developer Edition: 69.0
    Safari: 15.5
  npmPackages:
    @histoire/plugin-vue: 0.10.3 => 0.10.3 
    @vitejs/plugin-vue: 3.0.3 => 3.0.3 
    histoire: 0.10.3 => 0.10.3 
    vite: 3.0.8 => 3.0.8 

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

Please provide a runnable reproduction, thanks!

Sorry for the time.

I've created a project sample to reproduce the error here : https://github.com/throrin19/histoire-sample

I have the same problem with the last version of vite/histoire

Any updates on this, I have the same problem with my app. It reports an issue with all Hst prefixed components. However, they still render.

I think I figured out the cause of the issue. In @throrin19 example, he's using a setupFile override. I'm doing the same thing, and because we're override the vue app's setup, the Hst level components aren't registered, to fix this, you'd need to the the following in the stories/histoire.setup.js:

import { defineSetupVue3 } from "@histoire/plugin-vue";
import * as Controls from "@histoire/controls";  // Note: You'll have to add this to your devDependencies.

import { registerPlugins } from "@/plugins";

export const setupVue3 = defineSetupVue3(({ app, story, variant }) => {
  registerPlugins(app);

  // to avoid Hst Components from erroring during runtime, we need to register them
  Object.entries(Controls.components).forEach(([name, component]) => {
      app.component(name, component);
  });
});

Hope this helps others.

I just noticed that after adding the code above, my browser's console outputs:

However, by CLI output is much cleaner. 🤷 Hopefully this is something Histoire can fix on their end (or recommend for me to do on my end)

Not able to reproduce on latest versions of Histoire and Vite. Please comment/reopen if you still have the issue.