Cannot read properties of undefined (reading 'type') Storybook

qwfrjk 0
Viewed 27

I have such a problem when I launch storybook, this error appears in my localhost:6006 and I no longer know how to fix it

I have a problem when start storybook enter image description here

I can't figure out what the error is

stories.jsx

export default {
  title: 'UI/Toast',
  argTypes: {
    toastType: {
      control: {
        type: 'select',
        options: [
         ...
        ],
      },
    },
...
  },
}

const Template = (args) => {
  toast.showToast(
    args.description,
    args.backgroundColor,
    args.padding,
    {
      type: args.toastType,
      position: args.toastPosition,
      autoDelete: args.toastIsAutoDelete,
      delay: args.toastAutoDeleteTime,
      animation: args.animation,
    },
  )
}

export const Default = Template.bind({})
Default.args = {
  ...
}

I use the singletone pattern to create notifications

toastCreator.js

let toastList = []
class ToastCreator {
  constructor(toastList) {
    if (ToastCreator.singleton) {
      return ToastCreator.singleton
    }

    ToastCreator.singleton = this
    this.toastList = toastList
  }

  getId() {
    return uuidv4()
  }

  getProp(text, padding, prop, backcolor) {
    const { toastId, type } = prop
    const [icon, backgroundColor, title, color] =
      getToastPropertiesByType(type)

    return {
      ...prop,
      id: toastId || this.getId(),
      description: text || 'Description',
      padding: padding || '',
      title: title,
      color: color,
      backgroundColor: backcolor || backgroundColor,
      icon: icon,
    }
  }

  showToast(text, backgroundColor, padding, prop) {
    const { position, autoDelete, delay, animation } = prop
    if (toastList.length < 3) {
      toastList = [
        ...toastList,
        this.getProp(text, backgroundColor, padding, prop),
      ]
    }

    return (
      <ToastPortal>
        <ToastContainer
          toastList={toastList}
          position={position}
          autoDelete={autoDelete}
          autoDeleteTime={delay}
          animation={animation}
          padding={padding}
        />
      </ToastPortal>
    )
  }
}
export const toast = new ToastCreator(toastList)

How I can fix this problem ?

storybook reactjs
1 Answers

It looks to me like your argument order is wrong. You call this.getProp(text, backgroundColor, padding, prop) but the definition of that function is getProp(text, padding, prop, backcolor). You should double check wherever showToast is called also has a matching order.

So you are passing padding as the prop argument. Since I guess this is undefined for some other reason (I cant say why thats the case since we'd need to see where showToast is called), its then trying to access properties on something which doesnt exist.

Change the call to match the order:

this.getProp(text, padding, prop, backgroundColor),
Adam Thomas0
Related