Storybook 适配Controls编写Twig组件Story时报「Object is not a function」错误排查

核心报错来源 #

你现在写的Controls相关代码（包括argTypes配置、各Story的args定义、Template.bind({})语法）完全符合Storybook新版Controls的规范，不存在逻辑错误。触发Object is not a function的唯一原因是Twig组件的导入方式和加载器的导出逻辑不匹配：

• 当前代码用命名导入的方式引入Twig文件：

  import { createInput } from '../components/input.twig';
  

• 但Storybook配套的Twig加载规则，只会通过默认导出暴露可调用的渲染函数，Twig文件本身根本不存在名为createInput的命名导出。这种写法实际拿到的是一个空的模块对象（不是可执行的函数），后续在模板里执行createInput({...})时，就会抛出没有清晰堆栈的笼统报错。
• 对比你原来可正常运行的Knobs版本代码，当时的导入写法是import component from '../components/input.twig'，走的就是默认导出逻辑，和你现在的命名导入写法是冲突的。

具体修正操作 #

1. 把Twig组件的导入语句换回默认导入：

   // 删掉错误的命名导入
   // import { createInput } from '../components/input.twig';
   // 替换为默认导入
   import inputTemplate from '../components/input.twig';
   

2. 调整模板函数内的渲染调用，把原来调用不存在的createInput的逻辑，替换为导入拿到的渲染函数：

   const Template = ({ label, ...args }) => {
     return inputTemplate({ label, ...args });
   };
   

3. 可选补充：如果需要保留旧Knobs版本里的组件字号缩放能力，可以把当时的container包裹逻辑加回来，这部分不会影响核心渲染，也不是报错的触发原因。

校验小技巧 #

在导入语句后加一行日志，快速确认导入是否正常：

console.log('Twig模板导入校验:', typeof inputTemplate)

如果输出为function，说明导入逻辑正确；如果输出为object/undefined，说明导入方式仍然和加载器规则不匹配。

内容的提问来源于stack exchange，提问作者Dan Lee