Allow for a main.cjs to accommodate module packages

[andrewshawcare]

Is your feature request related to a problem? Please describe.
When a Node package is specified as a module type, the default behaviour loading .js files changes; .js files are now treated as ECMAScript modules and .cjs files are treated as CommonJS modules. When this occurs, it is impossible to load .storybook/main.js correctly as it is a CommonJS module but it is treated as if it were an ECMAScript module.

Describe the solution you'd like
I'd like to be able to configure the main file name or have Storybook look for either a main.js or main.cjs file to load the main file from.

Describe alternatives you've considered
Adding an empty package.json (a file with an empty JSON object specified) in the .storybook directory will fix this problem as Node will traverse up the file hierarchy to find out how to load modules. If there is a package.json in the .storybook directory without a "type": "module" property set, Node will assume it should load main.js as a CommonJS module and not an ECMAScript module. While this does work, it feels like a hack for an absent convention (looking for either main.js or main.cjs) or configuration (being able to specify the location of the main file).

Are you able to assist bring the feature to reality?
no

[shilman]

cc @ndelangen

[ndelangen]

Storybook doesn't control the Project Level module: field.. that's the user's package.json..

So the user get's to decide if .js means CommonJS or ESM.

If the user adds a module field, they'll also be required to either change main.js to .cjs or migrate it to ESM.

Is an action required from storybook? I don't think so, perhaps some documentation?

I haven't seen this behaviour from node, which version introduced this?

[andrewshawcare]

Once the user decides .js means ESM .storybook/main.js will not load. It does not appear that Storybook will attempt to load the main file if it has the .cjs extension, nor does it appear to be configurable.

The action required from Storybook is as specified in the original issue description, or another alternative if available.

The behaviour is documented here: https://nodejs.org/api/esm.html

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.31 containing PR #10288 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[v-zo]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.31 containing PR #10288 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

doesn't work. Where error comes from?

info @storybook/react v6.0.0-alpha.31
info 
info => Loading presets
WARN   Failed to load preset: "/Users/u18237432/Projects/ui-safe-data-2/.storybook/main"
ERR! Error: Cannot find module '/Users/u18237432/Projects/ui-safe-data-2/.storybook/main'
ERR! Require stack:
ERR! - /Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/presets.js
ERR! - /Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/config.js
ERR! - /Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/build-static.js
ERR! - /Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/server.js
ERR! - /Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/react/dist/server/index.js
ERR! - /Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:847:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:1016:19)
ERR!     at require (internal/modules/cjs/helpers.js:69:18)
ERR!     at interopRequireDefault (/Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/presets.js:170:16)
ERR!     at loadPreset (/Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/presets.js:180:20)
ERR!     at /Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/presets.js:242:18
ERR!     at Array.reduce (<anonymous>)
ERR!     at loadPresets (/Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/presets.js:241:18)
ERR!     at getPresets (/Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/presets.js:295:23)
ERR!     at _default (/Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/manager/manager-config.js:76:38)
ERR!     at _default (/Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/dev-server.js:59:51)
ERR!     at buildDevStandalone (/Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/build-dev.js:356:57)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:93:5)
ERR!     at async buildDev (/Users/u18237432/Projects/ui-safe-data-2/node_modules/@storybook/core/dist/server/build-dev.js:438:3)```

[ndelangen]

confirmed still an issue, investigating..

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.34 containing PR #10358 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.