在Storybook中使用Quasar组件时报Cannot read property 'screen' of undefined错误

错误根因 #

该报错是因为Quasar组件运行依赖Quasar插件注入的全局上下文，当前Storybook运行环境没有注册Quasar插件，导致无法读取全局实例上的screen属性。

解决步骤 #

1. 修改.storybook/preview.js配置，注册Quasar插件

import { getCurrentInstance } from 'vue'
import { Quasar } from 'quasar'
import 'quasar/dist/quasar.css'

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

export const decorators = [
  (story) => ({
    components: { story },
    template: '<story />',
    setup() {
      const app = getCurrentInstance().appContext.app
      // 此处配置和项目中Quasar的全局配置保持一致即可
      app.use(Quasar, {
        config: {},
        plugins: {}
      })
    }
  })
]

2. 补全故事文件的组件导入
   你当前的故事代码中使用了QInput组件但没有在导入和注册列表中添加，需要补全对应逻辑：

// 补全QInput导入
import { QLayout, QPageContainer, QPage, QSelect, QBtn, QInput } from 'quasar'

export default {
  title: 'Quasar'
}

export const Components = () => ({
  title: 'QuasarComponents',
  // 补全QInput注册
  components: { QLayout, QPageContainer, QPage, QSelect, QBtn, QInput },
  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']
    }
  }
})

3. 重启Storybook服务即可正常渲染Quasar组件。

补充说明 #

如果你的项目中Quasar有自定义全局配置（比如主题色、图标集、额外插件等），直接在app.use(Quasar)的第二个参数中填入和你项目入口文件相同的Quasar配置即可，保证组件渲染效果和项目中一致。

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