Storybook missing some stories/components on clean npm install

[jonathanhuang13]

Versions and Environment

    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/react": "^6.2.9",
    "react": "17.0.1",
    "typescript": "^4.1.3"

All of these are dev dependencies except react.

Issue

When I develop locally and run npm run storybook (start-storybook -p 6006), I see all of my components in Storybook (localhost:6006). However, when I run a docker container, clone my repo, and run npm run storybook, some of the components are missing (some of them exist though).

I've checked that all of my stories are named correctly and in the right folder.

Files

// .storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-links', 'storybook-addon-designs'],
  webpackFinal: async (config) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        // Add the sass loader to process scss files (must be at end)
        'sass-loader',
      ],
    });

    return config;
  },
};

// .storybook/preview.js
import { withDesign } from 'storybook-addon-designs';

import '../styles/globals.scss';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

export const decorators = [withDesign];

Example of a story that goes mysteriously missing:

// stories/Card.stories.tsx
import React from 'react';
import { Story, Meta } from '@storybook/react';

import Card, { CardProps } from 'components/Card';

export default {
  title: 'EmailTemplateCard',
  component: Card,
  argTypes: { onToggleActive: { action: 'changed' }, onClickCard: { action: 'changed' } },
} as Meta;

const Template: Story<CardProps> = (args) => <Card {...args} />;

export const InactiveCard = Template.bind({});
InactiveCard.args = {
  active: false,
  selected: false,
};

Example of story that does not go missing:

// stories/Headers/Header.stories.tsx

import React from 'react';
import { Story, Meta } from '@storybook/react';

import Header, { HeaderProps } from 'components/header';

export default {
  title: 'Headers/Base',
  component: Header,
  argTypes: {
    logoType: {
      type: 'radio',
      options: ['full', 'wordmark-only', 'icon-only'],
    },
  },
} as Meta;

const Template: Story<HeaderProps> = (args) => <Header {...args} />;

export const Base = Template.bind({});
Base.args = {
  logoType: 'full',
  isMenuOpen: false,
};

Created an issue #15011