Storybook: Middleware error : Missing 'target' option http-proxy-middleware

[supadupdip]

Describe the bug
After upgrading from 4.0.2 to 5.0.6 I am unable to start up storybook and am getting an error for a Missing 'target' option for a middleware configuration.

To Reproduce
Steps to reproduce the behavior:
running yarn start-storybook -c .storybook

Expected behavior
Should build and open browser

Code snippets

info @storybook/react v5.0.6
info
info => Loading presets
info => Loading presets

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

ERR! Error: [HPM] Missing "target" option. Example: {target: "http://www.example.org"}
ERR!     at Object.createConfig (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/lib/config-factory.js:43:11)
ERR!     at new HttpProxyMiddleware (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/lib/index.js:17:30)
ERR!     at module.exports (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/index.js:4:10)
ERR!     at Object.keys.forEach (/Users/cgonzalez/shaolin/.storybook/middleware.js:27:58)
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/Users/cgonzalez/shaolin/.storybook/middleware.js:27:25)
ERR!     at _default (/Users/cgonzalez/shaolin/node_modules/@storybook/core/dist/server/dev-server.js:146:3)
ERR!     at buildDevStandalone (/Users/cgonzalez/shaolin/node_modules/@storybook/core/dist/server/build-dev.js:291:38)
ERR!     at <anonymous>
ERR!     at process._tickCallback (internal/process/next_tick.js:189:7)
ERR!  { Error: [HPM] Missing "target" option. Example: {target: "http://www.example.org"}
ERR!     at Object.createConfig (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/lib/config-factory.js:43:11)
ERR!     at new HttpProxyMiddleware (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/lib/index.js:17:30)
ERR!     at module.exports (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/index.js:4:10)
ERR!     at Object.keys.forEach (/Users/cgonzalez/shaolin/.storybook/middleware.js:27:58)
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/Users/cgonzalez/shaolin/.storybook/middleware.js:27:25)
ERR!     at _default (/Users/cgonzalez/shaolin/node_modules/@storybook/core/dist/server/dev-server.js:146:3)
ERR!     at buildDevStandalone (/Users/cgonzalez/shaolin/node_modules/@storybook/core/dist/server/build-dev.js:291:38)
ERR!     at <anonymous>
ERR!     at process._tickCallback (internal/process/next_tick.js:189:7)
ERR!   stack: 'Error: [HPM] Missing "target" option. Example: {target: "http://www.example.org"}\n    at Object.createConfig (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/lib/config-factory.js:43:11)\n    at new HttpProxyMiddleware (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/lib/index.js:17:30)\n    at module.exports (/Users/cgonzalez/shaolin/node_modules/http-proxy-middleware/index.js:4:10)\n    at Object.keys.forEach (/Users/cgonzalez/shaolin/.storybook/middleware.js:27:58)\n    at Array.forEach (<anonymous>)\n    at module.exports (/Users/cgonzalez/shaolin/.storybook/middleware.js:27:25)\n    at _default (/Users/cgonzalez/shaolin/node_modules/@storybook/core/dist/server/dev-server.js:146:3)\n    at buildDevStandalone (/Users/cgonzalez/shaolin/node_modules/@storybook/core/dist/server/build-dev.js:291:38)\n    at <anonymous>\n    at process._tickCallback (internal/process/next_tick.js:189:7)' }
info => Loading custom addons config.
info => Loading custom webpack config (full-control mode).
info => Using base config because react-scripts is not installed.
 10% building 1/1 modules 0 active(node:39746) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 10% building 4/7 modules 3 active ...ebpack-hot-middleware/process-update.js
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

 10% building 5/9 modules 4 active .../src sync /__stories__\/.+\.story\.js$/(node:39746) DeprecationWarning: Resolver: The callback argument was splitted into resolveContext and callback.
(node:39746) DeprecationWarning: Resolver#doResolve: The type arguments (string) is now a hook argument (Hook). Pass a reference to the hook instead.
webpack built ddc34a414475345a701b in 18334ms

Additional context
Using custom webpack config in full control mode, already updated with new syntax
Setting options via new addParameters
Using Webpack 3

[shilman]

@supadupdip This worked in SB4? I thought we didn't support webpack 3 in SB4... 🤔 ?

[supadupdip]

Yup, been working for us for months. I think the only breaking change that I saw in 4 from our configuration was the babel 7 upgrade.

[shilman]

Any chance you can provide a repro, or give more info about how this is called? Hard to make sense of it from the stack trace alone.

[supadupdip]

Found out what was causing the error above. There's a middleware.js file that we are using to customize the proxy server. Prior to v5 it was compiling correctly, however now it was throwing an error because it couldn't resolve process.env.vars resolved by moving the env.config within the middleware file.

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