One particular story is not loading

[allison-palum]

Hello! I have been building a UI component library with the help of storybook.

• Storybook version: 6.3.2
• npm version: 6.13.7

I am workin on my 25th component in the library, a Tabs component.

My file structure is...

src/
    ...
    stories/
        ComponentName/
            ComponentName.stories.js
    ...

My main.js is...

module.exports = {
	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
	addons: [
		'@storybook/addon-links',
		'@storybook/addon-essentials',
		'@storybook/addon-actions',
		'@storybook/addon-knobs',
		'@storybook/addon-queryparams',
		'@storybook/addon-docs',
		'@storybook/addon-controls',
		'@storybook/preset-create-react-app',
	],
};

Every component loads when I run npm run storybook except for my Tabs component despite being formatted the same as every other components. Also, I have attempted to add the Tabs component to other components' stories and it shows up, so I know it doesn't have to do with the actual Tabs component.

import React from 'react';

//storybook
import { withKnobs, array, number } from '@storybook/addon-knobs';

//components
import { Tabs } from '../../components';

const loremIpsumText = ```
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```;

const tabItems = [
    {
        label: 'Tab 1',
        conent: <div><h1>Tab One</h1><p>{loremIpsumText}</p><p>{loremIpsumText}</p><p>{loremIpsumText}</p></div>
    },
    {
        label: 'Tab 2',
        conent: <div><h1>Tab Two</h1><p>{loremIpsumText}</p></div>
    },
    {
        label: 'Tab 3',
        conent: <div><h1>Tab Three</h1><p>{loremIpsumText}</p><p>{loremIpsumText}</p></div>
    },
];

const tabsProps = () => ({
    tabs: array('Tabs (tabs)', tabItems),
    activeIndex: number('Active tab index (activeIndex)', 0)
});

const config = {
	title: 'Components/Tabs',
	component: Tabs,
	decorators: [withKnobs],
};
export default config;

const Template = (args) => <Tabs {...args}/>;

export const Standard = Template.bind({});
Standard.args = {
    ...tabsProps()
};