Merge pull request #1350 from storybooks/1254-storyshots-babel-problem

Remove the `cacheDirectory` option from babel config

addons/storyshots/src/index.js

@@ -31,7 +31,8 @@ export default function testStorySnapshots(options = {}) {
   if (isStorybook) {
     storybook = require.requireActual('@storybook/react');
     // eslint-disable-next-line
-    const loadBabelConfig = require('@storybook/react/dist/server/babel_config').default;
+    const loadBabelConfig = require('@storybook/react/dist/server/babel_config')
+      .default;
     const configDirPath = path.resolve(options.configPath || '.storybook');
     configPath = path.join(configDirPath, 'config.js');
 

app/react-native/package.json

@@ -51,6 +51,7 @@
     "events": "^1.1.1",
     "express": "^4.15.2",
     "file-loader": "^0.11.1",
+    "find-cache-dir": "^1.0.0",
     "global": "^4.3.2",
     "json-loader": "^0.5.4",
     "json5": "^0.5.1",

app/react-native/src/server/config.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import JSON5 from 'json5';
+import findCacheDir from 'find-cache-dir';
 
 // avoid ESLint errors
 const logger = console;
@@ -82,6 +83,13 @@ export default function(configType, baseConfig, projectDir, configDir) {
     config.module.loaders[0].query = babelConfig;
   }
 
+  // This is a feature of `babel-loader` for webpack (not Babel itself).
+  // It enables a cache directory for faster-rebuilds
+  // `find-cache-dir` will create the cache directory under the node_modules directory.
+  config.module.loaders[0].query.cacheDirectory = findCacheDir({
+    name: 'react-storybook',
+  });
+
   // Check whether addons.js file exists inside the storybook.
   // Load the default addons.js file if it's missing.
   const storybookDefaultAddonsPath = path.resolve(__dirname, 'addons.js');

app/react-native/src/server/config/babel.js

@@ -10,9 +10,6 @@
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
-  // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables caching results in OS temporary directory for faster rebuilds.
-  cacheDirectory: true,
   presets: [
     // let, const, destructuring, classes, modules
     require.resolve('babel-preset-es2015'),

app/react/src/server/config.js

@@ -1,6 +1,7 @@
 /* eslint-disable global-require, import/no-dynamic-require */
 import fs from 'fs';
 import path from 'path';
+import findCacheDir from 'find-cache-dir';
 import loadBabelConfig from './babel_config';
 
 // avoid ESLint errors
@@ -13,7 +14,13 @@ export default function(configType, baseConfig, configDir) {
   const config = baseConfig;
 
   const babelConfig = loadBabelConfig(configDir);
-  config.module.rules[0].query = babelConfig;
+  config.module.rules[0].query = {
+    // This is a feature of `babel-loader` for webpack (not Babel itself).
+    // It enables a cache directory for faster-rebuilds
+    // `find-cache-dir` will create the cache directory under the node_modules directory.
+    cacheDirectory: findCacheDir({ name: 'react-storybook' }),
+    ...babelConfig,
+  };
 
   // Check whether a config.js file exists inside the storybook
   // config directory and throw an error if it's not.

app/react/src/server/config/babel.js

@@ -7,15 +7,9 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-const findCacheDir = require('find-cache-dir');
-
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
-  // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables a cache directory for faster-rebuilds
-  // `find-cache-dir` will create the cache directory under the node_modules directory.
-  cacheDirectory: findCacheDir({ name: 'react-storybook' }),
   presets: [
     require.resolve('babel-preset-es2015'),
     require.resolve('babel-preset-es2016'),