Storybook: Blocker | Storybook local server failing - 5.3.11

Created on 4 Feb 2020 · 31Comments · Source: storybookjs/storybook

Local server with npm run storybook is failing. Tested with 5.3.11. Below are my package json dependencies and error.

Note: Works with forced v5.3.10.

package.json

"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"@emotion/babel-preset-css-prop": "^10.0.27",
"@emotion/core": "^10.0.27",
"@emotion/styled": "^10.0.27",
"@storybook/addon-a11y": "^5.3.11",
"@storybook/addon-actions": "^5.3.11",
"@storybook/addon-backgrounds": "^5.3.11",
"@storybook/addon-docs": "^5.3.11",
"@storybook/addon-info": "^5.3.11",
"@storybook/addon-knobs": "^5.3.11",
"@storybook/addon-storysource": "^5.3.11",
"@storybook/react": "^5.3.11",
"@storybook/source-loader": "^5.3.11",
"@testing-library/react-hooks": "^3.2.1",
"babel-eslint": "^10.0.3",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"classnames": "^2.2.6",
"css-loader": "^3.4.2",
"emotion": "^10.0.27",
"emotion-theming": "^10.0.27",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint-config-airbnb": "18.0.1",
"eslint-import-resolver-webpack": "^0.12.1",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^2.3.0",
"eslint-plugin-sonarjs": "^0.5.0",
"husky": "^4.2.1",
"jest": "^25.1.0",
"jest-cli": "^25.1.0",
"jest-emotion": "^10.0.27",
"jest-sonar-reporter": "^2.0.0",
"node-sass": "^4.13.1",
"open": "^7.0.2",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"sass-loader": "^8.0.2",
"sort-package-json": "^1.39.1",
"storybook-addon-emotion-theme": "^2.1.1",
"style-loader": "^1.1.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},

Error:

`info @storybook/react v5.3.11
info
info => Loading static files from: /Users/xxx/Desktop/Workspace/node_modules/
info => Loading presets
info => Loading presets
info => Loading custom manager config.
info => Loading config/preview file in "./.storybook".
info => Loading custom Webpack config (full-control mode).
/Users/xxx/Desktop/Workspace/node_modules/@storybook/core/dist/server/dev-server.js:80
stats.toJson(options.errorDetails);
^

TypeError: Cannot read property 'toJson' of null
at Watching.watch [as handler] (/Users/xxx/Desktop/Workspace/node_modules/@storybook/core/dist/server/dev-server.js:80:17)
at Watching._done (/Users/xxx/Desktop/Workspace/node_modules/webpack/lib/Watching.js:95:9)
at onCompiled (/Users/xxx/Desktop/Workspace/node_modules/webpack/lib/Watching.js:44:26)
at hooks.beforeCompile.callAsync.err (/Users/xxx/Desktop/Workspace/node_modules/webpack/lib/Compiler.js:663:20)
at _err0 (eval at create (/Users/xxx/Desktop/Workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), :9:1)
at Array.compiler.inputFileSystem.readFile (/Users/xxx/Desktop/Workspace/node_modules/webpack/lib/DllReferencePlugin.js:54:24)
at Storage.finished (/Users/xxx/Desktop/Workspace/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at ReadFileContext.provider (/Users/xxx/Desktop/Workspace/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
at ReadFileContext.callback (/Users/xxx/Desktop/Workspace/node_modules/graceful-fs/graceful-fs.js:115:16)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:237:13)`

bug core

Source

smo043

👍27 👀8

Most helpful comment

It was caused by https://github.com/storybookjs/storybook/pull/8391

rafaelfbs on 4 Feb 2020

👍10

All 31 comments

I'm also getting this error after updating to 5.3.11

teddywsi on 4 Feb 2020

I'm getting this error as well with 5.3.11

$ start-storybook
info @storybook/react v5.3.11
info 
info => Loading presets
info => Loading presets
info => Loading custom babel config
info => Loading custom babel config
info => Adding stories defined in ".storybook/main.js".
info => Loading custom Webpack config (full-control mode).
info => Using custom postcss.config.js
info => Using base config because react-scripts is not installed.
10% building 1/1 modules 0 active /node_modules/@storybook/core/dist/server/dev-server.js:80
          stats.toJson(options.errorDetails);
                ^

TypeError: Cannot read property 'toJson' of null
    at Watching.handler (node_modules/@storybook/core/dist/server/dev-server.js:80:17)
    at Watching._done (/node_modules/webpack/lib/Watching.js:95:9)
    at onCompiled (/node_modules/webpack/lib/Watching.js:44:26)
    at /node_modules/webpack/lib/Compiler.js:663:20
    at eval (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at Array.<anonymous> (/node_modules/webpack/lib/DllReferencePlugin.js:54:24)
    at Storage.finished (/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at ReadFileContext.<anonymous> (/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
    at ReadFileContext.callback (/node_modules/graceful-fs/graceful-fs.js:115:16)
    at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:239:13)

Downgraded to 5.3.9 and all is well.

samblackk on 4 Feb 2020

Same error on angular version too.

PS \storybook-angular> yarn storybook
yarn run v1.21.1
$ start-storybook -p 6006
info @storybook/angular v5.3.11
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook\main.js".
info => Found custom tsconfig.json
info => Using default Webpack setup.
\storybook-angular\node_modules\@storybook\core\dist\server\dev-server.js:80
          stats.toJson(options.errorDetails);
                ^

TypeError: Cannot read property 'toJson' of null
    at Watching.handler (\storybook-angular\node_modules\@storybook\core\dist\server\dev-server.js:80:17)
    at Watching._done (\storybook-angular\node_modules\@storybook\core\node_modules\webpack\lib\Watching.js:95:9)
    at onCompiled (\storybook-angular\node_modules\@storybook\core\node_modules\webpack\lib\Watching.js:44:26)
    at \storybook-angular\node_modules\@storybook\core\node_modules\webpack\lib\Compiler.js:663:20
    at eval (eval at create (\storybook-angular\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at Array.<anonymous> (\storybook-angular\node_modules\@storybook\core\node_modules\webpack\lib\DllReferencePlugin.js:54:24)
    at Storage.finished (\storybook-angular\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at ReadFileContext.<anonymous> (\storybook-angular\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9)
    at ReadFileContext.callback (\storybook-angular\node_modules\graceful-fs\graceful-fs.js:115:16)
    at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:239:13)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS \storybook-angular>

downgraded to 5.3.10 and it is working.

denizguzel on 4 Feb 2020

I am receiving the same issue

TypeError: Cannot read property 'toJson' of null
    at Watching.handler (/Users/userAccount/Documents/contentful-node/node_modules/@storybook/core/dist/server/dev-server.js:80:17)
    at Watching._done (/Users/userAccount/Documents/contentful-node/node_modules/webpack/lib/Watching.js:95:9)
    at onCompiled (/Users/userAccount/Documents/contentful-node/node_modules/webpack/lib/Watching.js:44:26)
    at /Users/userAccount/Documents/contentful-node/node_modules/webpack/lib/Compiler.js:663:20
    at eval (eval at create (/Users/userAccount/Documents/contentful-node/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at Array.<anonymous> (/Users/userAccount/Documents/contentful-node/node_modules/webpack/lib/DllReferencePlugin.js:54:24)
    at Storage.finished (/Users/userAccount/Documents/contentful-node/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at ReadFileContext.<anonymous> (/Users/userAccount/Documents/contentful-node/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
    at ReadFileContext.callback (/Users/userAccount/Documents/contentful-node/node_modules/graceful-fs/graceful-fs.js:115:16)
    at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:239:13)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] storybook: `start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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/userAccount/.npm/_logs/2020-02-04T17_58_46_875Z-debug.log

I am adding my debug.log as well
0 info it worked if it ends with ok 1 verbose cli [ '/Users/userAccount/.nvm/versions/node/v10.18.1/bin/node', 1 verbose cli '/Users/userAccount/.nvm/versions/node/v10.18.1/bin/npm', 1 verbose cli 'run', 1 verbose cli 'storybook' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prestorybook', 'storybook', 'poststorybook' ] 5 info lifecycle [email protected]~prestorybook: [email protected] 6 info lifecycle [email protected]~storybook: [email protected] 7 verbose lifecycle [email protected]~storybook: unsafe-perm in lifecycle true 8 verbose lifecycle [email protected]~storybook: PATH: /Users/userAccount/.nvm/versions/node/v10.18.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/userAccount/Documents/contentful-node/node_modules/.bin:/usr/local/opt/unzip/bin:/Users/userAccount/.asdf/shims:/usr/local/Cellar/asdf/0.7.6/bin:/Users/userAccount/.asdf/bin:/Users/userAccount/.rbenv/shims:/Users/userAccount/.rbenv/shims:./bin:/Users/userAccount/.shopify-app-cli/bin/user:/usr/local/opt/openssl/bin:/usr/local/sbin:/usr/local/Cellar/zplug/2.4.2/bin:/usr/local/opt/curl-openssl/bin:/Users/userAccount/.nvm/versions/node/v10.18.1/bin:/Users/userAccount/Documents/contentful-node/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/userAccount/.rbenv/shims:/Users/userAccount/.rbenv/bin:/usr/local/go/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Applications/Postgres.app/Contents/Versions/latest/bin:/Users/userAccount/.rvm/bin:/Users/userAccount/.rvm/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin 9 verbose lifecycle [email protected]~storybook: CWD: /Users/userAccount/Documents/contentful-node 10 silly lifecycle [email protected]~storybook: Args: [ '-c', 'start-storybook -p 6006' ] 11 silly lifecycle [email protected]~storybook: Returned: code: 1 signal: null 12 info lifecycle [email protected]~storybook: Failed to exec storybook script 13 verbose stack Error: [email protected] storybook: `start-storybook -p 6006` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/Users/userAccount/.nvm/versions/node/v10.18.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16) 13 verbose stack at EventEmitter.emit (events.js:198:13) 13 verbose stack at ChildProcess.<anonymous> (/Users/userAccount/.nvm/versions/node/v10.18.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:198:13) 13 verbose stack at maybeClose (internal/child_process.js:982:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5) 14 verbose pkgid [email protected] 15 verbose cwd /Users/userAccount/Documents/contentful-node 16 verbose Darwin 19.3.0 17 verbose argv "/Users/userAccount/.nvm/versions/node/v10.18.1/bin/node" "/Users/userAccount/.nvm/versions/node/v10.18.1/bin/npm" "run" "storybook" 18 verbose node v10.18.1 19 verbose npm v6.13.4 20 error code ELIFECYCLE 21 error errno 1 22 error [email protected] storybook: `start-storybook -p 6006` 22 error Exit status 1 23 error Failed at the [email protected] storybook script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]

smoreau-tj on 4 Feb 2020

I'm running into this same error on my ember project upgrading from 5.2.8 to 5.3.11

ddoria921 on 4 Feb 2020

It was caused by https://github.com/storybookjs/storybook/pull/8391

rafaelfbs on 4 Feb 2020

👍10

Forcing to 5.3.10 without caret, works.

smo043 on 4 Feb 2020

👍3

@SMOHA786 For any storybook related package?

ddoria921 on 4 Feb 2020

Downgrading to 5.3.10 worked for me

ddoria921 on 4 Feb 2020

👍9

I pinged Shilman on discord to this issue. Hopefully he or another maintainer will see this soon.

joeycozza on 4 Feb 2020

👍6

Seeing the same error as OP on version 5.3.11.

Bumping down to version 5.3.10 worked for me.

jee on 4 Feb 2020

👍8 🎉1

Not that it is really a big deal, but a thumbs up on the previous comments that are the exactly the same would probably suffice.

joeycozza on 4 Feb 2020

🎉6

oof this was killing me. Thanks all

AskAlice on 4 Feb 2020

👍2

Same issue. Are there fixing coming up?

samuelcastro on 4 Feb 2020

No one has responded on the storybook discord about it. I know a lot of them don't work in the USA, so maybe they're not working right now. Best bet is to pin your @storybook versions to 5.3.10 until they address this.

joeycozza on 4 Feb 2020

👍2

Hey! I'm kinda new at this... how can i downgrade my storybook now? After the update? I'm having the same issue

profdangarcia on 4 Feb 2020

@profdangarcia - Delete node_modules, package-lock.json or yarn-lock.json, and replace the package versions in package.json like below:

"@storybook/addon-a11y": "5.3.10", "@storybook/addon-actions": "5.3.10", "@storybook/addon-backgrounds": "5.3.10", "@storybook/addon-docs": "5.3.10", "@storybook/addon-info": "5.3.10", "@storybook/addon-knobs": "5.3.10", "@storybook/addon-storysource": "5.3.10", "@storybook/react": "5.3.10", "@storybook/source-loader": "5.3.10"

smo043 on 4 Feb 2020

👍2

Same issue

{
    "@storybook/addon-actions": "^5.3.11",
    "@storybook/addon-info": "^5.3.11",
    "@storybook/addon-links": "^5.3.11",
    "@storybook/addons": "^5.3.11",
    "@storybook/react": "^5.3.11",
}

codejamninja on 4 Feb 2020

Don't have to downgrade addons, just @storybook/react: yarn add @storybook/[email protected] -D solved this for me.

mayteio on 4 Feb 2020

Sorry everybody. Backing out that change now & will release the fix in 5.3.12. 🤦‍♂

shilman on 5 Feb 2020

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.12 containing PR #9753 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

shilman on 5 Feb 2020

❤2

Can somebody here please test the new release 5.3.12 and report back? I wasn't able to repro the problem on my local machine. Thanks!

shilman on 5 Feb 2020

Can somebody here please test the new release 5.3.12 and report back? I wasn't able to repro the problem on my local machine. Thanks!

Just tested v5.3.12 and it fixed the issue for me.

(Small aside, you literally pushed the release as I was trying to find a solution, best response time ever <3 )

LorsK on 5 Feb 2020

❤3 🎉3 👍1

Thank you it's fixed.

smo043 on 5 Feb 2020

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.6 containing PR #9753 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

shilman on 5 Feb 2020

Does anyone know how I got this error after updating to 5.3.10? (5.3.12 is same)

Cannot read property 'lightest' of undefined
TypeError: Cannot read property 'lightest' of undefined
    at getScrollAreaStyles (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:57429:78)
    at http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:64697:100
    at updateContextConsumer (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:333148:19)
    at beginWork$1 (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:333531:14)
    at HTMLUnknownElement.callCallback (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:313640:14)
    at Object.invokeGuardedCallbackDev (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:313689:16)
    at invokeGuardedCallback (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:313744:31)
    at beginWork$$1 (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:339084:7)
    at performUnitOfWork (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:338002:12)
    at workLoopSync (http://localhost:9102/vendors~main.ab55771d99747cc04a57.bundle.js:337975:22)

CjChoiNZ on 5 Feb 2020

@CjChoiNZ remove node_modules and reinstall. if that doesn't work, remove lockfile and reinstall.

shilman on 5 Feb 2020

@shamin I have tried that already but same issue :/
My previous version was ^5.2.6 it totally worked fine. Docs tab is broken after bumping the version.

CjChoiNZ on 5 Feb 2020

@CjChoiNZ https://github.com/storybookjs/storybook/issues/7914

shilman on 5 Feb 2020

@shamin Already read #7914 and tried but has same error. Apparently my project something has broken. I will have look and see it again. Thank you for the prompt response!

CjChoiNZ on 5 Feb 2020

@CjChoiNZ are you using emotion in your project? Could be a version conflict there?

shilman on 5 Feb 2020

Was this page helpful?

0 / 5 - 0 ratings