Storybook: Slow start React guide doesn't work

[gretzky]

Describe the bug
I'm building a UI kit with React. My build is just react, babel, and rollup to compile. When adding storybook based on the slow start react guide- webpack doesn't fully compile and I'm left with a Cannot get / error on the defined port.

To Reproduce

1. Spin up a simple react project with just babel and rollup
2. Follow this guide
3. yarn run storybook

Or just run this demo repo

Expected behavior
It should bundle the stories and display them in the browser, according to the guide. These are the only steps it provides for adding storybook to an existing react project.

Code snippets
Demo repo

System:

• OS: macOS
• Device: MacBook Pro 2015
• Browser: Firefox
• Framework: React
• Addons: N/A
• Version: 4.0.0

[gretzky]

Probable duplicate of #5004

[wooly]

We are also having this issue.

[gretzky]

So what's the update here? Nearly 20 days and no response, and it's affecting more than just me.

[shilman]

There's something wrong with your yarn.lock file. When I remove it and reinstall, it works fine.

[gretzky]

@shilman I've tried multiple fresh installs, fresh directories, same issue.

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

[sophister]

same problem. open http://localhost:9001/ just show me Cannot GET /. And I use the guide-react to slow start.

package.json is:

{
  "name": "storybook-test",
  "version": "1.0.0",
  "description": "test storybook usage",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 9001 -c .storybook"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@storybook/react": "^4.1.12",
    "babel-loader": "^8.0.5"
  },
  "dependencies": {
    "react": "^16.8.2",
    "react-dom": "^16.8.2"
  }
}

directories are:

and .storybook/config.js is

browser result:

[ndelangen]

I'll take a look what's going on

[ajbowler]

I ran into this issue after upgrading storybook v3 within a monorepo to v4.

There's zero console output in the browser or within stdout to tell me what errors, if any, are occurring, only this cryptic cannot GET/ message on the webpage.

[ndelangen]

I guess what we really need is an upgrade command in our CLI @ajbowler

[MonteKrysto]

I'm getting the same thing. Any updates?

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

[gretzky]

Wow, this is a pretty fundamental issue here and nobody answering. This is why I continue to not use Storybook.

[MilosJo]

Import { Link } from 'gatsby';
breaks my Storybook...
Tried upgrading yarn, removing node_modules, yarn.lock and cache,
now I get Cannot GET / error.
Any solutions?

[shilman]

@MilosJo did you follow these instructions? https://www.gatsbyjs.org/docs/visual-testing-with-storybook/

[MilosJo]

This is my .storybook/config.js

import { configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';

global.___loader = {
  enqueue: () => {},
  hovering: () => {},
};

global.__PATH_PREFIX__ = '';
window.___navigate = (pathname) => {
  action('NavigateTo:')(pathname);
};

const req = require.context('../src', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Roughly I would say they look pretty much the same.
Many thanks, @shilman

[MilosJo]

@shilman
I didn't notice that I have to create .storybook/webpack.config.js file as well.

module.exports = (baseConfig, env, defaultConfig) => {
  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
  defaultConfig.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  defaultConfig.module.rules[0].use[0].loader = require.resolve("babel-loader")

  // use @babel/preset-react for JSX and env (instead of staged presets)
  defaultConfig.module.rules[0].use[0].options.presets = [
    require.resolve("@babel/preset-react"),
    require.resolve("@babel/preset-env"),
  ]

  // use @babel/plugin-proposal-class-properties for class arrow functions
  defaultConfig.module.rules[0].use[0].options.plugins = [
    require.resolve("@babel/plugin-proposal-class-properties"),
  ]

  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
  defaultConfig.resolve.mainFields = ["browser", "module", "main"]

  return defaultConfig
}

Works now like charm.
Thanks again!

[shilman]

@MilosJo I guess you're using Storybook 4.x? Note that the custom webpack config has changed in 5.x if you decide to upgrade: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#webpack-config-simplification

[MilosJo]

Hey @shilman
Yeah, current project is run on Storybook 4.x.
Will migrate it this week to Storybook 5.x.
Thanks for the heads-up.
Much appreciated

[JimSRush]

This was breaking for me because my storybook and addon versions were:
"@storybook/react": "^4.0.0-alpha.25", and " "@storybook/addon-knobs": "^5.0.6",. Once I dropped the addon version to ^4.0.6 it seemed to work ok.

[shilman]

@JimSRush try to use the same version of all @storybook/* packages if possible

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

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!