[storybook] type: module and main.cjs

[bennypowers]

I want to use storybook-prebuilt in a type: module package I added "type": "module", then did

mv .storybook/main.js .storybook/main.cjs

I expected no change to sb behavior I actually got

We could not find any stories for the provided pattern(s) "./stories/*.stories.{js,mdx}". You can configure this in your main.js configuration file.

Here is the diff that solved my problem:

diff --git a/node_modules/@open-wc/demoing-storybook/src/start/readCommandLineArgs.js b/node_modules/@open-wc/demoing-storybook/src/start/readCommandLineArgs.js
index 85cd5ef..b034ad1 100644
--- a/node_modules/@open-wc/demoing-storybook/src/start/readCommandLineArgs.js
+++ b/node_modules/@open-wc/demoing-storybook/src/start/readCommandLineArgs.js
@@ -19,11 +19,16 @@ module.exports = function readCommandLineArgs() {
     ],
     { partial: true },
   );
-  const mainFilePath = path.join(process.cwd(), tmpConfig['config-dir'], 'main.js');
-  const mainDir = path.dirname(mainFilePath);
+  const mainDir = path.join(process.cwd(), tmpConfig['config-dir'])
+  const mainFilePathJS = path.join(mainDir, 'main.js');
+  const mainFilePathCJS = path.join(mainDir, 'main.cjs');
+  const mainFilePath =
+      fs.existsSync(mainFilePathJS) ? mainFilePathJS
+    : fs.existsSync(mainFilePathCJS) ? mainFilePathCJS
+    : false;
 
   let mainJs = { esDevServer: {} };
-  if (fs.existsSync(mainFilePath)) {
+  if (mainFilePath) {
     // eslint-disable-next-line import/no-dynamic-require, global-require
     mainJs = require(mainFilePath);
     if (mainJs.stories) {

This issue body was partially generated by patch-package.

This same issue applies to @web/[email protected] cc @Westbrook

patches/@web+dev-server-storybook+0.3.8.patch:

diff --git a/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js b/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js
index 26a5356..560c487 100644
--- a/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js
+++ b/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js
@@ -33,6 +33,7 @@ function readStorybookConfig(pluginConfig) {
         ? path_1.default.resolve(pluginConfig.configDir)
         : defaultConfigDir;
     const mainJsPath = path_1.default.join(configDir, 'main.js');
+    const mainCjsPath = path_1.default.join(configDir, 'main.cjs');
     const managerJsPath = path_1.default.join(configDir, 'manager.js');
     const previewJsPath = path_1.default.join(configDir, 'preview.js');
     const managerHeadPath = path_1.default.join(configDir, 'manager-head.html');
@@ -41,8 +42,10 @@ function readStorybookConfig(pluginConfig) {
     let managerHead = undefined;
     let previewHead = undefined;
     let previewBody = undefined;
-    if (!fs_1.default.existsSync(mainJsPath)) {
-        throw utils_1.createError(`Could not find any storybook configuration at ${mainJsPath}. You can change the storybook config directory using the configDir option.`);
+
+    const mainPath = fs_1.default.existsSync(mainJsPath) ? mainJsPath : fs_1.default.existsSync(mainCjsPath) ? mainCjsPath : false;
+    if (!mainPath) {
+        throw utils_1.createError(`Could not find any storybook configuration at ${mainJsPath} or ${mainCjsPath}. You can change the storybook config directory using the configDir option.`);
     }
     if (fs_1.default.existsSync(managerHeadPath)) {
         managerHead = fs_1.default.readFileSync(managerHeadPath, 'utf-8');
@@ -53,10 +56,10 @@ function readStorybookConfig(pluginConfig) {
     if (fs_1.default.existsSync(previewBodyPath)) {
         previewBody = fs_1.default.readFileSync(previewBodyPath, 'utf-8');
     }
-    const mainJs = validateMainJs(require(mainJsPath));
+    const mainJs = validateMainJs(require(mainPath));
     return {
         mainJs,
-        mainJsPath,
+        mainJsPath: mainPath,
         managerJsPath,
         previewJsPath,
         managerHead,

[Westbrook]

This looks quite nice. I cheated and just added a package.json in the .storybook directory with {} as its contents, which resolved the module style back to CJS.

[bennypowers]

Do we have a package to handle this kind of file lookup or did I dream that up?

[LarsDenBakker]

I've always tried to match whatever storybook itself is doing here.