Storybook: Storybook warns when function named add is called in story file.

[heyimalex]

Storybook issues a warning when any function named add is called with a non-string first arg. The warning happens at build time, and doesn't trigger if the add function isn't being called as a property (ie must be blah.add(1,2)).

The warning generated:

WARNING in ./src/stories/Button.stories.tsx
Module build failed (from ./node_modules/@storybook/source-loader/dist/index.js):
TypeError: string.toLowerCase is not a function
    at sanitize (/Users/alexander.guerra/sbtest/node_modules/@storybook/csf/dist/index.js:27:17)
    at handleADD (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/parse-helpers.js:173:15)
    at Controller.enter (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/traverse-helpers.js:138:54)
    at Controller.__execute (/Users/alexander.guerra/sbtest/node_modules/estraverse/estraverse.js:330:31)
    at Controller.traverse (/Users/alexander.guerra/sbtest/node_modules/estraverse/estraverse.js:434:28)
    at Object.traverse (/Users/alexander.guerra/sbtest/node_modules/estraverse/estraverse.js:646:27)
    at findAddsMap (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/traverse-helpers.js:132:14)
    at generateAddsMap (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/generate-helpers.js:209:43)
    at generateStoriesLocationsMap (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/generate-helpers.js:213:22)
    at inject (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/inject-decorator.js:65:66)
    at readAsObject (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/dependencies-lookup/readAsObject.js:26:48)
    at readStory (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/dependencies-lookup/readAsObject.js:42:10)
    at Object.transform (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/build.js:13:38)
 @ \.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$ (./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$) ./stories/Button.stories.tsx
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

To Reproduce

1. create-react-app + sb init a basic project
2. Go into one of the auto-generated stories and add this:

const blah = { add: (a, b) => a + b };
blah.add(1, 2);

1. run yarn storybook

The warning message should show up in the console during build. The warning is also issued without including the first line (so the second line is what actually triggers it), but I included it just to prove that it fails on valid code.

Expected behavior

There shouldn't be a build time warning; this is valid code.

System:

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-actions: ^6.0.16 => 6.0.16
    @storybook/addon-essentials: ^6.0.16 => 6.0.16
    @storybook/addon-links: ^6.0.16 => 6.0.16
    @storybook/node-logger: ^6.0.16 => 6.0.16
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^6.0.16 => 6.0.16

Additional context

From my reading of the warning (handleADD in @storybook/source-loader/dist/abstract-syntax-tree/parse-helpers.js), it looks like this is caused by some special parsing of storybook files. My guess is the parser is trying to pull out storiesOf(...).add( calls. The error message, string.toLowerCase is not a function, jives with this: storybook's add takes a string as the first param, but I pass in a number. To drive this home, the build _doesn't_ issue this warning if you change the line added to blah.add("1", "2").

Workaround

Ran into this because we were defining a constant using moment.add(...). Changing the property access to use bracket notation (ie moment["add"](...) fixed the issue.

[shilman]

That's exactly right. I think fix here is to create a source-loader replacement that:

• is optimized, cleaned, tested
• only handles CSF and doesn't worry about storiesOf format

[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!

[jaredcwhite]

This is still very much a bug! We're having problems with moment.add in some of our stories, even with v6.0.21. Same error message: string.toLowerCase is not a function

[jaredcwhite]

Seems like a workaround is to assign the number to a variable ahead of time, e.g.:

const days = 10
dateString = moment().add(days, "days").format()