JSON requests to Storybook are returning a parsing error.

[joewanko]

Describe the bug
JSON requests made to Storybook return an error.

To Reproduce

1. Make any type of request to Storybook with the header content-type:application/json included.
2. Notice the error response.

Expected behavior
All JSON requests resolve properly.

Error Log

SyntaxError: Unexpected token " in JSON at position 0
    at JSON.parse (<anonymous>)
    at createStrictSyntaxError ([...dir]/node_modules/body-parser/lib/types/json.js:158:10)
    at parse ([...dir]/node_modules/body-parser/lib/types/json.js:83:15)
    at [...dir]/node_modules/body-parser/lib/read.js:121:18
    at invokeCallback ([...dir]/node_modules/raw-body/index.js:224:16)
    at done ([...dir]/node_modules/raw-body/index.js:213:7)
    at IncomingMessage.onEnd ([...dir]/node_modules/raw-body/index.js:273:7)
    at IncomingMessage.emit (events.js:314:20)
    at endReadableNT (_stream_readable.js:1223:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.19.1 - ~/.nvm/versions/node/v12.19.1/bin/node
    npm: 6.14.8 - ~/.nvm/versions/node/v12.19.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Safari: 13.1.3
  npmPackages:
    @storybook/addon-a11y: ^6.1.5 => 6.1.5
    @storybook/addon-actions: ^6.1.5 => 6.1.5
    @storybook/addon-docs: ^6.1.5 => 6.1.5
    @storybook/addon-storyshots: ^6.1.5 => 6.1.5
    @storybook/addons: ^6.1.5 => 6.1.5
    @storybook/components: ^6.1.5 => 6.1.5
    @storybook/csf: 0.0.1 => 0.0.1
    @storybook/react: ^6.1.5 => 6.1.5

Additional context
This blocks any JSON-related custom middleware added via middleware.js from executing properly. It is related to a catch-all express.json() middleware being added before any developer middleware is included. Since Express.js middleware is executed sequentially, all content-type:application/json requests are routed through that first, and the error is occurring before any other middleware can reroute or manipulate the request.

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.7 containing PR #13295 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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

[radihuq]

I ran into the following error:

info @storybook/react v6.1.14
info
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 6 other files in "./.storybook"
info => Adding stories defined in ".storybook\main.js"
info => Loading Webpack configuration from `..\..\node_modules\react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup
ERR! SyntaxError: C:\PROJECT\packages\ui-components\node_modules\.cache\storybook\dev-server/325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7: Unexpected token } in JSON at position 27
ERR!     at JSON.parse (<anonymous>)
ERR!     at C:\PROJECT\node_modules\file-system-cache\node_modules\jsonfile\index.js:36:18
ERR!     at C:\PROJECT\node_modules\graceful-fs\graceful-fs.js:123:16
ERR!     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
ERR!  SyntaxError: C:\PROJECT\packages\ui-components\node_modules\.cache\storybook\dev-server/325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7: Unexpected token } in JSON at position 27
ERR!     at JSON.parse (<anonymous>)
ERR!     at C:\PROJECT\node_modules\file-system-cache\node_modules\jsonfile\index.js:36:18
ERR!     at C:\PROJECT\node_modules\graceful-fs\graceful-fs.js:123:16
ERR!     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3) {
ERR!   stack: 'SyntaxError: C:\\PROJECT\\packages\\ui-components\\node_modules\\.cache\\storybook\\dev-server/325c8f456729b912b0d2134054eb7448-41ac79ddc5290d504ad69ef1fe8200a7: Unexpected token } in JSON at position 27\n' +
ERR!     '    at JSON.parse (<anonymous>)\n' +
ERR!     '    at C:\\PROJECT\\node_modules\\file-system-cache\\node_modules\\jsonfile\\index.js:36:18\n' +
ERR!     '    at C:\\PROJECT\\node_modules\\graceful-fs\\graceful-fs.js:123:16\n' +
ERR!     '    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)'
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Using cached manager

I resolved the error by deleting my yarn.lock, my node_module directories, and then installing all my packages again