[dev-server-storybook] start fails due to require() of ES modules is not supported when package.json type: module is used

[samvimes01]

Hello. There is an issue starting dev-server-storybook when it's used in a library with "type: module"

###Steps to reproduce:

1. start a package with packcage.json "type: module" (or for example clone or download https://github.com/lit/lit-element-starter-ts)
2. according to the current guide add the dev-server-storybook

• create a .storybook/main.js with exports.default = (N.B. - it's the source of issue)
• create a .storybook/server.config.mjs

3. run wds --config .storybook/server.config.mjs
4. got the error ERR_REQUIRE_ESM require() of ES modules is not supported

> wds --config .storybook/server.config.mjs

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ~/lit-element-starter-ts-main/.storybook/main.js
require() of ES modules is not supported.
require() of ~/lit-element-starter-ts-main/.storybook/main.js from ~/lit-element-starter-ts-main/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.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 ~/lit-element-starter-ts-main/package.json.

Possible solution 1

remove "type: "module" from your package.json

Possible solution 2

• fix packages/dev-server-storybook/src/shared/config/readStorybookConfig.ts rename hardcoded main.js to main.cjs
• fix the docs and guide (rename hardcoded main.js to main.cjs)

[samvimes01]

This PR https://github.com/modernweb-dev/web/pull/1831 should fix the issue