storybook: StoryShots ReferenceError: unknown base.cacheDirectory

I get Unknown option: base.cacheDirectory when trying to run StoryShots through Jest on vanilla project from create-react-app with only StoryBook added.

StoryBook works ok with create-react-app.

There was also an error regarding react-test-renderer because installing StoryShots doesn’t install it, but that can be fixed with npm install.

 PASS  src\App.test.js
 FAIL  src\storyshots.test.js
  ● Test suite failed to run

    ReferenceError: [BABEL] C:\test\.storybook\config.js: Unknown option: base.cacheDirectory. Check out http://b
abeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset
 name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets
-options.

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:
20)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)
      at Object.transformFileSync (node_modules/babel-core/lib/api/node.js:152:10)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:88:25)
      at Object.<anonymous> (src/storyshots.test.js:3:31)
          at <anonymous>

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.074s
Ran all test suites related to changed files.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 6
Comments: 17 (9 by maintainers)

Commits related to this issue

Remove the `cacheDirectory` option from babel config In storyshots, we are running babel directly, not through webpack, so we can't use this option, which applies to `babel-loader`. See https://githu... — committed to storybookjs/storybook by tmeasday 7 years ago

Most upvoted comments

Fixed in 3.1.6!

tmeasday on Jun 27, 2017

I worked around this issue by commenting out line 20 of ./node_modules/@storybook/react/dist/server/config/babel.js where the cacheDirectory option is:

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'), require.resolve('babel-preset-stage-0'), require.resolve('babel-preset-react')]
};

romulo-rosinha on Jun 13, 2017

@tmeasday It helps with the first error but then I get same error as above:

  ● Test suite failed to run

    evalmachine.<anonymous>:3
    import { configure } from '@storybook/react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at createScript (vm.js:74:10)
      at Object.runInThisContext (vm.js:116:10)
      at runWithRequireContext (node_modules/@storybook/addon-storyshots/dist/require_context.js:101:37)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/index.js:100:35)

      at Object.<anonymous> (src/stories.test.js:3:31)

adonis-work on Jun 16, 2017

Another workaround is sticking to "@storybook/addon-storyshots": "3.0.0", it seems commit https://github.com/storybooks/storybook/commit/da961dc5081a6ce468af01993baf73abc1a65881 introduced the issue.

romulo-rosinha on Jun 13, 2017