Issue with vue-yandex-maps Plugin Not Being Recognized in Histoire with Nuxt

[vladdevjs]

Describe the bug

I am currently experiencing an issue where the vue-yandex-maps plugin, which is integrated into my Nuxt project, is not being recognized or rendered correctly in Histoire stories. I got an error message "Failed to resolve component: YandexMap If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement"

Reproduction

Nuxt StackBlitz: https://stackblitz.com/edit/histoire-nuxt3-starter-ge9spz?file=components%2FMap.vue

1. Installed vue-yandex-maps via npm install vue-yandex-maps@beta
2. Added file maps.client.ts in plugins folder of Nuxt

import plugin from 'vue-yandex-maps';

const settings = {};
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(plugin, settings);
});

3. Added component Map.vue, that looks like this:

<template>
  <client-only>
    <YandexMap :coordinates="coordinates" :detailed-controls="detailedControls" :controls="controls">
      <YandexMarker :coordinates="coordinates" markerId="1" />
    </YandexMap>
  </client-only>
</template>

<script setup>
import { yandexMap } from 'vue-yandex-maps';

const props = defineProps({
  coordinates: Array,
});

const controls = ['fullscreenControl'];
const detailedControls = { zoomControl: { position: { right: 10, top: 50 } } };
</script>

<style>
.yandex-container {
  height: 775px;
}
</style>

histoire.config.ts looks like this:

/// <reference types="histoire" />
import { defineConfig } from 'histoire';
import { HstVue } from '@histoire/plugin-vue';
import { HstNuxt } from '@histoire/plugin-nuxt';

export default defineConfig({
  plugins: [HstVue(), HstNuxt()],
});

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 AMD Ryzen 5 4600H with Radeon Graphics
    Memory: 3.13 GB / 15.37 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.61)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @histoire/plugin-nuxt: ^0.17.7 => 0.17.7
    @histoire/plugin-vue: ^0.17.6 => 0.17.6
    histoire: ^0.17.6 => 0.17.6

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.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• histoire-nuxt3-starter-ge9spz (Open reproduction)

[vladdevjs]

The problem was due to an incorrect import. Sorry for the inconvenience.