feat(storybook): Custom .babelrc in Storybook (#10551)

nrwl · Jun 7, 2022 · 52f824c · 52f824c
1 parent 8ed3c70
commit 52f824c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/docs/generated/packages/storybook.json b/docs/generated/packages/storybook.json
@@ -307,6 +307,10 @@
                 "type": "string",
                 "description": "Path to storybook preview.js file."
               },
+              "babelrcPath": {
+                "type": "string",
+                "description": "Path to storybook .babelrc file."
+              },
               "srcRoot": {
                 "type": "string",
                 "description": "Project source path."

diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts
@@ -147,31 +147,36 @@ export const webpack = async (
       '11.0.0'
     )
   ) {
-    const babelrc = readJsonFile(
-      joinPathFragments(options.configDir, '../', '.babelrc')
-    );
-    if (babelrc?.plugins?.includes('@emotion/babel-plugin')) {
-      resolvedEmotionAliases = {
-        resolve: {
-          alias: {
-            '@emotion/core': joinPathFragments(
-              workspaceRoot,
-              'node_modules',
-              '@emotion/react'
-            ),
-            '@emotion/styled': joinPathFragments(
-              workspaceRoot,
-              'node_modules',
-              '@emotion/styled'
-            ),
-            'emotion-theming': joinPathFragments(
-              workspaceRoot,
-              'node_modules',
-              '@emotion/react'
-            ),
+    try {
+      const babelrc = readJsonFile(
+        options.babelrcPath ||
+          joinPathFragments(options.configDir, '../', '.babelrc')
+      );
+      if (babelrc?.plugins?.includes('@emotion/babel-plugin')) {
+        resolvedEmotionAliases = {
+          resolve: {
+            alias: {
+              '@emotion/core': joinPathFragments(
+                workspaceRoot,
+                'node_modules',
+                '@emotion/react'
+              ),
+              '@emotion/styled': joinPathFragments(
+                workspaceRoot,
+                'node_modules',
+                '@emotion/styled'
+              ),
+              'emotion-theming': joinPathFragments(
+                workspaceRoot,
+                'node_modules',
+                '@emotion/react'
+              ),
+            },
           },
-        },
-      };
+        };
+      }
+    } catch (error) {
+      // silently ignore if the .babelrc doesn't exist
     }
   }
   return mergeWebpack.merge(

diff --git a/packages/storybook/src/executors/storybook/schema.json b/packages/storybook/src/executors/storybook/schema.json
@@ -76,6 +76,10 @@
           "type": "string",
           "description": "Path to storybook preview.js file."
         },
+        "babelrcPath": {
+          "type": "string",
+          "description": "Path to storybook .babelrc file."
+        },
         "srcRoot": {
           "type": "string",
           "description": "Project source path."