No preview + error only in built app.

Describe the bug When the built app is running, stories are not loading. “No Preview” message is shown.

this error pops up in console:

But this happens only when I’m running the build. In dev server there’s no errors.

To Reproduce Steps to reproduce the behavior:

1. run command npm run build-storybook
2. run command serve storybook-static (I’m using serve npm package to start a sever)
3. open the browser
4. see error

Expected behavior Two stories should be displayed.

Screenshots

Code snippets main.js

module.exports = {
  stories: ['../src/stories/**/*.stories.(js|mdx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-storysource',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/addon-viewport',
    '@storybook/addon-backgrounds',
    '@storybook/addon-a11y',
    '@storybook/addon-contexts',
    '@storybook/addon-notes/register-panel'
  ],
};

manager.js

import { addons } from '@storybook/addons';

addons.setConfig({
  showRoots: true,
  panelPosition: 'right',
});

preview.js

import { addParameters } from '@storybook/vue';
import Vue from 'vue';
import Vuex from 'vuex';
import 'p1-design-system/CSS Framework/framework.css'

Vue.use(Vuex);

addParameters({
  docs: {
    inlineStories: true,
    iframeHeight: '60px',
  },
});

System:

OS: Windows 10 10.0.16299
CPU: (4) x64 Intel(R) Core(TM) i3-8130U CPU @ 2.20GHz

Binaries: Node: 10.15.0 - C:\Program Files\nodejs\node.EXE npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 41.16299.967.0 npmPackages: @storybook/addon-a11y: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-actions: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-backgrounds: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-centered: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-contexts: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-docs: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-knobs: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-links: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-notes: ^5.3.18 => 5.3.18 @storybook/addon-storyshots: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-storysource: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addon-viewport: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/addons: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/source-loader: 6.0.0-alpha.30 => 6.0.0-alpha.30 @storybook/vue: 6.0.0-alpha.30 => 6.0.0-alpha.30

Additional context I used this as the starter project: https://github.com/storybookjs/storybook/tree/next/examples/vue-kitchen-sink

[shilman]

@Dulan666 in the past serve storybook-static has been problematic. what happens if you run cd storybook-static && serve or npx http-server storybook-static?

[DulanHewage]

Since I haven’t got any luck with TypeError: Cannot read property 'id' of undefined error, I re-created my project with a fresh copy of vue-kitchen-sink

now the prod. build is working fine. as @shilman mentioned app doesn’t load on serve server. I had to use http-server