I am encountering an issue with the "canvas" screen on my storybook's Vue and Vuetify story. While other components are functioning correctly, this particular one is not working as expected. It appears that my story is unable to identify the 'mobile' property of Vuetify in this specific component. I have attempted to remove all SCSS related to mobile from the component, but without success.
The error displayed is:
TypeError: Cannot read property 'mobile' of undefined
at VueComponent.isMobile (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:289475:23)
at Watcher.get (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243936:25)
at Watcher.evaluate (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:244041:21)
at VueComponent.computedGetter [as isMobile] (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:244291:17)
at VueComponent.genHeaders (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:262289:24)
at VueComponent.genDefaultScopedSlot (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:262621:178)
at Object.normalized [as default] (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:242050:37)
at Proxy.render (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:261032:66)
at VueComponent.Vue._render (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243005:22)
at VueComponent.updateComponent (http://localhost:6006/vendors~main.68bb2399de94b0c69072.bundle.js:243523:21)
If I switch to the "docs" screen and reload the page, it renders properly.
Below are the Storybook configurations:
// main.js
const path = require('path');
module.exports = {
"stories": [
"../docs/**/*.stories.mdx",
"../docs/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
webpackFinal: async (config, { configType }) => {
config.resolve.alias = {
...config.resolve.alias,
"~": path.resolve(__dirname, "../"),
"@components": path.resolve(__dirname, "../src/components"),
};
config.module.rules.push({
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: `
@import "_variables";
@import "_globals";
@import "_main";
`,
sassOptions: {
includePaths: ['src/assets/scss'],
}
},
}
],
include: path.resolve(__dirname, '../'),
});
return config;
}
}
// Preview.js
import { addDecorator } from '@storybook/vue';
import vuetify from './vuetify_storybook';
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}
addDecorator(() => ({
vuetify,
template: `
<v-app style="height: 200px">
<story/>
</v-app>
`
}))
// vuetify__storybook.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import config from '../docs/plugins/vuetify.js';
Vue.use(Vuetify);
export default new Vuetify(config);
// vuetify.js (plugins/)
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css';
Vue.use(Vuetify);
export default new Vuetify({
theme: {
themes: {
light: {
primary: '#5C068C',
secondary: '#8345A5',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
},
},
},
icons: {
iconfont: 'mdi',
},
});