storybook 无法生成动态故事源:类型错误:无法访问属性"_vnode",storyNode为空,

lqfhib0f  于 3个月前  发布在  其他
关注(0)|答案(5)|浏览(45)

描述bug

这个bug出现在我的应用中,它本不应该出现在@nuxtjs/storybook v.3.2.0或之前的6.1.4版本中。我原以为它会影响在加载之前无法显示的文档故事,但我已经重新配置了它,现在它可以完美加载。但是,然后,它仍然显示错误:

$x_1^a_0b_1^x$

重现

重现此行为所需的步骤:

  1. 我已经配置了故事和配置,并且在Chromatic测试中也没有出现任何错误提示。

  2. 每次我按下选定的故事时,警告日志会不断增加,每次访问另一个故事时,它都会再次添加。

预期行为

每次选择故事时,不会出现任何警告日志。

截图

如果适用,请添加截图以帮助解释您的问题。您可以尝试在我开源部署的应用上查看:

$x_1^e_0f_1^x$

vpfxa7rd

vpfxa7rd1#

当我尝试使用文本控件更改参数时,我遇到了相同的错误,但只有在该参数未与属性绑定而是与插槽绑定时才会出现这种情况。

x759pob2

x759pob22#

这是由于Babel的一个bug导致的,它将prettier包中的ES6代码压缩为ES5:babel/babel#10693(评论)
我通过以下方式解决这个问题:禁用Storybook的npm模块从ES6到ES5的转换。具体操作如下:https://gerrit.wikimedia.org/r/c/wvui/+/683075/1/.storybook/main.js。缺点是你的Storybook将无法在IE11(以及其他不支持ES6的浏览器)中工作。(从你的.browserslistrc中移除非ES6浏览器似乎并没有帮助)。

7bsow1i6

7bsow1i63#

哎呀,我的评论适用于另一个错误:TypeError: Cannot convert undefined or null to object。我将为这个问题单独提交一个问题。

d7v8vwbk

d7v8vwbk4#

你找到了解决这个问题的方法吗?我正在遇到同样的问题。

xoefb8l8

xoefb8l85#

在我的案例中,这个错误发生在我创建一个装饰器时,我使用了渲染函数,例如:

export default makeDecorator({
  name: 'darkMode',
  parameterName: 'dark',
  wrapper: (story, context) => ({
    render: h => h(story(context))
  })
})

解决方案是添加 Vue.extend

export default makeDecorator({
  name: 'darkMode',
  parameterName: 'dark',
  wrapper: (story, context) => Vue.extend({
    render: h => h(story(context))
  })
})

第一个代码案例中的错误 "Failed to generate dynamic story source: TypeError: can't access property "_vnode", storyNode is null" 发生是因为在 Package 器属性中,我传递了一个 Vue 示例,这需要附加到一个 HTML 元素上才能挂载。因此,出于这个原因,storyNode 为 null。在第二个案例中,Vue.extend 创建了一个基本 Vue 构造函数的“子类”,当调用这个新的构造函数时,它会返回一个 VueComponent,可以在你的应用程序的任何部分使用。
希望这能帮助到你。 🙂

相关问题