React JSX transform support per #12899

storybookjs · Oct 27, 2020 · c805b58 · c805b58
1 parent a8bd5ef
commit c805b58
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts
@@ -1,11 +1,28 @@
+import path from 'path';
 import { TransformOptions } from '@babel/core';
 
+const storybookReactDirName = path.dirname(require.resolve('@storybook/react/package.json'));
+// TODO: improve node_modules detection
+const context = storybookReactDirName.includes('node_modules')
+  ? path.join(storybookReactDirName, '../../') // Real life case, already in node_modules
+  : path.join(storybookReactDirName, '../../node_modules'); // SB Monorepo
+
+const hasJsxRuntime = () => {
+  try {
+    require.resolve('react/jsx-runtime', { paths: [context] });
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
 export function babelDefault(config: TransformOptions) {
+  const presetReactOptions = hasJsxRuntime() ? { runtime: 'automatic' } : {};
   return {
     ...config,
     presets: [
       ...config.presets,
-      require.resolve('@babel/preset-react'),
+      [require.resolve('@babel/preset-react'), presetReactOptions],
       require.resolve('@babel/preset-flow'),
     ],
     plugins: [...(config.plugins || []), require.resolve('babel-plugin-add-react-displayname')],