Storybook: [Bug] Running storybook with custom webpack config triggers error in release 3.3.4

Created on 8 Jan 2018 · 5Comments · Source: storybookjs/storybook

Issue details

Running storybook gives the error below. This error does not get triggered in version 3.3.3. I don't see any changes in the changelog that are related to this. Starting from 3.3.4 this fails

 throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'path', 'string');
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
    at assertPath (path.js:28:11)
    at Object.resolve (path.js:1179:7)
    at getManagerHeadHtml (/node_modules/@storybook/react/dist/server/utils.js:52:35)
    at Object.exports.default (/node_modules/@storybook/react/dist/server/config/webpack.config.js:23:53)
    at Object.<anonymous> (/.storybook/webpack.config.js:1:145)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at exports.default (/node_modules/@storybook/react/dist/server/config.js:58:22)
    at exports.default (/node_modules/@storybook/react/dist/server/middleware.js:19:37)
    at Object.<anonymous> (/node_modules/@storybook/react/dist/server/index.js:153:34)
    at Module._compile (module.js:660:30)

Steps to reproduce

we're extending webpack config like this:

const base = require("@storybook/react/dist/server/config/webpack.config").default();
const defaults = require("@storybook/react/dist/server/config/defaults/webpack.config");
const webpack = require("webpack");

module.exports = defaults(
  Object.assign({}, base, {
    resolve: Object.assign({}, base.resolve, {
      alias: Object.assign({}, (base.resolve || {}).alias, {
        react: "preact-compat",
        "react-dom": "preact-compat"
      })
    }),
    plugins: [
      new webpack.ProvidePlugin({
        Component: ["preact", "Component"],
        React: ["preact-compat"]
      })
    ].concat(base.plugins)
  })
);

Run storybook

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

storybook/react 3.3.4
storybook/addon-actions 3.3.4
storybook/addon-info 3.3.4
storybook/addon-knobs 3.3.4
storybook/addon-options 3.3.4
storybook/react 3.3.4

Affected platforms

yarn 1.2.1
node v9.3.0

question / support

Source

kendepelchin

👍1

Most helpful comment

webpack config function gets called from outside

Oh, it actually shouldn't. According to docs, your config had to be written like this:

const defaults = require("@storybook/react/dist/server/config/defaults/webpack.config");
const webpack = require("webpack");

module.exports = (base, env) => {
  const config = defaults(base, env);
  return Object.assign({}, config, {
    resolve: Object.assign({}, config.resolve, {
      alias: Object.assign({}, (config.resolve || {}).alias, {
        react: "preact-compat",
        "react-dom": "preact-compat"
      })
    }),
    plugins: [
      new webpack.ProvidePlugin({
        Component: ["preact", "Component"],
        React: ["preact-compat"]
      })
    ].concat(config.plugins)
  })
);

Note that there's no import of server/config/webpack.config file, which is considered internal

Hypnosphi on 8 Jan 2018

👍2

All 5 comments

I'm wondering if it has something to do with the npm missing packages issue this weekend?

RobinMalfait on 8 Jan 2018

Probably related to https://github.com/storybooks/storybook/pull/2666
Looks like I didn't take into account that webpack config function gets called from outside. Will send a patch PR soon

Hypnosphi on 8 Jan 2018

👍1

@Hypnosphi aha makes sense, thanks!

kendepelchin on 8 Jan 2018

webpack config function gets called from outside

Oh, it actually shouldn't. According to docs, your config had to be written like this:

const defaults = require("@storybook/react/dist/server/config/defaults/webpack.config");
const webpack = require("webpack");

module.exports = (base, env) => {
  const config = defaults(base, env);
  return Object.assign({}, config, {
    resolve: Object.assign({}, config.resolve, {
      alias: Object.assign({}, (config.resolve || {}).alias, {
        react: "preact-compat",
        "react-dom": "preact-compat"
      })
    }),
    plugins: [
      new webpack.ProvidePlugin({
        Component: ["preact", "Component"],
        React: ["preact-compat"]
      })
    ].concat(config.plugins)
  })
);

Note that there's no import of server/config/webpack.config file, which is considered internal

Hypnosphi on 8 Jan 2018

👍2

Alright mistake on our end, thanks for the help @Hypnosphi! I think this issue can be closed!

RobinMalfait on 9 Jan 2018

Was this page helpful?

0 / 5 - 0 ratings