I'm currently utilizing Vue with TypeScript in Storybook. Unfortunately, there are no official TypeScript configurations available for using Vue with Storybook.
How can I set up Webpack so that I am able to import from another .storybook.ts file within a .storybook.ts?
Encountering an error message:
ERROR in ./src/components/Button/Button.stories.ts
Module not found: Error: Can't resolve '../Icon/Icon.stories'
in '/Users/dude/monorepo/frontend/storybook/src/components/Button'
The import causing the issue is:
import AppButton from './Button.vue';
import { iconPackOptions, iconPackDefaultValue } from '../Icon/Icon.stories';
The content of the file src/components/Icon/Icon.stories.ts looks like this:
import { storiesOf } from '@storybook/vue';
import { withKnobs, text, select } from '@storybook/addon-knobs';
import AppIcon from './Icon.vue';
// Knobs grouping
const groupId01 = 'icon';
// Icon Pack
export const iconPackOptions = {
None: false,
FontAwesomeProRegular: 'far',
FontAwesomeFreeBrands: 'fab'
};
export const iconPackDefaultValue = iconPackOptions.FontAwesomeProRegular;
The contents of ./.storybook/webpack.config.js file are as follows:
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');
module.exports = async ({ config }) => {
config.module.rules.push({
test: /\.css$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader'],
include: path.resolve(__dirname, '../'),
});
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../assets/styles')
});
config.resolve = {
extensions: ['.js', '.vue', '.json'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'assets': path.resolve('../src/assets'),
'@': path.join(__dirname, '../src'),
}
};
config.module.rules.push({
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
}
]
});
config.plugins.push(new ForkTsCheckerWebpackPlugin());
return config;
};
The content of ./.storybook/config.js file includes:
import { configure } from '@storybook/vue';
import '../src/plugins';
import '../src/assets/styles/main.scss';
const req = require.context('../src/components', true, /.stories.ts$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);