Can't resolve 'child_process' in username-sync

[vgrinko]

Hello, I'am trying to add storybook-cli to my project, and try to run it (yarn storybook).
But I keep hitting this error:
ERROR in ./node_modules/username-sync/index.js Module not found: Error: Can't resolve 'child_process' in '/Users/my-name/my-workspace/my-project-name/node_modules/username-sync' @ ./node_modules/username-sync/index.js 4:15-39 34:19-43 44:11-35 @ ./node_modules/async-disk-cache/index.js @ ./node_modules/ember-cli-htmlbars/node_modules/broccoli-persistent-filter/lib/strategies/persistent.js @ ./node_modules/ember-cli-htmlbars/node_modules/broccoli-persistent-filter/index.js @ ./node_modules/ember-cli-htmlbars/index.js @ ./stories/1-Button.stories.js @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^/]*?\.stories\.js\/?)$ @ ./.storybook/generated-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

I tried adding browser: 'empty' or browser: false to package.json, without any luck.

Any advice appreciated.

[vgrinko]

Found workaround.
Add custom config for webpack to mock child_process in .storybook/main.js:

1. create file .storybook/childProcessMock.js

module.exports = {
  execSync: () => 'mockUserName',
};

2. add webpackFinal to .storybook/main.js like this:

const path = require('path');
module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (storybookBaseConfig, configType) => {
    storybookBaseConfig.resolve.alias = {
      ...storybookBaseConfig.resolve.alias,
      'child_process': path.resolve(__dirname, 'childProcessMock.js')
    };
    return storybookBaseConfig;
  }
};

[vgrinko]

This post actually has simpler solution
storybookjs/storybook#4082 (comment)

Add this to .storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config, configType) => {
    config.node = {fs: 'empty', child_process: 'empty'};
    return config;
  },
};