Storybook cannot be built on packages using "type": "module"

Describe the bug

For projects configured to use native ES modules in node.js via the "type": "module" configuration in package.json (https://nodejs.org/api/esm.html#esm_package_json_type_field), Storybook cannot require() the main.js configuration file, because node does not support require() for this package type. We also cannot rename it to main.cjs to allow the use of require(), because Storybook does not recognize that file.

yarn run v1.22.4                                                                         
$ build-storybook -c .storybook -o storybook-out  -s ./static                            
info @storybook/vue v5.3.19                                                              
info                                                                                     
info clean outputDir..                                                                   
info => Copying static files from: ./static                                              
info => Copying prebuild dll's..                                                         
info => Building manager..                                                               
info => Loading manager config..                                                         
(node:38218) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /.../.storybook/main.js
require() of ES modules is not supported.                                                
require() of /.../.storybook/main.js from /.../node_modules/@storybook/core/dist/server/utils/server-require.
js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename main.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /.../package.json.
                                                                                         
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1154:13)            
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at interopRequireDefault (/.../node_modules/@storybook/core/dist/server/utils/server-require.js:63:18)

To Reproduce In any project using Storybook, add "type": "module" to your package.json and observe broken builds (even after converting all your commonjs to esm).

Expected behavior Storybook should provide some mechanism for allowing configuration in packages that use the module type.

System:

    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 12.18.2 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 73.0
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.19 => 5.3.19 
    @storybook/addon-knobs: ^5.3.17 => 5.3.19 
    @storybook/addons: ^5.3.17 => 5.3.19 
    @storybook/vue: ^5.3.17 => 5.3.19

[shilman]

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

[jeanfredrik]

I solved it by adding a package.json file inside the .storybook folder. The file could have any content really, but an empty object gives an error, so I went with this:

{
  "type": "commonjs"
}