Setting Vue props via a variable in the story file

RyanHavoc commented 3 years ago

Describe the bug Prior to version 6.2.9 the following Story worked:

const org = { name: 'example-org' };

export const Default = () => ({
  components: { Projects },
  store: getClonedStore(),
  props: {
    org: { default: org },
  },
  provide: { user, org, group, requirements },
  template: `<Projects :org="org" />`,
});

Now there's an error saying org is null.

If I change it to this it works again:

const org = { name: 'example-org' };

export const Default = () => ({
  components: { Projects },
  store: getClonedStore(),
  data() {
    return {
      org,
    };
  },
  provide: { user, org, group, requirements },
  template: `<Projects :org="org" />`,
});

There appears to be some form of regression in the latest version. We were previously on 6.1.21.

We plan to move to the new format, but have hundreds of stories that need reworking and want to do this gradually.

Does anyone have any idea how we can fix this?

System

Environment Info:

  System:
    OS: macOS 11.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/Code/snyk/registry/frontend/node_modules/.bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 82.0.2
    Safari: 14.1
  npmPackages:
    @storybook/addon-a11y: ^6.2.9 => 6.2.9
    @storybook/addon-actions: ^6.2.9 => 6.2.9
    @storybook/addon-backgrounds: ^6.2.9 => 6.2.9
    @storybook/addon-docs: ^6.2.9 => 6.2.9
    @storybook/addon-queryparams: ^6.2.9 => 6.2.9
    @storybook/addon-storysource: ^6.2.9 => 6.2.9
    @storybook/preset-typescript: ^3.0.0 => 3.0.0
    @storybook/source-loader: ^6.2.9 => 6.2.9
    @storybook/vue: ^6.2.9 => 6.2.9

shilman commented 3 years ago

@RyanHavoc do you have a repro repo you can share? can you possibly bisect to figure out precisely which version introduced the regression?

RyanHavoc commented 3 years ago

I've just tried to create a fresh Vue instance of Storybook and unfortunately npx sb init (and selecting Vue) results in a failure to build, this is what I see:

» npm run storybook

> storybook6.2@1.0.0 storybook /Users/ryanhavoc/Code/snyk/experiments/storybook6.2
> start-storybook -p 6006

info @storybook/vue v6.2.9
info
info => Loading presets
info => Loading 1 config file in "/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/.storybook"
info => Loading 7 other files in "/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/.storybook"
info => Adding stories defined in "/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/.storybook/main.js"
info => Using prebuilt manager
info => Using implicit CSS loaders
info => Using default Webpack4 setup
(node:27318) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
10% building 1/2 modules 1 active /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefinedℹ ｢wdm｣: wait until bundle finished:
11% building 9/21 modules 12 active /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.jsThough the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
11% building 11/21 modules 10 active /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.jsThough the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
12% building 24/31 modules 7 active /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/.storybook/preview.jsThough the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
15% building 43/51 modules 8 active /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/core-js/modules/es.regexp.to-string.jsThough the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
18% building 69/110 modules 41 active /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/core-js/modules/es.array.find.jsThough the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
21% building 93/113 modules 20 active /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/core-js/internals/fix-regexp-well-known-symbol-logic.jsThough the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
23% building 111/146 modules 35 active /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/core-js/internals/array-species-create.jsThough the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
[BABEL] Note: The code generator has deoptimised the styling of /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/prettier/standalone.js as it exceeds the max of 500KB.
webpack built preview 5ea22b05e6a6a6baf269 in 14245ms
✖ ｢wdm｣: Hash: 5ea22b05e6a6a6baf269
Version: webpack 4.46.0
Time: 14245ms
Built at: 06/05/2021 15:56:03
                                        Asset      Size        Chunks                          Chunk Names
                           0.iframe.bundle.js   201 KiB             0  [emitted]
                       0.iframe.bundle.js.map   142 KiB             0  [emitted] [dev]
                           1.iframe.bundle.js   209 KiB             1  [emitted]
                       1.iframe.bundle.js.map   204 KiB             1  [emitted] [dev]
                           2.iframe.bundle.js  87.5 KiB             2  [emitted]
                       2.iframe.bundle.js.map    82 KiB             2  [emitted] [dev]
                           3.iframe.bundle.js   372 KiB             3  [emitted]        [big]
                       3.iframe.bundle.js.map   412 KiB             3  [emitted] [dev]
                           4.iframe.bundle.js  14.9 KiB             4  [emitted]
                       4.iframe.bundle.js.map  16.5 KiB             4  [emitted] [dev]
                                  iframe.html  4.34 KiB                [emitted]
                        main.iframe.bundle.js    61 KiB          main  [emitted]               main
                    main.iframe.bundle.js.map  24.5 KiB          main  [emitted] [dev]         main
                runtime~main.iframe.bundle.js  36.3 KiB  runtime~main  [emitted]               runtime~main
            runtime~main.iframe.bundle.js.map  37.6 KiB  runtime~main  [emitted] [dev]         runtime~main
static/media/stories/assets/code-brackets.svg  1.42 KiB                [emitted]
       static/media/stories/assets/colors.svg  8.31 KiB                [emitted]
     static/media/stories/assets/comments.svg  1.49 KiB                [emitted]
    static/media/stories/assets/direction.svg  1.25 KiB                [emitted]
         static/media/stories/assets/flow.svg  1.36 KiB                [emitted]
       static/media/stories/assets/plugin.svg  2.12 KiB                [emitted]
         static/media/stories/assets/repo.svg   1.6 KiB                [emitted]
     static/media/stories/assets/stackalt.svg  2.49 KiB                [emitted]
                vendors~main.iframe.bundle.js  5.28 MiB  vendors~main  [emitted]        [big]  vendors~main
            vendors~main.iframe.bundle.js.map  4.84 MiB  vendors~main  [emitted] [dev]         vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 172 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 410 bytes {main} [built]
[./.storybook/preview.js] 175 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.73 KiB {main} [built]
[./.storybook/storybook-init-framework-entry.js] 24 bytes {main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js] 2.59 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js] 2.59 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js] 2.6 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js] 2.6 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js] 2.59 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js] 2.59 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js] 2.59 KiB {vendors~main} [built]
[./node_modules/@storybook/core-server/dist/cjs/globals/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.68 KiB {vendors~main} [built]
    + 1208 hidden modules

ERROR in ./stories/Button.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
 @ ./stories/Button.stories.js 84:0-36 87:13-21 106:16-24
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./stories/Header.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
 @ ./stories/Header.stories.js 48:0-32 51:13-21 59:16-24
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./stories/Page.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
 @ ./stories/Page.stories.js 48:0-28 52:13-19 60:14-20
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./stories/Button.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:67:22)
 @ ./stories/Button.stories.js 84:0-36 87:13-21 106:16-24
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./stories/Header.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:67:22)
 @ ./stories/Header.stories.js 48:0-32 51:13-21 59:16-24
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

ERROR in ./stories/Page.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:67:22)
 @ ./stories/Page.stories.js 48:0-28 52:13-19 60:14-20
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.24 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 1.99 KiB {HtmlWebpackPlugin_0} [built]
ModuleError: Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at Object.emitError (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/webpack/lib/NormalModule.js:173:6)
    at loadTemplateCompiler (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:24:21)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:69:35)
    at LOADER_EXECUTION (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
    at runSyncOrAsync (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
    at iterateNormalLoaders (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at loadTemplateCompiler (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:24:31)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:69:35)
ModuleError: Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at Object.emitError (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/webpack/lib/NormalModule.js:173:6)
    at loadTemplateCompiler (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:24:21)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:69:35)
    at LOADER_EXECUTION (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
    at runSyncOrAsync (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
    at iterateNormalLoaders (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at loadTemplateCompiler (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:24:31)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:69:35)
ModuleError: Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at Object.emitError (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/webpack/lib/NormalModule.js:173:6)
    at loadTemplateCompiler (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:24:21)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:69:35)
    at LOADER_EXECUTION (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
    at runSyncOrAsync (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
    at iterateNormalLoaders (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
    at loadTemplateCompiler (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:24:31)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:69:35)
ModuleBuildError: Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:67:22)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
ModuleBuildError: Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:67:22)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
ModuleBuildError: Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/vue-loader/lib/index.js:67:22)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/ryanhavoc/Code/snyk/experiments/storybook6.2/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! storybook6.2@1.0.0 storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the storybook6.2@1.0.0 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ryanhavoc/.npm/_logs/2021-05-06T14_56_03_272Z-debug.log

I'll try and get it working so I can provide a repro repo.

RyanHavoc commented 3 years ago

@shilman OK, I've replicated the issue here: https://github.com/RyanHavoc/broken-storybook

If you go to this story: http://localhost:6006/?path=/story/example-button--broken-story

You'll see it can't find key or null.

I've added a prop to the Button.vue of obj and this is the story:

const obj = { key: 'value' };

export const BrokenStory = () => ({
  components: { MyButton },
  props: {
    obj: { default: obj },
  },
  template: `<my-button :obj="obj" />`,
});

I'd expect to see value as the button text with these changes. This is the same issue we're experiencing in our code base.

I know that everything is fine in @storybook/vue@6.1.21.

RyanHavoc commented 3 years ago

Anybody have any thoughts?

RyanHavoc commented 3 years ago

cc @shilman

RyanHavoc commented 3 years ago

Any help with this would be great? I've not had any joy unfortunately.

pocka commented 3 years ago

Confirmed. Starting from Storybook v6.2, Args without a value are set to null, not undefined. I couldn't find relevant changes in CHANGELOG.md.

v6.2.0

v6.1.21

export const BrokenStory = (args, { argTypes }) => {
  console.log(args);                     

  return {                                          
    components: {MyButton},                         
    props: Object.keys(argTypes),                   
    template: `<my-button v-bind="$props" />`,      
  };                                                
};

@shilman Is this intentional? At least Vue.js only treats undefined as absence of a property value so it would be good if there is docs for this behaviour.

@RyanHavoc

If you create a repro, please include all dependencies in package.json, not depend on globally installed packages (except such as yarn or pnpm).
Use Args for default values: args for default exported object (meta) works as stories' default args. (export default { title: "...", component: ..., args: { org: {...} } })
You specified null as a default value for the obj prop in Button.vue, and Storybook may use it as the default value for the Arg.

shilman commented 3 years ago

@pocka Thanks so much for looking into this. We fixed a bunch of default value-related issues in 6.2, and possibly caused some issues in the process. I think we have fixed them all in 6.3. Can you try upgrading and see if they are fixed in the beta? npx sb@next ugprade --prerelease. cc @tmeasday

pocka commented 3 years ago

@shilman Did npx sb@next upgrade --prerelease (installed v6.3.0-beta.4) on the repro repo and it works fine!

shilman commented 3 years ago

Awesome. thanks so much! 🙏 closing this for now.

storybookjs / storybook

Setting Vue props via a variable in the story file #14814