Storybook-addon-queryparams fails to render

[thekevinscott]

Describe the bug Attempting to include the decorator storybook-addon-queryparams fails to render.

To Reproduce

1. Clone example repo here
2. yarn && yarn storybook
3. Navigate to localhost:6006
4. Observe the following error:

TypeError: Cannot read property 'name' of undefined
    at http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:1338:37
    at http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:2655:14
    at http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:2656:16
    at withSubscriptionTracking (http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:2684:16)
    at http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:1353:21
    at http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:2655:14
    at http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:1381:20
    at storyFn (http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:3769:30)
    at renderWithHooks (http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:52095:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors~main.bccc2dbc461fd5b264d0.bundle.js:54629:13)

Expected behavior I expect the decorator to work.

Code snippets https://github.com/thekevinscott/test-storybook-addon-queryparams

System:

npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (4) x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
  Binaries:
    Node: 11.10.1 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Firefox: 71.0
  npmPackages:
    @storybook/addon-actions: ^5.3.3 => 5.3.3
    @storybook/addon-links: ^5.3.3 => 5.3.3
    @storybook/addon-queryparams: ^5.3.3 => 5.3.3
    @storybook/addons: ^5.3.3 => 5.3.3
    @storybook/react: ^5.3.3 => 5.3.3

Additional context It appears the docs are not set up to use "Component Story Format"; I tried to translate the installation procedures.

[shilman]

cc @ndelangen

[ndelangen]

Happy to help you fix this bug if you want, schedule a meeting with me?

https://calendly.com/ndelangen/storybook

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

[yannbf]

Hey @thekevinscott, sorry you experienced issues with your setup. I checked your repo and in your Button stories you were using withQuery as a default export but it's actually a named export! Once you fix that, the addon should work with no issues.

Another thing to note is that you should access the search params via document.location.search or window.location.search rather than document.search. I did notice that in the README of addon-queryparams the example shows document.search, so I will be fixing that. Thanks for opening this issue, it helps us improve things 😄

here's what you gotta do to fix your issue:

import React from 'react';
import { Button } from '@storybook/react/demo';
- import withQuery from '@storybook/addon-queryparams';
+ import { withQuery } from '@storybook/addon-queryparams';

export default {
  title: 'Button',
  component: Button,
  decorators: [
    withQuery,
  ],
  parameters: {
    query: {
      mock: true,
    },
  },
};

- export const Text = () => <div>{document.search}</div>;
+ export const Text = () => <div>{document.location.search}</div>;

Let me know if that helps!