Default sb init in ESM projects to use cjs

[kylegach]

Discovered the following issue (edit: also reported here: #16181):

1. Start a new project with lit-element-starter-js
2. Run npx sb init
3. Run npm run storybook
4. Receive the following error:

   ERR! Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: <path-to-project>/.storybook/main.js
   ERR! require() of ES modules is not supported.
   ERR! require() of <path-to-project>/.storybook/main.js from <path-to-project>/node_modules/@storybook/core-common/dist/cjs/utils/interpret-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.
   ERR! Instead rename main.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from <path-to-project>/package.json.
   ERR!
   ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
   ERR!     at Module.load (internal/modules/cjs/loader.js:937:32)
   ERR!     at Function.Module._load (internal/modules/cjs/loader.js:778:12)
   ERR!     at Module.require (internal/modules/cjs/loader.js:961:19)
   ERR!     at require (internal/modules/cjs/helpers.js:92:18)
   ERR!     at interopRequireDefault (<path-to-project>/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
   ERR!     at serverRequire (<path-to-project>/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
   ERR!     at getPreviewBuilder (<path-to-project>/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
   ERR!     at buildDevStandalone (<path-to-project>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:99:71)
   ERR!     at async buildDev (<path-to-project>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)

5. Following those directions corrected the issue, so this PR is an attempt to do that automatically

What I did

1. Attempt to default to commonJs: true when ran in an ESM project (e.g. "type": "module")

Submitting a draft PR because I'm only ~80% sure this is the way to do that, or that it should be done in the first place).

How to test

No idea how to test sb init

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 4904adb. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[kylegach]

After writing that description, I had a thought and noticed the readPackageJson utility in that file. Perhaps instead of always defaulting to commonJs: true for "web components" projects, we could read the type do that whenever type === 'module'?

Edit: I decided this was a better approach, so I just pushed a commit reverting the previous commit's changes and attempting this method. I've updated the title and description accordingly.

[shilman]

LGTM!