Process Not Defined with Webpack 5

[dtothefp]

Describe the bug
When installing a NPM module that has path as a dependency some sort of Wepback polyfill seems to be breaking.

To Reproduce
For this example I installed path directly but what was causing my failure is having the dependency contentful-cli which resulted in the path module being installed

To reproduced install the NPM modules and run storybook with the start-storybook command. you will see an error in the browser console coming from the path NPM module ReferenceError: process is not defined

  "devDependencies": {
    "@storybook/addon-a11y": "6.4.0-alpha.31",
    "@storybook/addon-actions": "6.4.0-alpha.31",
    "@storybook/addon-docs": "6.4.0-alpha.31",
    "@storybook/addon-knobs": "^6.1.5",
    "@storybook/addon-viewport": "6.4.0-alpha.31",
    "@storybook/addons": "6.4.0-alpha.31",
    "@storybook/builder-webpack5": "6.4.0-alpha.31",
    "@storybook/manager-webpack5": "6.4.0-alpha.31",
    "@storybook/react": "6.4.0-alpha.31",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.51.1"
  }

System

▶ npx sb@next info

Environment Info:

  System:
    OS: macOS 11.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.16.0 - ~/.volta/tools/image/node/14.16.0/bin/node
    Yarn: 1.22.10 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn
    npm: 6.14.11 - ~/.volta/tools/image/node/14.16.0/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Firefox: 89.0
    Safari: 14.1.2
  npmPackages:
    @storybook/addon-a11y: 6.4.0-alpha.31 => 6.4.0-alpha.31
    @storybook/addon-actions: 6.4.0-alpha.31 => 6.4.0-alpha.31
    @storybook/addon-docs: 6.4.0-alpha.31 => 6.4.0-alpha.31
    @storybook/addon-knobs: ^6.1.5 => 6.3.0
    @storybook/addon-viewport: 6.4.0-alpha.31 => 6.4.0-alpha.31
    @storybook/addons: 6.4.0-alpha.31 => 6.4.0-alpha.31
    @storybook/builder-webpack5: 6.4.0-alpha.31 => 6.4.0-alpha.31
    @storybook/manager-webpack5: 6.4.0-alpha.31 => 6.4.0-alpha.31
    @storybook/react: 6.4.0-alpha.31 => 6.4.0-alpha.31

Additional context
This error is fixed by polyfilling process with the DefinePlugin`

  webpackFinal: async (config) => {
    const storybookDefinePlugin = config.plugins.find((plugin) => plugin.definitions);

    config.plugins = config.plugins.map((plugin) => {
      if (plugin instanceof DefinePlugin) {
        plugin.definitions['process'] = JSON.stringify('{}');
      }

      return plugin;
    });

    return config;
  },

[dtothefp]

looks like this has been raised in another issue as well

#14257 (comment)

[Jack-Works]

I found this issue is caused by docs plugin. Another possible fix:

addons: [
        '@storybook/addon-links',
        {
            name: '@storybook/addon-essentials',
            options: {
                // https://github.com/storybookjs/storybook/issues/15901
                // docs not compatible with webpack 5.
                docs: false,
            },
        },
    ],

[shilman]

closing as dupe to #16067