Storybook: Build Error when story title is not simple string

[am-ma]

Hi.
I am trying to follow the Storybook Docs recipe located here to generate story title automatically.
But ...

Describe the bug
Storybook build error when title is not simple string.

error log:

  Module build failed (from ./node_modules/@storybook/source-loader/dist/server/index.js):
TypeError: Cannot read property 'toLowerCase' of undefined
    at sanitize (/project folder/@storybook/router/dist/utils.js:63:17)
    at sanitizeSafe (/project folder/@storybook/router/dist/utils.js:70:19)
    at toId (/project folder/@storybook/router/dist/utils.js:81:20)
    at handleExportedName (/project folder/@storybook/source-loader/dist/server/abstract-syntax-tree/parse-helpers.js:88:6)
    at Controller.enter (/project folder/@storybook/source-loader/dist/server/abstract-syntax-tree/traverse-helpers.js:103:60)
    at Controller.__execute (/project folder/estraverse/estraverse.js:330:31)
    at Controller.traverse (/project folder/estraverse/estraverse.js:434:28)
    at Object.traverse (/project folder/estraverse/estraverse.js:646:27)
    at findExportsMap (/project folder/@storybook/source-loader/dist/server/abstract-syntax-tree/traverse-helpers.js:96:14)
    at generateStoriesLocationsMap (/project folder/@storybook/source-loader/dist/server/abstract-syntax-tree/generate-helpers.js:138:63)
    at inject (/project folder/@storybook/source-loader/dist/server/abstract-syntax-tree/inject-decorator.js:74:56)
    at readAsObject (/project folder/@storybook/source-loader/dist/server/dependencies-lookup/readAsObject.js:45:47)
    at readStory (/project folder/@storybook/source-loader/dist/server/dependencies-lookup/readAsObject.js:100:10)
    at Object.transform (/project folder/@storybook/source-loader/dist/server/build.js:15:38)
 @ ./src sync \.stories\.(tsx|mdx)$ ./stories/HogeHoge.stories.tsx
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/../../../react/config.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Code snippets
Working:

export default {
  title: 'hoge',
};

Not Working:

export default {
  title: `hoge`,
};

```js
const hoge = 'hoge';
export default {
title: hoge,
};

```js
const hoge = 'hoge';
export default {
  title: hoge + 'huga',
};

System:

• React + TypeScript

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 10.16.3
    npm: 6.9.0
  npmPackages:
    @storybook/addon-actions: ~5.2.3 => 5.2.3 
    @storybook/addon-docs: ~5.2.3 => 5.2.3 
    @storybook/addon-info: ~5.2.3 => 5.2.3 
    @storybook/addon-links: ~5.2.3 => 5.2.3 
    @storybook/addon-storysource: ~5.2.3 => 5.2.3 
    @storybook/addons: ~5.2.3 => 5.2.3 
    @storybook/preset-scss: ^1.0.2 => 1.0.2 
    @storybook/preset-typescript: ^1.1.0 => 1.1.0 
    @storybook/react: ~5.2.3 => 5.2.3 

[candentira]

Couldn't reproduce any case mentioned as Not Working - everything was working fine for me.
@am-ma could you please create commit with the problem (how you're getting an issue)?

[am-ma]

@candentira
I made a minimal sample app.
https://github.com/am-ma/ts-react-storybook

Working: https://github.com/am-ma/ts-react-storybook/blob/master/src/components/stories/Button.stories.tsx

Not Working: https://github.com/am-ma/ts-react-storybook/blob/master/src/components/stories/ButtonBreak.stories.tsx

I hope you check it 🙏

[Undistraction]

I'm seeing the same thing.

Only difference is the use of backticks instead of quotes around the title:

OK:

import { Button } from '@sleepstation/components'
import React from 'react'

export default {
  title: 'buttons/Button',
  component: Button,
}

export const basic = () => <Button>Button</Button>

export const withIcon = () => <Button icon="placeholder">Button</Button>

Error:

import { Button } from '@sleepstation/components'
import React from 'react'

export default {
  title: `buttons/Button`,
  component: Button,
}

export const basic = () => <Button>Button</Button>

export const withIcon = () => <Button icon="placeholder">Button</Button>

[jannnik]

I have the same issue with this code:

import * as React from 'react';
import { ProgressBar } from './ProgressBar';

export default {
  title: ProgressBar.name
};

[Promhize]

@jannnik try replacing ProgressBar.name with the actual string

[MarttiR]

This started happening after installing the storysource addon and adding @storybook/source-loader to webpack configuration; the error message points to the loader too.

Removing the storysource addon fixes the build.

My default export looks like this:

export default {
  title: __filename.split('.')[0],
};

I would really prefer to not have to name components manually because it duplicates information that can then get out of sync.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Undistraction]

Not stale. Still broken.

[atanasster]

This is fixed since v5.3.0-beta.14, so I think we can close this unless someone reports still issues.

To recap:

1.

export default {
  title: __filename.split('.')[0],
};

this doesn't work as it starts with a / and is only one leaf. To make it work, something like that will work:

export default {
  title: `Root${__filename.split('.')[0]}`,
};

1. Similar with the name/displayName of a component:

import { DocgenButton } from '../../components/DocgenButton';
export default {
  title: `Components/${DocgenButton.displayName}`,
};

1. Works:

export default {
  title: `buttons/Button`,
  component: Button,
}

1. Works:

const hoge = 'hoge';
export default {
  title: hoge + '/huga',
};