Storybook: "npm run storybook" fails after updating storybook

[matthiasp42]

I updated storybook from:

"@storybook/addon-info": "^3.1.6",
"@storybook/addon-knobs": "^3.1.8",
"@storybook/addon-options": "^3.1.6",
"@storybook/react": "^3.1.8",

to:

"@storybook/addon-info": "^3.2.9",
"@storybook/addon-knobs": "^3.2.8",
"@storybook/addon-options": "^3.2.6",
"@storybook/react": "^3.2.8",

Now I get the following error:

@ storybook <PATH_TO_PROJECT>
> start-storybook -p 6006

@storybook/react v3.2.8

=> Loading custom addons config.
=> Loading custom webpack config (extending mode).
 10% building modules 8/12 modules 4 active ...react/dist/client/manager/provider.js(node:56466) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
 92% chunk asset optimization<PATH_TO_PROJECT>/node_modules/source-list-map/lib/SourceListMap.js:29
        } else if(generatedCode.getMappings && generatedCode.getGeneratedCode) {
                               ^

TypeError: Cannot read property 'getMappings' of undefined
    at SourceListMap.add (<PATH_TO_PROJECT>/node_modules/source-list-map/lib/SourceListMap.js:29:25)
    at <PATH_TO_PROJECT>/node_modules/@storybook/react/node_modules/webpack-sources/lib/ConcatSource.js:48:9
    at Array.forEach (<anonymous>)
    at ConcatSource.listMap (<PATH_TO_PROJECT>/node_modules/@storybook/react/node_modules/webpack-sources/lib/ConcatSource.js:44:17)
    at <PATH_TO_PROJECT>/node_modules/@storybook/react/node_modules/webpack-sources/lib/ConcatSource.js:48:18
    at Array.forEach (<anonymous>)
    at ConcatSource.listMap (<PATH_TO_PROJECT>/node_modules/@storybook/react/node_modules/webpack-sources/lib/ConcatSource.js:44:17)
    at ConcatSource.proto.sourceAndMap (<PATH_TO_PROJECT>/node_modules/@storybook/react/node_modules/webpack-sources/lib/SourceAndMapMixin.js:25:16)
    at CachedSource.sourceAndMap (<PATH_TO_PROJECT>/node_modules/@storybook/react/node_modules/webpack-sources/lib/CachedSource.js:56:31)
    at getTaskForFile (<PATH_TO_PROJECT>/node_modules/@storybook/react/node_modules/webpack/lib/SourceMapDevToolPlugin.js:33:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/<USER>/.npm/_logs/2017-09-07T21_04_08_504Z-debug.log

I'm suspecting that I have some outdated dependency or something. But I'm really not an expert yet and would appreciate if anybody point me in a direction. I spent some time updating outdated dependencies, but it didn't help.
I also couldn't figure out how to find out which of MY dependencies use this "Source-List-Map" so that I could decide which of my dependencies may need an upgrade.

[aganglada]

Hello @matthiasp42,

Try removing node_modules, cleaning npm cache npm cache clean and npm install again.

[matthiasp42]

Thank you very much. This got my Storybook to run again, but now it just looks like the following:

Here's the copyable plain text:
exports is not defined ReferenceError: exports is not defined at Object.<anonymous> (http://127.0.0.1:6006/static/preview.bundle.js:67939:23) at __webpack_require__ (http://127.0.0.1:6006/static/preview.bundle.js:677:30) at fn (http://127.0.0.1:6006/static/preview.bundle.js:87:20) at Object.<anonymous> (http://127.0.0.1:6006/static/preview.bundle.js:86075:24) at Object.<anonymous> (http://127.0.0.1:6006/static/preview.bundle.js:86221:30) at __webpack_require__ (http://127.0.0.1:6006/static/preview.bundle.js:677:30) at fn (http://127.0.0.1:6006/static/preview.bundle.js:87:20) at loadStories (http://127.0.0.1:6006/static/preview.bundle.js:83246:3) at ConfigApi._renderMain (http://127.0.0.1:6006/static/preview.bundle.js:84152:20) at render (http://127.0.0.1:6006/static/preview.bundle.js:84178:17)

I could get so far that there was supposed to be an issue with the
"plugin-add-module-exports", but even after removing it from my project, it doesn't run.

The rest of my project works perfectly fine, just Storybook not anymore...

[aganglada]

Looks like any of your exports/things you are exporting to storybook, are not working/exported properly (or storybook doesn't like it). That's why the error is only on the app frame and storybook itself works.

You could try debugging deeply into your exports.

[matthiasp42]

I finally got it running again, but only by removing storybook and adding it again.
Was annoying, but I'm glad to have it running again :)
Thanks @aganglada for taking time to comment.

[aganglada]

Glad you got it, I guess if that's okay, we can close this one.

[ianmcnally]

Wanted to leave a note here, in case any other developer stumbles on the "exports is not defined" problem. The fix for me was modifying babel-preset-env.

My babel config went from:

{
  "presets": [["env" ]]
}

to:

{
  "presets": [ ["env", {"modules": false} ]]
}

Which I came to after looking at https://github.com/storybooks/storybook/pull/1668/files.

[Hypnosphi]

{"modules": false}

This is actually the thing you should do anyway if you're using webpack 2+

[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 60 days. Thanks!

[reduxdj]

We had a similar problem, and rather than supply a whole config, we opted with having our webpack config look like the following. Also, what's confusing is that storybook has its own webpack, and it was messing with stuff

const path = require('path');
module.exports = async ({ config, mode }) => ({
  ...config,
  resolve: {
    ...config.resolve,
    extensions: ['*', '.js', '.jsx'],
    modules: [path.join(__dirname, '../src'), 'node_modules'],
  },
});

[gaurav5430]

An update on modules: false, if you are using babel-loader, it will by default set modules: falsewith babel-preset-env

https://github.com/babel/babel-loader/issues/521