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

heyimalex · 2020-08-24T05:19:21Z

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

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

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

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.

The text was updated successfully, but these errors were encountered:

shilman · 2020-08-24T07:27:08Z

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 · 2020-09-14T07:56:00Z

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 · 2020-09-22T23:58:21Z

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 · 2020-09-23T00:04:02Z

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()

bokub · 2021-10-18T14:39:32Z

I encountered the same problem with dayjs.

My workaround was to use substract instead of add:

- dayjs().add(1, 'day').format('YYYY-MM-DD')
+ dayjs().subtract(-1, 'day').format('YYYY-MM-DD')

pbjorklund · 2022-01-25T10:41:53Z

Same issue (and giving a var as first arg to add workaround) still persists today with

addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-knobs",
    "@storybook/addon-links/register",
    "storybook-addon-designs/register",
    "@storybook/preset-create-react-app",
    "@storybook/addon-storysource",
],
core: {
    builder: 'webpack5',
  },

lizthegrey · 2022-02-09T09:44:48Z

I can reproduce this problem with the webpack5 builder at 6.4.18 as well. Suspecting the fix in #11920 didn't quite fully do it.

msakrejda · 2022-03-02T01:08:20Z

I just hit this as well (upgrading from 6.4.0-beta.11 to 6.4.19). I'm using storybook-builder-vite for what it's worth. @jaredcwhite's workaround worked for me (thanks!).

apedroferreira · 2022-05-24T00:48:55Z

same here with dayjs(...).add(...)

robbeman · 2022-06-01T08:54:23Z

A silly workaround 🙃

dayjs().subtract(-1, 'day');

rhuanbarreto · 2022-06-17T12:35:55Z

Discovered the same here with dayjs().add(). Storybook v6.5.3

acherkashin · 2022-06-17T15:39:39Z

I face the same issue with moment: moment().add(days, 'days').

module.exports = {
  webpackFinal: config => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        modules: [...(config.resolve.modules || []), path.resolve('./src')],
      },
    };
  },
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
};

node version - 16.14.0

packages:

    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-console": "^1.2.3",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/node-logger": "^6.5.9",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",

btw, previously I used ejected CRA and manually merged ejected CRA webpack config with storybook config and didn't have this issue. Currently we've forked CRA and use @storybook/preset-create-react-app and got this issue.

shilman · 2022-09-27T03:50:52Z

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.34 containing PR #18930 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

vladstarikov88 · 2022-12-26T11:16:33Z

@shilman is it possible to merge this PR to LTS version? 6.15 for example

Cilia94 · 2023-01-19T16:55:39Z

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()

I found another solution based on your reply! Instead of having to define an additional variable to pass down, you can use a template literal:

dateString = moment().add(`${10}`, "days").format()

eranimo · 2023-01-27T22:50:53Z

This needs to be backported to v6

heyimalex changed the title ~~Storybook warns when any function named add is called in story file with non-string first arg.~~ Storybook warns when function named add is called in story file. Aug 24, 2020

shilman added bug has workaround source-loader labels Aug 24, 2020

stale bot added the inactive label Sep 14, 2020

stale bot removed the inactive label Sep 22, 2020

jaredcwhite mentioned this issue Sep 23, 2020

Component cleanup bloom-housing/bloom#708

Merged

shilman mentioned this issue Sep 24, 2020

Refactor: Split out docs-loader from source-loader #12561

Closed

4 tasks

shilman mentioned this issue Nov 10, 2020

Method call in story which looks like xyz.add(arg1, arg2) breaks story #13068

Closed

nickofthyme mentioned this issue Aug 31, 2021

v6 source-loader / addon-storysource not working, when default and named export of stories are defined in two different files #12199

Open

kibaek-kimm mentioned this issue Jan 14, 2022

webpack build freezes at 70% when I save a file in watch mode #13482

Closed

zhyd1997 mentioned this issue Aug 14, 2022

Source-loader: Fix invalid call to CSF sanitize #18930

Merged

3 tasks

shilman closed this as completed Sep 27, 2022

not-inept mentioned this issue Mar 16, 2023

Backport: Source-loader: Fix invalid call to CSF sanitize #21638

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

heyimalex commented Aug 24, 2020

shilman commented Aug 24, 2020

stale bot commented Sep 14, 2020

jaredcwhite commented Sep 22, 2020 •

edited

Loading

jaredcwhite commented Sep 23, 2020

bokub commented Oct 18, 2021 •

edited

Loading

pbjorklund commented Jan 25, 2022

lizthegrey commented Feb 9, 2022

msakrejda commented Mar 2, 2022

apedroferreira commented May 24, 2022

robbeman commented Jun 1, 2022

rhuanbarreto commented Jun 17, 2022

acherkashin commented Jun 17, 2022

shilman commented Sep 27, 2022

vladstarikov88 commented Dec 26, 2022

Cilia94 commented Jan 19, 2023

eranimo commented Jan 27, 2023

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

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

Comments

heyimalex commented Aug 24, 2020

shilman commented Aug 24, 2020

stale bot commented Sep 14, 2020

jaredcwhite commented Sep 22, 2020 • edited Loading

jaredcwhite commented Sep 23, 2020

bokub commented Oct 18, 2021 • edited Loading

pbjorklund commented Jan 25, 2022

lizthegrey commented Feb 9, 2022

msakrejda commented Mar 2, 2022

apedroferreira commented May 24, 2022

robbeman commented Jun 1, 2022

rhuanbarreto commented Jun 17, 2022

acherkashin commented Jun 17, 2022

shilman commented Sep 27, 2022

vladstarikov88 commented Dec 26, 2022

Cilia94 commented Jan 19, 2023

eranimo commented Jan 27, 2023

jaredcwhite commented Sep 22, 2020 •

edited

Loading

bokub commented Oct 18, 2021 •

edited

Loading