Use babel-loader from react-scripts

storybookjs · Feb 3, 2019 · 76d8f77 · 76d8f77
1 parent a1636a3
commit 76d8f77
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 6 deletions.
diff --git a/app/react/package.json b/app/react/package.json
@@ -51,6 +51,11 @@
     "react": "*",
     "react-dom": "*"
   },
+  "peerDependenciesMeta": {
+    "babel-loader": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   }

diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.js
@@ -148,5 +148,8 @@ export function applyCRAWebpackConfig(baseConfig, configDir) {
       ...baseConfig.resolve,
       extensions: [...baseConfig.resolve.extensions, ...tsExtensions],
     },
+    resolveLoader: {
+      modules: ['node_modules', path.join(getReactScriptsPath(), 'node_modules')],
+    },
   };
 }
diff --git a/lib/cli/generators/REACT_SCRIPTS/index.js b/lib/cli/generators/REACT_SCRIPTS/index.js
@@ -1,6 +1,7 @@
 import mergeDirs from 'merge-dirs';
 import path from 'path';
 import fs from 'fs';
+import semver from 'semver';
 import { getVersions, getPackageJson, writePackageJson, installBabel } from '../../lib/helpers';
 
 export default async npmOptions => {
@@ -24,7 +25,10 @@ export default async npmOptions => {
   packageJson.devDependencies['@storybook/addon-links'] = linksVersion;
   packageJson.devDependencies['@storybook/addons'] = addonsVersion;
 
-  await installBabel(npmOptions, packageJson);
+  // When working with CRA 2.x, we'll use CRAs babel-loader.
+  if (!semver.lt(packageJson.dependencies['react-scripts'], '2.0.0')) {
+    await installBabel(npmOptions, packageJson);
+  }
 
   packageJson.scripts.storybook = 'start-storybook -p 9009';
   packageJson.scripts['build-storybook'] = 'build-storybook';

diff --git a/lib/core/package.json b/lib/core/package.json
@@ -100,6 +100,11 @@
     "react": "*",
     "react-dom": "*"
   },
+  "peerDependenciesMeta": {
+    "babel-loader": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   }

diff --git a/lib/core/src/server/common/common-preset.js b/lib/core/src/server/common/common-preset.js
@@ -5,7 +5,9 @@ import babelConfig from './babel';
 export const babel = async (_, options) => {
   const { configDir, presets } = options;
 
-  return loadCustomBabelConfig(configDir, () =>
-    presets.apply('babelDefault', babelConfig(options), options)
+  return loadCustomBabelConfig(
+    configDir,
+    () => presets.apply('babelDefault', babelConfig(options), options),
+    options
   );
 };
diff --git a/lib/core/src/server/utils/load-custom-babel-config.js b/lib/core/src/server/utils/load-custom-babel-config.js
@@ -46,15 +46,21 @@ function loadFromPath(babelConfigPath) {
   return config;
 }
 
-function isBabelLoader8() {
+function isBabelLoader8(options) {
+  if (options.name === '@storybook/react') {
+    // eslint-disable-next-line global-require, import/no-unresolved
+    const { isReactScriptsInstalled } = require('@storybook/react/dist/server/cra-config.js');
+    // We use CRA's `babel-loader` when working with CRA version 2.x.
+    if (isReactScriptsInstalled()) return true;
+  }
   // eslint-disable-next-line import/no-dynamic-require,global-require
   const babelLoaderPkg = require(resolveSync('babel-loader/package.json', {
     basedir: process.cwd(),
   }));
   return satisfies(babelLoaderPkg.version, '>=8.0.0-0');
 }
 
-export default async function(configDir, getDefaultConfig) {
+export default async function(configDir, getDefaultConfig, options) {
   const babelConfig = loadFromPath(path.resolve(configDir, '.babelrc'));
 
   if (babelConfig) {
@@ -66,5 +72,5 @@ export default async function(configDir, getDefaultConfig) {
     return babelConfig;
   }
 
-  return isBabelLoader8() ? getDefaultConfig() : {};
+  return isBabelLoader8(options) ? getDefaultConfig() : {};
 }