Storybook新添加component后无法运行

Question

老师你好，

我已经完成全部课程并且发布到了npm。我现在想自己继续添加新的component，但是storybook遇到了syntax问题。下面是我的component的截图：

我尝试过以下方法：

1. 把泛形和props删除，storybook就可以运行了
2. 不删除泛形和props，storybook无法运行，但是我放到index.tsx里跑localhost是可以的

storybook给的错误提示是:

ERROR in ./src/components/Switch/switch.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/yunwenzheng/repo/cereal-ui/src/components/Switch/switch.tsx: Unexpected token, expected "(" (30:10)

  28 | catch (__react_docgen_typescript_loader_error) { }try {
  29 |     // @ts-ignore
> 30 |     switch.displayName = "switch";
     |           ^
  31 |     // @ts-ignore
  32 |     switch.__docgenInfo = { "description": "", "displayName": "switch", "props": { "checked": { "defaultValue": null, "description": "", "name": "checked", "required": false, "type": { "name": "boolean" } }, "disabled": { "defaultValue": null, "description": "", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "size": { "defaultValue": null, "description": "", "name": "size", "required": false, "type": { "name": "enum", "value": [{ "value": "\"lg\"" }, { "value": "\"sm\"" }] } } } };

Answer 1

张轩 2020-05-07 19:32:12

同学你好 单看你这个组件和其他也没有差别 我在本地也没有遇到这个问题 能否请你提供 storybook 里面 这个 switch  stories 的写法？

• 提问者 ywzheng #1

  老师好，
  
  这是我的storybook的写法：
  
  import React from 'react'
  import { storiesOf } from '@storybook/react'
  
  import { Switch } from './switch'
  
  const defaultSwitch = () => (
      <Switch />
  )
  
  storiesOf('Switch Component', module)
      .add('Switch', defaultSwitch)

• 提问者 ywzheng #2

  老师好，我这个问题修好了。只要我把我的file名字改掉storybook就可以跑了。似乎是我file的名字和storybook的某些东西冲突了。我原本的file叫switch.tsx，我改成其他名字后就可以跑了。

• 张轩 回复 提问者 ywzheng #3

  好的 谢谢你的踩坑 这次我也了解啦 哈哈