Webpack5 + type: module = require is not defined

Describe the bug A barebones example with type: module and Webpack5 results in “require is not defined” error in browser:

Uncaught ReferenceError: require is not defined
    js generated-stories-entry.js:3
    Webpack 7
        __webpack_require__
        __webpack_exec__
        <anonymous>
        O
        <anonymous>
        webpackJsonpCallback
        <anonymous>

To Reproduce

git clone [e-mail]:arty-name/storybook-webpack5-module.git && yarn install && npx start-storybook

Alternatively these simple steps:

1. Create package.json containing { "type": "module" }
2. yarn add react react-dom
3. yarn add --dev @storybook/react @storybook/builder-webpack5 @storybook/manager-webpack5
4. Create .storybook/main.cjs containing module.exports = { core: { builder: 'webpack5' }, stories: ['../test.stories.js'] }
5. Create test.stories.js containing:

export default { title: 'Story' }
export function Story() {
  return 'Pass!'
}

1. npx start-storybook

System

Environment Info:

  System:
    OS: Linux 5.8 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:
    Node: 16.3.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.15.1 - /usr/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.1
  npmPackages:
    @storybook/builder-webpack5: ^6.3.0 => 6.3.0 
    @storybook/manager-webpack5: ^6.3.0 => 6.3.0 
    @storybook/react: ^6.3.0 => 6.3.0 

[shilman]

If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize!

[arty-name]

The .storybook/package.json workaround works indeed, thanks!