What is the significance of h being undefined?

I have successfully set up a new Vue project using vue create and added Storybook with no issues.

However, after installing storybook-addon-designs and following the instructions in the readme to add it to my story, I encountered an error in my console saying: h is not defined.

Below are the relevant files:

stories/2-PageTitle.stories.js:

import { withDesign } from 'storybook-addon-designs'
import {Button} from '../src/components/Button'

export default {
  title: 'My stories',
  component: Button,
  decorators: [withDesign]
}

export const myStory = () => <Button>Hello, World!</Button>

myStory.story = {
  name: 'My awesome story',
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
    }
  }
}

babel.config.js:


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

.storybook/main.js:


module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['storybook-addon-designs']
};

src/components/Button.vue:

<template>
  <button>
  {{ label }}
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    label: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
  background: red;
}
</style>

Could you please help me identify what's causing the issue in my setup?

You can view the full code repository here: https://github.com/A7DC/storybookvueaddonstest

Answer №1

In the guide for storybook-addon-designs, the author recommends the following steps:

You are advised to swap out the export

const myStory = () => <Button>Hello, World!</Button>

This React story line should be modified to Vue's equivalent. Here is an example,

export const myStory = () => ({
  components: { Button },
  template: '<Button>Hello, World!</Button>'
})

Here is the updated solution -

import { withDesign } from "storybook-addon-designs";
import Button from "../src/components/Button";

export default {
  title: "My Stories",
  decorators: [withDesign],
};

export const myStory = () => ({
  components: { Button },
  template: "<Button> Hello, World!</Button >",
});

myStory.story = {
  name: "My awesome story",
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
    },
  },
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effortlessly update value changes in ReactJs when Checkbox is checked

I've been stuck on this issue for a whole day now. I'm trying to make it so when the checkbox is checked, the value of 'Done' changes as intended. I've tried using useState but it's not working. The approach I used below is mu ...

Using JSON objects effectively in MVC4, including parsing them seamlessly!

I am struggling with understanding how to effectively utilize JSON objects within MVC and the correct way to pass them from Controller, to View, to Jscript. I am also unsure if I am correctly parsing the JSON objects at the appropriate places... Within m ...

When utilizing a node.js TCP socket to receive and send modified data, the functionality only operates successfully on the initial attempt

I am attempting to create a node.js TCP socket that will receive data, modify it, and then send it back. I found a helpful example on Stack Overflow here: . The example works perfectly as is, but when I add my own code to send data back, it only works for ...

Retrieve data from a variable that is located within a function that is also

<script> const tally ={ total: 0, increase: function(){ total++; console.log(total); } } const selectBtn = document.getElementsByTagName('button& ...

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Here is a code snippet that includes buttons appending selections to the "cart" div upon clicking. The first script ensures only one selection per row when multiple buttons in the same row are clicked. In the second script, selections are appended to the ...

When debugging in ASP MVC4, JavaScript will only evaluate HiddenFor once you've paused to inspect it

Struggling with evaluating a hidden field in JavaScript (ASP MVC4). I've set up a model in my View with a hidden input for one of the properties. @Html.HiddenFor(mdl => mdl.FilterByUser, new { @id = "filterByUserId" }) Within my Helper, I have a ...

three.js LambertMeshMaterial

Hello everyone: I've noticed that my models using MeshLambertMaterial are consuming approximately 1.6GB of memory, exceeding the capabilities of a 32-bit Chrome browser. Switching to Basic Material drops the memory consumption to around 456mb, but the ...

Exclude specific fields when updating a document in Firebase using the update()

Currently, I am storing a class in Firebase by using the update() function. Is there a way to stop specific fields (identified by name) of the object from being saved to the Firebase database? It's similar to how we use the transient keyword in Java ...

What is the best way to display items using Typeahead.js in combination with the Bloodhound engine?

I am struggling to showcase a collection of items using typeahead with a JSON file as the data source. Unfortunately, none of my information is appearing on the screen. My objective is to list the names and utilize the other attributes for different purpo ...

Working with JSON data in AngularJS: A guide to loading data onto a scope variable

I am in the process of developing my personal website where I want to be able to update content easily without having to mess with the HTML code. My approach involves loading and updating a JSON file to achieve this, however, I am currently struggling with ...

Setting up scheduled MongoDB collection cleanup tasks within a Meteor application

After developing an app to streamline form submissions for my team, I encountered a problem during testing. Meteor would refresh the page randomly, causing loss of data entered in forms. To solve this, I devised a two-way data binding method by creating a ...

Issue with dynamic dropdown selection causing element to not display

My code is designed to call the addpoc() method on button click, which generates a set of input boxes and a dropdown. When the dropdown option personal/workmail is selected, an input box should appear based on the selection. The issue arises after the init ...

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

Issue with $watch function causing $scope variable to remain undefined, even though it is being explicitly

I've been encountering an issue while trying to insert data into my Firebase database using a user's uid. It seems to be coming out as undefined for some reason. Here's a closer look at the code snippet causing the problem: The primary cont ...

Troubleshooting EJS Relative Path Problem when Using "include" in an HTML Document

I'm encountering an issue with my "index.ejs" file... The current content of the ejs file: <!DOCTYPE html> <html lang="en" dir="ltr"> <!-- THIS SECTION IS FOR <head> TAG THAT WILL BE STORED INSIDE "so_ ...

typescript: Imported modules in typescript are not functioning

I'm facing an issue where I installed the 'web-request' module but unable to get it working properly. Here is my code: npm install web-request After installation, I imported and used it in my class: import * as WebRequest from 'web-r ...

Trouble with Angular Charts: Data Reading Issue

Trying out chart.js for the first time and encountered an issue where the chart is not able to read data from the model. Previously, I had an error message of Error: $injector:modulerr Module Failed to instantiate module chart.js. This was fixed by switch ...

Using a custom TypeScript wrapper for Next.js GetServerSideProps

I developed a wrapper for the SSR function GetServerSideProps to minimize redundancy. However, I am facing challenges in correctly typing it with TypeScript. Here is the wrapper: type WithSessionType = <T extends {}>( callback: GetServerSideProps&l ...

Executing search bar capability through the use of AJAX and HTTP requests in JavaScript

I am currently working on implementing a search feature that will locate data based on the user's query. Specifically, I want to create a search bar in my HTML that can search for book titles stored in my database accessible through GET requests. Alth ...

sending data from a callback to an express router

As I embark on learning node.js, I've encountered a challenging issue. In my passportAuth.js file, I create a user and have a callback to ensure the user is created successfully. The code snippet looks something like this: req.tmpPassport = {}; var ...