在故事书故事中使用类星体组件时无法读取未定义的属性“屏幕”

Posted 2023-02-19

【中文标题】在故事书故事中使用类星体组件时无法读取未定义的属性“屏幕”

【英文标题】：Cannot read property 'screen' of undefined when using quasar components in storybook story

【发布时间】：2021-10-22 00:34:48

【问题描述】：

我在使用 Vue 和 Quasar 渲染故事书中的 quasar 组件时遇到问题。我怀疑它没有在故事中找到类星体标签。我只是按照这些步骤设置项目https://quasar.dev/start/vue-cli-plugin，然后运行npx sb init 在我的应用程序中设置故事书。毕竟，编译工作正常，但是当我在故事书屏幕上查看我的故事时，出现了以下错误。你在这里查看屏幕https://prnt.sc/1qd3ywr

我尝试了所有可能的解决方案，但都没有奏效。任何建议将不胜感激。

TypeError: Cannot read property 'screen' of undefined
    at setup (http://localhost:6006/vendors~main.iframe.bundle.js:89474:322262)
    at callWithErrorHandling (http://localhost:6006/vendors~main.iframe.bundle.js:37183:22)
    at setupStatefulComponent (http://localhost:6006/vendors~main.iframe.bundle.js:44151:29)
    at setupComponent (http://localhost:6006/vendors~main.iframe.bundle.js:44107:11)
    at mountComponent (http://localhost:6006/vendors~main.iframe.bundle.js:42108:13)
    at processComponent (http://localhost:6006/vendors~main.iframe.bundle.js:42083:17)
    at patch (http://localhost:6006/vendors~main.iframe.bundle.js:41698:21)
    at componentEffect (http://localhost:6006/vendors~main.iframe.bundle.js:42220:21)
    at reactiveEffect (http://localhost:6006/vendors~main.iframe.bundle.js:36022:24)
    at effect (http://localhost:6006/vendors~main.iframe.bundle.js:35997:9)

这是我关于 quasar 组件的故事：(quasar.stories.js)

import  QLayout, QPageContainer, QPage, QSelect, QBtn  from 'quasar'

export default 
  title: 'Quasar'


export const Components = () => (
  title: 'QuasarComponents',
  components:  QLayout, QPageContainer, QPage, QSelect, QBtn ,
  template: `<q-layout>
    <q-page-container>
      <q-page class="full-height full-width justify-center items-center q-pa-xl">
        <div class="col-auto">
          <q-input v-model="name" label="Full name" />
          <q-select v-model="role" :options="options" label="User Role" />
        </div>
      </q-page>
    </q-page-container>
  </q-layout>`,
  data () 
    return 
      name: null,
      role: 'User',
      options: ['Admin', 'Supervisor', 'User']
    
  
)

main.js

module.exports = 
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]

preview.js

export const parameters = 
  actions:  argTypesRegex: "^on[A-Z].*" ,
  controls: 
    matchers: 
      color: /(background|color)$/i,
      date: /Date$/,
    ,
  ,

【问题讨论】：

重复***.com/questions/68862250/…

@tony19 没关系，我登录错了。你能建议一些解决这个问题的方法吗？

【参考方案1】：

这看起来像GitHub issue #7263，是由应用扩展引起的。

一位用户发现了solution：

em-qui 是一个应用程序扩展，它也将 quasar 声明为 devDependency（用于 IDE 支持...），尽管在同一版本上，这在某种程度上导致了冲突：

  "devDependencies": 
    "graphql-tag": "^2.10.3",
    "quasar": "^1.12.6"
  ,

所以我不得不通过在应用扩展的 peerDependencies 中声明来将两者分开：

  "devDependencies": 
    "graphql-tag": "^2.10.3"
  ,
  "peerDependencies": 
    "quasar": "^1.12.6"
  

错误消失了。