storybook can't find file path, needs absolute path

Viewed 10

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;
0 Answers
Related