Storybook: Not working with GatsbyJS v1

Created on 5 Jun 2018 · 13Comments · Source: storybookjs/storybook

Bug or support request summary

I am trying to set-up Storybook in a GatsbyJS project. However, it fails. To simplify the project, I decided to start a fresh project and follow the guide.

However, I got this error:

> start-storybook -p 9001 -c .storybook

info @storybook/react v3.4.6
info
info => Loading custom addons config.
info => Loading custom webpack config (full-control mode).
 10% building modules 2/2 modules 0 active(node:69714) DeprecationWarning: importing default webpack config generator from '@storybook/react/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default
webpack built 60726fa75127b1f5ddcc in 5876ms
Hash: 60726fa75127b1f5ddcc
Version: webpack 3.12.0
Time: 5876ms
                       Asset     Size  Chunks                    Chunk Names
    static/manager.bundle.js  3.71 MB       0  [emitted]  [big]  manager
    static/preview.bundle.js  1.62 MB       1  [emitted]  [big]  preview
static/manager.bundle.js.map  4.59 MB       0  [emitted]         manager
static/preview.bundle.js.map  1.96 MB       1  [emitted]         preview
                  index.html  2.11 kB          [emitted]
                 iframe.html  2.11 kB          [emitted]
 [302] ./node_modules/@storybook/react/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
 [321] ./node_modules/core-js/fn/array/iterator.js 107 bytes {0} {1} [built]
 [329] ./node_modules/airbnb-js-shims/index.js 40 bytes {0} {1} [built]
 [820] ./node_modules/@storybook/ui/dist/index.js 2.43 kB {0} [built]
 [855] ./node_modules/@storybook/react/dist/client/index.js 1.79 kB {1} [built]
 [866] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js 52 bytes {0} [built]
 [867] ./.storybook/addons.js 240 bytes {0} [built]
 [868] ./node_modules/@storybook/addon-options/register.js 131 bytes {0} [built]
[1081] ./node_modules/@storybook/core/dist/client/manager/index.js 423 bytes {0} [built]
[1256] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {1} [built]
[1257] ./node_modules/@storybook/react/dist/server/config/globals.js 105 bytes {1} [built]
[1258] ./node_modules/webpack-hot-middleware/client.js?reload=true 7.77 kB {1} [built]
[1270] ./.storybook/config.js 439 bytes {1} [built]
[1345] ./node_modules/@storybook/addon-options/preview.js 101 bytes {1} [built]
[1347] ./src .stories.[jt]sx?$ 203 bytes {1} [built]
    + 1340 hidden modules

ERROR in   TypeError: Cannot read property 'request' of undefined

  - ExternalModuleFactoryPlugin.js:37 handleExternals
    [gatsby-storybook]/[webpack]/lib/ExternalModuleFactoryPlugin.js:37:34

  - ExternalModuleFactoryPlugin.js:46 next
    [gatsby-storybook]/[webpack]/lib/ExternalModuleFactoryPlugin.js:46:8

  - ExternalModuleFactoryPlugin.js:59 handleExternals
    [gatsby-storybook]/[webpack]/lib/ExternalModuleFactoryPlugin.js:59:7

  - ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin.<anonymous>
    [gatsby-storybook]/[webpack]/lib/ExternalModuleFactoryPlugin.js:79:5

  - NormalModuleFactory.js:236 applyPluginsAsyncWaterfall
    [gatsby-storybook]/[core]/[webpack]/lib/NormalModuleFactory.js:236:4

  - Tapable.js:260 NormalModuleFactory.applyPluginsAsyncWaterfall
    [gatsby-storybook]/[core]/[tapable]/lib/Tapable.js:260:70

  - NormalModuleFactory.js:220 NormalModuleFactory.create
    [gatsby-storybook]/[core]/[webpack]/lib/NormalModuleFactory.js:220:8

  - Compilation.js:407 semaphore.acquire
    [gatsby-storybook]/[core]/[webpack]/lib/Compilation.js:407:18

  - Semaphore.js:16 Semaphore.acquire
    [gatsby-storybook]/[core]/[webpack]/lib/util/Semaphore.js:16:4

  - Compilation.js:406 Compilation._addModuleChain
    [gatsby-storybook]/[core]/[webpack]/lib/Compilation.js:406:18

  - Compilation.js:494 Compilation.addEntry
    [gatsby-storybook]/[core]/[webpack]/lib/Compilation.js:494:8

  - SingleEntryPlugin.js:22 SingleEntryPlugin.<anonymous>
    [gatsby-storybook]/[webpack]/lib/SingleEntryPlugin.js:22:15

  - Tapable.js:293 Compiler.applyPluginsParallel
    [gatsby-storybook]/[core]/[tapable]/lib/Tapable.js:293:14

  - Compiler.js:499 applyPluginsAsync.err
    [gatsby-storybook]/[core]/[webpack]/lib/Compiler.js:499:9

  - Tapable.js:195 Compiler.applyPluginsAsyncSeries
    [gatsby-storybook]/[core]/[tapable]/lib/Tapable.js:195:46

  - Compiler.js:492 Compiler.compile
    [gatsby-storybook]/[core]/[webpack]/lib/Compiler.js:492:8



ERROR in   TypeError: Cannot read property 'request' of undefined

  - ExternalModuleFactoryPlugin.js:37 handleExternals
    [gatsby-storybook]/[webpack]/lib/ExternalModuleFactoryPlugin.js:37:34

  - ExternalModuleFactoryPlugin.js:46 next
    [gatsby-storybook]/[webpack]/lib/ExternalModuleFactoryPlugin.js:46:8

  - ExternalModuleFactoryPlugin.js:59 handleExternals
    [gatsby-storybook]/[webpack]/lib/ExternalModuleFactoryPlugin.js:59:7

  - ExternalModuleFactoryPlugin.js:79 ExternalModuleFactoryPlugin.<anonymous>
    [gatsby-storybook]/[webpack]/lib/ExternalModuleFactoryPlugin.js:79:5

  - NormalModuleFactory.js:236 applyPluginsAsyncWaterfall
    [gatsby-storybook]/[core]/[webpack]/lib/NormalModuleFactory.js:236:4

  - Tapable.js:260 NormalModuleFactory.applyPluginsAsyncWaterfall
    [gatsby-storybook]/[core]/[tapable]/lib/Tapable.js:260:70

  - NormalModuleFactory.js:220 NormalModuleFactory.create
    [gatsby-storybook]/[core]/[webpack]/lib/NormalModuleFactory.js:220:8

  - Compilation.js:407 semaphore.acquire
    [gatsby-storybook]/[core]/[webpack]/lib/Compilation.js:407:18

  - Semaphore.js:16 Semaphore.acquire
    [gatsby-storybook]/[core]/[webpack]/lib/util/Semaphore.js:16:4

  - Compilation.js:406 Compilation._addModuleChain
    [gatsby-storybook]/[core]/[webpack]/lib/Compilation.js:406:18

  - Compilation.js:494 Compilation.addEntry
    [gatsby-storybook]/[core]/[webpack]/lib/Compilation.js:494:8

  - SingleEntryPlugin.js:22 SingleEntryPlugin.<anonymous>
    [gatsby-storybook]/[webpack]/lib/SingleEntryPlugin.js:22:15

  - Tapable.js:293 Compiler.applyPluginsParallel
    [gatsby-storybook]/[core]/[tapable]/lib/Tapable.js:293:14

  - Compiler.js:499 applyPluginsAsync.err
    [gatsby-storybook]/[core]/[webpack]/lib/Compiler.js:499:9

  - Tapable.js:195 Compiler.applyPluginsAsyncSeries
    [gatsby-storybook]/[core]/[tapable]/lib/Tapable.js:195:46

  - Compiler.js:492 Compiler.compile
    [gatsby-storybook]/[core]/[webpack]/lib/Compiler.js:492:8

Steps to reproduce

Assume you have Gatsby and Storybook 's CLI installed

Start a new GatsbyJS project

gatsby new gastby-storybook && cd gatsby-develop

You can test if the set-up was successful by gatsby develop. But the next step would be to try to set-up storybook.

which returns

getstorybook - the simplest way to add a storybook to your project.

 • Detecting project type. ✓
    We couldn't detect your project type. (code: UNDETECTED)
    Please make sure you are running the `getstorybook` command in your project's root directory.
    You can also follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/

I follow the slow start guide for react. So I install

npm i --save-dev @storybook/react

and

npm i --save react react-dom
npm i --save-dev babel-core

I add the storybook script:

  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 9001 -c .storybook"
  },

I add the storybook config

// gatsby-storybook/.storybook/config.js
import { configure } from '@storybook/react';

function loadStories() {
  require('../stories/index.js');
  // You can require as many stories as you need.
}

configure(loadStories, module);

I add a story to test:

// gatsby-storybook/stories/index.js
import React from 'react';
import { storiesOf } from '@storybook/react';

storiesOf('Test', module)
    .add('Hello', () => (
        <p>World</p>
    ));

Run storybook

npm run storybook

Then the error above happens.

Please specify which version of Storybook and optionally any affected addons that you're running

storybook/react: 3.4.6
gatsby: 1.9.247

react compatibility with other tools todo

Source

PolGuixe

👍1

Most helpful comment

^ this is the proper way to tell this to the bot =)

Hypnosphi on 1 Sep 2018

😄3

All 13 comments

Here is a repo with the process described above https://github.com/PolGuixe/gastby-storybook

PolGuixe on 5 Jun 2018

I played around with the CLi, and made it use the REACT generator when gatsby is in the package.json dependencies. Ran yarn run storybook and everything worked. I could import the predefined component (after emitting some gatsby router stuff) and it worked in a story. I'm not sure what caused the error @PolGuixe had, but using the react generator for gatsby does seem to work. @Hypnosphi does this sound good or do you have any other insights?

Keraito on 5 Jun 2018

@keraito what do you mean by using the react generator?
I’ve used npm. I’try to use yarn.

PolGuixe on 5 Jun 2018

Sorry @PolGuixe, the react generator is the template of all the files and dependencies that get copied over into your project when you run getstorybook. So basically what I said is that the react project template should be working for a gatsby project as well. You have no control over the generators, that's something we have to do, but it's weird that the steps that you took did not work, since it should be roughly the same as the React template. I will look into this for you soon!

Keraito on 6 Jun 2018

This actually goes beyond storybook not working for a Gatsby project. Turns out that, even if I reproduce the steps described above and storybook runs (which it does for me), gatsby develop will not work. It seems to be a webpack related issue.

Keraito on 7 Jun 2018

@Keraito let's create a separate detector, generator and test fixture for gatsby

Hypnosphi on 8 Jun 2018

👍1

I was able to fix the compatibility problem by adding this 👇 to gatsby-node.js:

const path = require('path');

const nodeModules = 'node_modules';
const root = path.join(__dirname, '../../'); // <- the root of the monorepo
const commonNodeModules = path.join(root, nodeModules); // <- common workspace node_modules 
const gatsbyNodeModules = path.join(commonNodeModules, 'gatsby', nodeModules);
const appNodeModules = path.join(root, 'apps', 'myGatsbyApp', nodeModules);
const loaders = path.join(commonNodeModules, 'gatsby', 'dist', 'loaders');

function overrideResolution(config) {
  config.merge(current => {
    current.resolveLoader.modulesDirectories = [loaders, gatsbyNodeModules, commonNodeModules];
    current.resolve.modulesDirectories = [gatsbyNodeModules, appNodeModules, commonNodeModules];

    return current;
  });
}

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'develop') {
    overrideResolution(config);
    return;
  }

  if (stage === 'build-javascript') {
    overrideResolution(config);
    return;
  }

  if (stage === 'build-html' || stage === 'develop-html') {
    overrideResolution(config);
    return;
  }

  if (stage === 'build-css') {
    overrideResolution(config);
  }
};

In my case, the problem has incurred in a small monorepo, but I assume that this may work
for others too, by specifyig pathes to the relevant node_modules.

igor-dv on 11 Jun 2018

Is there any progress on this? 😄

PolGuixe on 2 Jul 2018

There is currently a PR open but it's on hold for now due to another PR
since it involves some Babel related stuff. A possible work around for now
is using a specific version of babel-loader. The specific number can be
found in the PR.

Edit: or check the other comment here

Keraito on 2 Jul 2018

Shoo bot, it's active but I just can't work on it atm ☹

Keraito on 25 Jul 2018

I'm almost back from vacation, just a few days 😫

Keraito on 15 Aug 2018

^ this is the proper way to tell this to the bot =)

Hypnosphi on 1 Sep 2018

😄3

the problem is not connected with GatsbyJS.I test my old proj as follow：

"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"

and I run npm run storybook, it has the same error as @PolGuixe describe, then I update my package as follow:

"babel-core": "^6.26.0",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"

now, it run normally with npm run storybook.And there is something go wrong with low version babel or webpack