Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"No Preview" of stories #7583

Closed
metamn opened this issue Jul 27, 2019 · 1 comment
Closed

"No Preview" of stories #7583

metamn opened this issue Jul 27, 2019 · 1 comment

Comments

@metamn
Copy link

metamn commented Jul 27, 2019

Describe the bug
For a while I can't run Storybook anymore. When I launch it I'm always receiving 'No Preview'.

When the stories get recompiled the first story shows up well. When trying to click on another story an error message is shown up.

To Reproduce
Steps to reproduce the behavior:

  1. Go to http://localhost:9009/?path=/story/*
  2. See error "No Preview" (Screenshot attached)
  3. Edit brandTitle in react-src/.storybook/theme.js
  4. Check the Storybook browser tab where the first story works fine (Screenshot attached)
  5. Click on another story and there is a chance an error message will be shown up (Screenshot attached)
  6. Not all components show an error message. Around 2/3 of them.
  7. Not all error messages are the same. There are two types, copied below.

Object(...) is not a function

Contact@http://localhost:9009/main.8dc184a05dee68cc8ff6.bundle.js:618:76
renderWithHooks@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:100339:18
mountIndeterminateComponent@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:102421:13
beginWork@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:103026:16
performUnitOfWork@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:106713:12
workLoop@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:106753:24
renderRoot@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:106836:7
performWorkOnRoot@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:107743:7
performWork@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:107655:7
performSyncWork@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:107629:3
requestWork@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:107498:5
scheduleWork@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:107312:5
scheduleRootUpdate@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:107973:3
updateContainerAtExpirationTime@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:108001:10
updateContainer@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:108058:10
./node_modules/react-dom/cjs/react-dom.development.js/ReactRoot.prototype.render@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:108354:3
legacyRenderSubtreeIntoContainer/<@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:108491:14
unbatchedUpdates@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:107860:10
legacyRenderSubtreeIntoContainer@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:108487:5
render@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:108556:12
render@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:14181:24
renderMain@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:14219:3
renderMain@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:13630:7
renderUI@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:13656:9
emit@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:40574:35
StoryStore/_this.setSelection/<@http://localhost:9009/vendors~main.8dc184a05dee68cc8ff6.bundle.js:8737:22
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

invariant@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:87456:15
createFiberFromTypeAndProps@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:97618:11
createFiberFromElement@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:97639:15
reconcileSingleElement@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:99932:23
reconcileChildFibers@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:99989:35
reconcileChildren@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:101803:28
updateContextProvider@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:102842:3
beginWork@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:103071:14
performUnitOfWork@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:106713:12
workLoop@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:106753:24
renderRoot@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:106836:7
performWorkOnRoot@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:107743:7
performWork@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:107655:7
performSyncWork@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:107629:3
requestWork@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:107498:5
scheduleWork@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:107312:5
scheduleRootUpdate@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:107973:3
updateContainerAtExpirationTime@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:108001:10
updateContainer@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:108058:10
./node_modules/react-dom/cjs/react-dom.development.js/ReactRoot.prototype.render@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:108354:3
legacyRenderSubtreeIntoContainer/<@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:108491:14
unbatchedUpdates@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:107860:10
legacyRenderSubtreeIntoContainer@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:108487:5
render@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:108556:12
render@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:14181:24
renderMain@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:14219:3
renderMain@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:13630:7
renderUI@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:13656:9
emit@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle.js:40574:35
StoryStore/_this.setSelection/<@http://localhost:9009/vendors~main.8b75d2a2873e1c757f75.bundle

Expected behavior
Stories should work all the time not just after a HMR refresh and break again at the first click.

Screenshots
Screenshot from 2019-07-27 14-02-39
Screenshot from 2019-07-27 14-05-36
Screenshot from 2019-07-27 14-09-04

Code snippets
Public repo: https://github.com/metamn/inu-v2-b

System:
System:
OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i5-7Y54 CPU @ 1.20GHz
Binaries:
Node: 11.2.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
Browsers:
Chrome: 70.0.3538.77
Firefox: 68.0.1

Additional context

  • All packages were reinstalled
  • Storybook init --force was issued
  • The default stories were all working fine
  • The problem might be the incorrect usage of PropTypes ??? ... I mean since Storybook got broken I'm receiving this message in the browser console:
ReferenceError: "can't access lexical declaration `propTypes' before initialization"
    js main.ed667996d814b32d25d4.bundle.js:221
    js index.js:1
    js Menu.js:23
    Webpack 44
@metamn
Copy link
Author

metamn commented Aug 7, 2019

I've just removed the story causing the error and re-added ... since then it works ... strange ... :)

@metamn metamn closed this as completed Aug 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants