Storybook does not render correct image path - reactjs

I have a react project, when I run "yarn build-storybook", the image doesn't load. But when removing the slash by devtools it works. What can it be?
// main.js
module.exports = {
addons: ['#storybook/addon-essentials'],
framework: '#storybook/react',
stories: ['../src/components/**/stories.tsx'],
core: {
builder: '#storybook/builder-webpack5'
staticDirs: ['../public']
// index.tsx (my-component)
import * as S from './styles'
const Main = () => {
return (
alt='Lorem ipsum'
export default Main
// stories.tsx
import { ComponentStory, ComponentMeta } from '#storybook/react'
import Main from '.'
export default {
title: 'Main',
component: Main
} as ComponentMeta<typeof Main>
export const Basic: ComponentStory<typeof Main> = () => <Main />
not working (generate by storybook)
working (after remove slash manually)


EditorJS is not showing in NextJS even it is loaded through SSR:false

so I am integrating EditorJs with the NextJs app I have done the initialization in the console it shows Editojs is ready but on the screen, it is not visible
can anyone please tell me what I am doing wrong I am sharing my code below
import { createReactEditorJS } from 'react-editor-js'
import { EditorTools } from './EditorTools';
import React, { useEffect } from 'react'
const Editor = () => {
const ReactEditorJS = createReactEditorJS();
return (
<ReactEditorJS holder="customEditor" tools={EditorTools}>
<div id="customEditor" />
export default Editor
import Header from '#editorjs/header';
export const EditorTools = {
header: {
class: Header,
config: {
placeholder: 'Let`s write an awesome story! ✨',
import React from 'react'
import dynamic from 'next/dynamic';
const EditorJSNoSSRWrapper = dynamic(import('../../../components/Editor/Editor'), {
ssr: false,
loading: () => <p>Loading ...</p>,
const create = () => {
return (
<EditorJSNoSSRWrapper />
export default create

storybook 6. can't find file path, needs absolute path

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: [
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.
export * from './lib/atoms';
export * from './lib/molecules';
export * from './lib/organisms';
export Avatar from './Avatar';
export Badge from './Badge';
export BusyLoader from './BusyLoader';
export ModuleTitle from './ModuleTitle';
const Avatar = () => <span>something</span>
export default Avatar;

Couldn't find story matching - React + Storybook

I am unable to display a story using next.js.
Other stories of the app work fine. This one doesn't. Please I have been banging my head against the wall for 3 hours.
import { ComponentMeta, ComponentStory } from '#storybook/react';
import React from 'react';
import { mockAvailability } from './SpaceAvailability.test';
import SpaceAvailability from './index';
export default {
title: 'SpaceAvailability',
component: SpaceAvailability,
} as ComponentMeta<typeof SpaceAvailability>;
const Template: ComponentStory<typeof SpaceAvailability> = (args) => (
<SpaceAvailability {...args} />
export const WeekStartsMonday = Template.bind({});
WeekStartsMonday.args = {
availability: mockAvailability,
weekStartsOnMonday: true,
export const WeekStartsSunday = Template.bind({});
WeekStartsMonday.args = {
availability: mockAvailability,
weekStartsOnMonday: false,
If I preview the story I get:

React - frontend component test with Jest

I've just written test file for my component, at the moment it's very rudimentary.. I'm quite inexperience in written test for frontend. I ran yarn test to this test file and it failed miserably..
Here is the message:
Unable to find an element with the text: Please review your billing details...
This is what I have so far for my test:
import React from 'react';
import { render, cleanup, waitForElement } from 'react-testing-library';
// React Router
import { MemoryRouter, Route } from "react-router";
import Show from './Show';
test('it shows the offer', async () => {
const { getByText } = render(
<MemoryRouter initialEntries={['/booking-requests/20-A1-C2/offer']}>
render={props => (
<Show {...props} />
//displays the review prompt
await waitForElement(() => getByText('Please review your billing details, contract preview and Additions for your space. Once you’re happy, accept your offer'));
//displays the confirm button
await waitForElement(() => getByText('Confirm'));
and this is the component:
// #flow
import * as React from 'react';
import i18n from 'utils/i18n/i18n';
import { Btn } from '#appearhere/bloom';
import css from './Show.css';
import StepContainer from 'components/Layout/DynamicStepContainer/DynamicStepContainer';
const t = i18n.withPrefix('');
const confirmOfferSteps = [
title: t('title'),
breadcrumb: t('breadcrumb'),
title: i18n.t('client.apps.offers.billing_information.title'),
breadcrumb: i18n.t('client.apps.offers.billing_information.breadcrumb'),
title: i18n.t('client.apps.offers.confirm_pay.title'),
breadcrumb: i18n.t('client.apps.offers.confirm_pay.breadcrumb'),
class Show extends React.Component<Props> {
steps = confirmOfferSteps;
renderCtaButton = (): React.Element<'Btn'> => {
const cta = t('cta');
return <Btn className={css.button} context='primary'>
renderLeftContent = ({ isMobile }: { isMobile: boolean }): React.Element<'div'> => (
{!isMobile && this.renderCtaButton()}
renderRightContent = () => {
return <div>Right content</div>;
render() {
const ctaButton = this.renderCtaButton();
return (
export default Show;
what am I missing? Suggestions what else to add to my test file would be greatly appreciated!

Render base component based on .env config varibles

I want to show the root component of the App based on config variable from react-native-config
I want to achieve something like this. I have a IS_STORYBOOK variable in the .env file, i want to setup my environment so i can just set the value from config and switch to main application and storyboard mode in my react-native application.
By doing this way.. i am getting this error bundling failed: SyntaxError: D:\Projects\React\React-Native Sample app\MobileApp\App.js: 'import' and 'export' may only appear at the top level (62:1)
import React from 'react'; // eslint-disable-line
import { Provider } from 'react-redux';
import { pushNotifications } from './src/global/services';
import configureStore from './src/store/configureStore';
import {StackNavigator, createDrawerNavigator } from 'react-navigation'
import { generateStack } from './src/navigation/routesBuilder'
import Drawer from './src/components/drawer/container'
import {items} from './src/components/drawer/draweritems';
import DrawerIcon from './src/components/navIcons/drawerIcon'
import {data} from './src/global/data'
import {scale} from './src/utils/scale'
import StoryBook from './storybook';
import Config from 'react-native-config'
const store = configureStore();
const drawerRoutes = {"app.home":{
screen:generateStack("app.home", "Home", true,true)
for(var i=0; i<items.length; i++){
drawerRoutes[items[i].navigateTo] = {
screen : generateStack(items[i].navigateTo, items[i].title, true, true),
const RootStack = StackNavigator({
Splash: {
screen: generateStack('app.splash', '', false, false),
header: null
Auth: {
screen : generateStack('auth.login', '', false, false),
header: null
screen : createDrawerNavigator({
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
drawerIcon : (<DrawerIcon />),
contentComponent: (props) => <Drawer {...props}/>
}, {
export default class App extends React.Component {
render() {
return <StoryBoard />
} else {
<Provider store={store}>
<RootStack />
import { AppRegistry } from "react-native";
import { getStorybookUI, configure } from "#storybook/react-native";
import { loadStories } from "./storyLoader";
configure(() => {
}, module);
const StorybookUI = getStorybookUI({
port: 7007,
host: "localhost",
onDeviceUI: true,
resetStorybook: true
AppRegistry.registerComponent("sampleproject", () => StorybookUI);
export { StorybookUI as default };
// .env
React components are bundled during build-time and not during run-time.
You cannot conditionally export or import your components. Instead you should conditionally render stuff in your components.
Something like this might work for you
import StoryBook from './storybook';
export default class App extends React.Component {
render() {
<Provider store={store}>
<RootStack />
} else {
return <StoryBook />