Before storybook update (from 5 to 6) I could just write
import { Avatar } from 'src';
and it was ok , but now only
import AvatarComponent from 'src/lib/atoms/Avatar/index';
here is my main.js
const path = require('path');
const aliasPaths = {
src: '../src/',
utils: '../src/utils',
lib: '../src/lib/',
wrappers: '../src/wrappers/index.js',
configs: '../src/configs.js',
hooks: '../src/hooks/index.js',
indexof: '../src/utils/indexof.js'
};
module.exports = {
stories: ['./../stories/*/**/*.stories.jsx'],
addons: [
'@storybook/addon-controls',
'@storybook/addon-actions',
'@storybook/preset-scss',
'@storybook/addon-storysource',
'storybook-dark-mode/register',
{
name: '@storybook/addon-docs',
options: {
configureJSX: true
}
}
],
framework: '@storybook/react',
core: {
builder: 'webpack5'
},
webpackFinal: async (config) => {
for (let aliasPath in aliasPaths) {
config.resolve.alias[aliasPath] = path.resolve(__dirname, aliasPaths[aliasPath]);
}
return config;
}
};
what i'm doing wrong.
and error is
Couldn't find story matching 'atoms-Avatar'.
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.
src/index.js
export * from './lib/atoms';
export * from './lib/molecules';
export * from './lib/organisms';
lib/atoms/index.js
export Avatar from './Avatar';
export Badge from './Badge';
export BusyLoader from './BusyLoader';
export ModuleTitle from './ModuleTitle';
lib/atoms/Avatar/index.js
const Avatar = () => <span>something</span>
export default Avatar;