Static build bug. Build creates storybook that opens storybook instead of stories in an infinite loop

[speculees]

The bug appears when I build static storybook only with yarn build-storybook . Development built with yarn storybook works as expected. Once static storybook is deployed the sort of loads it self recursively in an infinite loop. Spent whole day debugging but no luck. It would be great if anyone could help me out with this. I am using "yarn workspaces" with typescript and I expect that might be an issue, but I'm not sure. There is no error in console.

Steps to reproduce the behavior:

1. From packages/x-components run I yarn build-storybook
2. Then I run serve -s storybook-static

I expect the static and dev builds should pull pull same stories

Screenshot:

System:
OS: Linux 5.3 Arch Linux undefined
CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1535M v5 @ 2.90GHz
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Firefox: 69.0.2
Version 77.0.3865.90 (Official Build) Arch Linux (64-bit)

x-web-app/packages/x-components
| - package.json
| - tsconfig.json
| - .storybook
| |- addons.js
| |- config.js
| - src
| | - componenets
| | - stories
| | | - index.tsx

addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

config.js

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories/index.tsx');
}

configure(loadStories, module);

package.json in x-components

{
   ...
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "dependencies": {
    "@material-ui/core": "^4.4.1",
    "@material-ui/icons": "^4.4.1",
    "@material-ui/lab": "^4.0.0-alpha.26",
    "@storybook/addon-options": "^5.2.1",
    "@storybook/addon-links": "^5.2.1",
    "@storybook/addons": "^5.2.1",
    "@storybook/react": "^5.2.1",
    "react": "^16.9.0",
    "react-swipeable-views": "^0.13.3",
    "react-swipeable-views-utils": "^0.13.3"
  },
  "devDependencies": {
    "@types/jest": "24.0.18",
    "@types/node": "^12.7.5",
    "@types/react": "^16.9.2",
    "@types/react-dom": "16.9.0",
    "@types/storybook__react": "^4.0.2",
    "formik": "^1.5.8",
    "react-scripts": "3.1.1",
    "typescript": "3.5.3"
  },
  "scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch",
    "storybook": "start-storybook -p 9009",
    "build-storybook": "build-storybook"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

package.json in project root

{
  ...
  "license": "MIT",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "start": "concurrently 'yarn workspace @x/frontend start' 'yarn workspace @x/components build' 'yarn workspace @x/func-lib build'"
  },
  "devDependencies": {
    "concurrently": "^4.1.2"
  }
}

stories.tsx

import React from 'react';

import { storiesOf } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { action } from '@storybook/addon-actions';
// import { linkTo } from '@storybook/addon-links';
import { Formik } from 'formik';

import * as Components from '../';
import { TabsDesktop, TabsMobile } from './tabs';
import { Buttons } from './buttons';
import { Inputs } from './inputs';

withOptions({
  hierarchySeparator: /\//,
  hierarchyRootSeparator: /\|/,
});

storiesOf('Components|Buttons', module)
  .add('Button', () => (
    <Components.Theme>
      <Buttons />
    </Components.Theme>
  ));

storiesOf('Components|Tabs', module)
  .add('Desktop', () => (
    <Components.Theme>
      <TabsDesktop />
    </Components.Theme>
  ));

storiesOf('Components', module)
  .add('Inputs', () => (
    <Components.Theme>
      <Inputs />
    </Components.Theme>
  ));

storiesOf('Templates|Main', module)
  .add('Header', () => {
    return (
      <Components.Theme>
        <Components.Templates.Header />
      </Components.Theme>
    );
  });

storiesOf('Templates|Forms', module)
  .add('Sign In', () => {
    const submitAction = action('submit');

    return (
      <Components.Theme>
        <Components.Grid item md={2}>
          <Formik initialValues={{ email: '', password: '' }}
            isInitialValid={() => true}
            onSubmit={(values, { setSubmitting }) => {
              setSubmitting(true);
              submitAction(values);
            }}
            children={formik => <Components.Templates.SignIn form={formik} />}
          />
        </Components.Grid>
      </Components.Theme>
    );
  });

[speculees]

I Just created an new project without yarn workspaces and got the same issue. Here are my steps

  create-react-app storybook-test
  cd storybook-test/
  npx -p @storybook/cli sb init --type react
  yarn storybook                                      // test if demo story renders as expected in dev
  yarn build-storybook                            // and now static ...
  serve -s storybook-static                      // same bug appears

[shilman]

Dupe to #5269

Just serve from within the directory or use a different HTTP server