From 69f523d782f0c14b29403e5a29682d016e5d020f Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 28 Sep 2021 12:31:49 -0600
Subject: [PATCH 1/2] Default sb init w/ "web components" to use cjs

---
 lib/cli/src/initiate.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts
index dce515f83bb0..61aeacfd6ea1 100644
--- a/lib/cli/src/initiate.ts
+++ b/lib/cli/src/initiate.ts
@@ -206,7 +206,10 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
           .then(end);
 
       case ProjectType.WEB_COMPONENTS:
-        return webComponentsGenerator(packageManager, npmOptions, generatorOptions)
+        return webComponentsGenerator(packageManager, npmOptions, {
+          ...generatorOptions,
+          commonJs: true,
+        })
           .then(commandLog('Adding Storybook support to your "web components" app'))
           .then(end);
 

From 4904adb771c94466aa7f016754e009bcf99878ff Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 28 Sep 2021 15:10:28 -0600
Subject: [PATCH 2/2] Default sb init in ESM projects to use cjs

- Reverts previous commit
---
 lib/cli/src/initiate.ts                       | 17 +++++++++++------
 lib/cli/src/js-package-manager/PackageJson.ts |  1 +
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts
index 61aeacfd6ea1..41b13a16ffd5 100644
--- a/lib/cli/src/initiate.ts
+++ b/lib/cli/src/initiate.ts
@@ -50,6 +50,7 @@ type CommandOptions = {
   yes?: boolean;
   builder?: Builder;
   linkable?: boolean;
+  commonJs?: boolean;
 };
 
 const installStorybook = (projectType: ProjectType, options: CommandOptions): Promise<void> => {
@@ -72,6 +73,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
     language,
     builder: options.builder || CoreBuilder.Webpack4,
     linkable: !!options.linkable,
+    commonJs: options.commonJs,
   };
 
   const end = () => {
@@ -206,10 +208,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
           .then(end);
 
       case ProjectType.WEB_COMPONENTS:
-        return webComponentsGenerator(packageManager, npmOptions, {
-          ...generatorOptions,
-          commonJs: true,
-        })
+        return webComponentsGenerator(packageManager, npmOptions, generatorOptions)
           .then(commandLog('Adding Storybook support to your "web components" app'))
           .then(end);
 
@@ -318,10 +317,13 @@ export function initiate(options: CommandOptions, pkg: Package): Promise<void> {
     : 'Detecting project type';
   const done = commandLog(infoText);
 
+  const packageJson = readPackageJson();
+  const isEsm = packageJson && packageJson.type === 'module';
+
   try {
     if (projectTypeProvided) {
       if (installableProjectTypes.includes(options.type)) {
-        const storybookInstalled = isStorybookInstalled(readPackageJson(), options.force);
+        const storybookInstalled = isStorybookInstalled(packageJson, options.force);
         projectType = storybookInstalled
           ? ProjectType.ALREADY_HAS_STORYBOOK
           : options.type.toUpperCase();
@@ -349,5 +351,8 @@ export function initiate(options: CommandOptions, pkg: Package): Promise<void> {
     cleanOptions.storyFormat = undefined;
   }
 
-  return installStorybook(projectType, cleanOptions);
+  return installStorybook(projectType, {
+    ...cleanOptions,
+    ...(isEsm ? { commonJs: true } : undefined),
+  });
 }
diff --git a/lib/cli/src/js-package-manager/PackageJson.ts b/lib/cli/src/js-package-manager/PackageJson.ts
index ccc96e6f9279..47cfe57275a1 100644
--- a/lib/cli/src/js-package-manager/PackageJson.ts
+++ b/lib/cli/src/js-package-manager/PackageJson.ts
@@ -4,6 +4,7 @@ export type PackageJson = {
   peerDependencies?: Record<string, string>;
   scripts?: Record<string, string>;
   eslintConfig?: any;
+  type?: 'module';
 };
 
 export type PackageJsonWithDepsAndDevDeps = PackageJson &