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]

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]

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]

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]

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!

[mlachance]

Just in case someone else stumbles across this in a Google search like I did, I want to repeat the fix that helped me:

Delete your package-lock.json and your node_modules directory.

[daviddelusenet]

@mlachance why would this solve the problem? I'm now also experiencing this issue but I don't want to delete my package-lock.json since this can cause unexpected problems.

[dustinlacewell]

Hmm something in my repo changed and I'm now getting this, and have no idea what caused it.

[mlachance]

@daviddelusenet my experience is that the checksums in package-lock.json sometimes prevent the proper installation of dependencies, and it does not help that updating your Node version may cause breaking changes.

Your package-lock.json should be committed in your Git repository anyways, so rolling back should it not work is still something you can do. And if you are curious, you can also simply check what changed after running npm install.

[sunny-mittal]

Hopefully posting this doesn't reopen the issue but for yarn users, if you set up storybook with the CLI commands which uses npm by default, you could run into this. The two package managers handle dependencies very differently and it turned out to be my issue. Trashing node_modules and package-lock and reinstalling with yarn fixed it.

[ctamas]

It can be caused by using the
https://storybook.js.org/blog/storybook-6-migration-guide/
npx sb upgrade
NPM command to upgrade while otherwise using yarn.
No need to delete package file, just node_modules.

[ktryndchrs]

Just in case someone else stumbles across this in a Google search like I did, I want to repeat the fix that helped me:

Delete your package-lock.json and your node_modules directory.

And if someone ever get the error below after this while doing npm install, the solution that worked for me was npm run install --force

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
(...)

[conner-sabin]

Yeah, I was having this same issue. Deleting the package-lock.json and node_modules and then running npm install worked for me. The storybook guide for migrating to storybook 6 gives the same advice at the bottom of the "Breaking Changes" section: https://storybook.js.org/blog/storybook-6-migration-guide/

[Liu-10004]

To fix this, run start-storybook once with the --no-manager-cache flag, and hopefully Storybook will work correctly for you. You only need to use this flag once; after that, the cache should be in a good state. The docs advise against using this flag all the time for performance reasons.
Reference:https://githubmemory.com/repo/storybookjs/storybook/issues/14672