storybook: defining `process` as `true` breaks usage of libraries looking for environment variables

Describe the bug

process is defined as true using the webpack define plugin. true does not match the expectation that process is an object.

this results in libraries, even when attempting to be defensive about the presence of process, attempting to perform object actions against a boolean and therefore throwing errors at runtime.

the specific example that is giving me trouble is with the browser version of debug.

To Reproduce

Steps to reproduce the behavior:

import debug into one of your stories
navigate to that story within storybook
See error in the browser console

Expected behavior

process should either be left as undefined and expected to be added by projects that need it or at least defined using a shape that matches the expected contract. please also see this comment from a maintainer of debug about the contract of process

error

the error thrown in the case of `debug`

TypeError: Cannot use 'in' operator to search for 'env' in true
    at Function.load (browser.js?34eb:221)
    at setup (common.js?dc90:261)
    at eval (browser.js?34eb:250)
    at Object../node_modules/debug/src/browser.js (vendors~main.90358a9d4fdec3ed3967.bundle.js:75360)
    at __webpack_require__ (runtime~main.90358a9d4fdec3ed3967.bundle.js:782)
    at fn (runtime~main.90358a9d4fdec3ed3967.bundle.js:150)
    at eval (any.es.js?d9f8:39)
    at Module../node_modules/@travi/any/lib/any.es.js (vendors~main.90358a9d4fdec3ed3967.bundle.js:68352)
    at __webpack_require__ (runtime~main.90358a9d4fdec3ed3967.bundle.js:782)
    at fn (runtime~main.90358a9d4fdec3ed3967.bundle.js:150)

Code snippets

https://github.com/visionmedia/debug/blob/5c7c61dc0df0db4eb5de25707d8cd1b9be1add4f/src/browser.js#L216

System:

OS: MacOS
Device: Macbook Pro 2016
Browser: chrome
Framework: react
Addons: actions, info, links
Version: [e.g. 4.0.0] found initially on v5.1.0-alpha.40, but have confirmed that it still exists in v5.1.0-beta.0

Additional context

i did add a comment yesterday evening against the commit that appeared to add this definition. its it can be bad form to comment against closed issues, i figured a more formal issue could be better. please don’t see the double filing as any additional pressure from me. i’m just trying to follow up to get you the info that aligns with your normal process.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 15 (9 by maintainers)

Commits related to this issue

#6763 set a better value for process in the manager webpack config — committed to storybookjs/storybook by libetl 5 years ago
issue #6763 : set a better value for process in the manager webpack config (#6767) issue #6763 : set a better value for process in the manager webpack config — committed to storybookjs/storybook by ndelangen 5 years ago

Most upvoted comments

Here’s the workaround I put in place for now (requires full control mode):

module.exports = ({ config, mode }) => {
  const plugins = [
    ...config.plugins
      // remove instances of DefinePlugin to work around:
      // https://github.com/storybooks/storybook/issues/6763
      .filter((plugin) => !plugin.definitions),
    // replace the default DefinePlugin instance with a custom one that tries to
    // preserve everything except for `process: true`
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify(mode.toLowerCase()),
        NODE_PATH: JSON.stringify(""),
        PUBLIC_URL: JSON.stringify("."),
      },
      NODE_ENV: JSON.stringify(mode.toLowerCase()),
    }),
  ];

  return {
    ...config,
    plugins,
  };
};

lewisl9029 on May 10, 2019

@travi Thanks for the quick response. We’ll try to get it taken care of soon.

shilman on May 28, 2019

pull request is now opened

libetl on May 11, 2019