Storybook setup - Cannot set property '$q' of undefined

Describe the bug Cannot set property '$q' of undefined error on Object.installQuasar when trying to use Storybook/vue3

import {Quasar} from 'quasar';
import iconSet from 'quasar/icon-set/mdi-v4.js';
import lang from 'quasar/lang/de.js';
import '@quasar/extras/roboto-font/roboto-font.css';
import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
import '@quasar/extras/mdi-v4/mdi-v4.css';
import 'quasar/dist/quasar.css';
import { app } from '@storybook/vue3';

app.use(Quasar, {
  config: {},
  plugins: {},
  lang: lang,
  iconSet: iconSet
});

Codepen/jsFiddle/Codesandbox (required) https://github.com/alvarosaburido/quasar-v2-storyook-demo

To Reproduce Steps to reproduce the behavior:

1. Clone git clone https://github.com/alvarosaburido/quasar-v2-storyook-demo
2. Install deps
3. Run yarn storybook
4. See error on console

Expected behavior The standalone version of Quasar v2 using app.use(Quasar) works with Storybook and webpack

Screenshots

Platform (please complete the following information): Quasar Version: 2.0.0-beta.9 @quasar/app Version: N/A Quasar mode: [ ] SPA [ ] SSR [ ] PWA [ ] Electron [ ] Cordova [ ] Capacitor [ ] BEX Tested on: [x ] SPA [ ] SSR [ ] PWA [ ] Electron [ ] Cordova [ ] Capacitor [ ] BEX OS: Node: NPM: Yarn: Browsers: iOS: Android: Electron:

Additional context Not sure if it’s an issue with Quasar or with @storybook/vue3. If it’s not a Quasar thing let me know to open a ticket on the proper place

[holtalanm]

for anyone coming to this with the same issue I had (unit testing with jest), I was able to make it work as follows:

in jest.config.js:

  moduleNameMapper: {
    '^quasar$': 'quasar/dist/quasar.esm.prod.js'
  },

then i created a Quasar helper file, quasarSetup.ts:

import {config} from '@vue/test-utils'
import quasarUserOptions from '@/quasar-user-options.js'
import {Quasar} from 'quasar'
import {DefineComponent} from 'vue'

config.global.plugins.push([
    Quasar, 
    quasarUserOptions
])

export function wrapInLayout<C extends DefineComponent<{}, {}, any>>(component: C) {
    return {
        template: `
            <q-layout view="lHh Lpr lFf">
                <UnderTest v-bind="$attrs"/>
            </q-layout>
        `,
        components: {
            UnderTest: component
        }
    }
}

then, usage example.spec.ts:

import {mount} from '@vue/test-utils'
import {wrapInLayout} from '@/../tests/unit/imports/quasarSetup'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders', () => {
    const wrapper = mount(wrapInLayout(HelloWorld))
    const img = wrapper.find('img')
    expect(img.attributes('alt')).toMatch('Quasar logo')
  })
})

if you’re using an icon set, you may have to jest.mock any css files from those icon sets, but this got me going. Hope it helps!

[andreasphil]

For anyone coming across this issue while trying to set up Storybook + Vue 3 + Quasar 2 as a Vue CLI plugin, this is how I got it working:

Create a Vue CLI app, install the Quasar plugin and npx sb init --type=vue3 as usual. Then tell the Vue instance running in Storybook to use Quasar just like you would in your app’s main.ts by adding the following to your .storybook/preview.js file:

import { app } from "@storybook/vue3";
import { Quasar } from "quasar";
import quasarUserOptions from "../src/quasar-user-options";

app.use(Quasar, quasarUserOptions);

By default, Storybook doesn’t know how to handle the scss files imported in quasar-user-options and also won’t be able to resolve the Quasar variable paths. I fixed this by adding the following config in .storybook/webpack.config.js:

module.exports = ({ config }) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    "quasar-variables": "quasar/src/styles/quasar.variables.scss",
    "quasar-variables-styl": "quasar/src/css/variables.sass",
    "quasar-styl": "quasar/dist/quasar.sass",
    "quasar-addon-styl": "quasar/src/css/flex-addon.sass",
  };

  config.module.rules.push({
    test: /\.(scss|sass)$/,
    use: ["style-loader", "css-loader", "sass-loader"],
    include: path.resolve(__dirname, "../"),
  });

  return config;
};

I discovered the file paths by inspecting Vue’s webpack config (vue-cli-service inspect). Apparently the CLI plugin adds some aliases so we can import cleaner file names. Only tested it with small components so far but it seems to work just fine. Hope that helps.

Thanks @alvarosaburido, your descriptions pointed me in the right direction!