liamrdawson / photography-v2.0

A modern photography website leveraging TypeScript, Next and React. Using my custom built component library based on Atomic Design principles.
1 stars 0 forks source link

[fix] Text Component - Element type is invalid #10

Closed liamrdawson closed 3 years ago

liamrdawson commented 3 years ago

Fix the below error which occurs whenever the Text component tries to render in Storybook.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Context.Consumer.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Context.Consumer`.
    at createFiberFromTypeAndProps (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:166721:21)
    at createFiberFromElement (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:166749:15)
    at reconcileSingleElement (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:155720:23)
    at reconcileChildFibers (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:155780:35)
    at reconcileChildren (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:158658:28)
    at updateContextConsumer (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:160421:3)
    at beginWork (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:160782:14)
    at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:145613:14)
    at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:145662:16)
    at invokeGuardedCallback (http://localhost:6006/vendors~main.ef15598a41f8d1303247.bundle.js:145724:31)
liamrdawson commented 3 years ago

Reopened as issues still occurring in Storybook

liamrdawson commented 3 years ago

Cause of the issue was lack of element arg in TextComponent.args and also was not among the argtypes exported from Text.stories.tsx.

TextComponent.args = {
  children: 'The quick brown fox jumps over the lazy dog.',
  fontSize: 'normal',
  fontWeight: 'light',
  element: 'p'
}
argTypes: {
    element: {
          control: {
            type: 'select',
            options: ['p', 'a']
          }
      },
}