title: Storybook fails to parse JSX from directories imported from anywhere behind the root directory
body: <p>I have a simple storybook project which is structured as so:</p>
  
  <pre><code>├── .storybook
  ├── .babelrc
  ├── package.json
  ├── node_modules
  ├── stories
  │   ├── index.js
  </code></pre>
  
  <p>and I can run my config with <code>start-storybook -p 6006</code> </p>
  
  <pre><code>// .storybook/config.js
  import { configure } from '@storybook/react'
  
  function loadStories() {
    require('../stories/index.js')
  }
  
  configure(loadStories, module)
  </code></pre>
  
  <p>Now I want to include some components which are a directory behind. So the new file structure would be:</p>
  
  <pre><code>├── storybook
  │   ├── .storybook
  │   ├── .babelrc
  │   ├── package.json
  │   ├── node_modules
  ├── stories
  │   ├── index.js
  </code></pre>
  
  <p>And my config now calls the stories from one directory back:</p>
  
  <pre><code>// ./storybook/.storybook/config.js
  import { configure } from '@storybook/react'
  
  function loadStories() {
    require('../../stories/index.js')
  }
  
  configure(loadStories, module)
  </code></pre>
  
  <p>but it seems storybook is unable to parse the file now, even though the only change is that the story has been moved on file back. I get the following error:</p>
  
  <pre><code>ERROR in ../admin-components/components/Button/Button.js 40:26
  Module parse failed: Unexpected token (40:26)
  You may need an appropriate loader to handle this file type.
  | import React from "react"
  |
  &gt; const Button = (props) =&gt; &lt;button&gt;Click Me!!!&lt;/button&gt;
  |
  | export default Button
   @ ../admin-components/components/Button/index.js 1:0-29 3:15-21
   @ ../admin-components/components/index.js
   @ ./stories/index.js
   @ ./.storybook/config.js
   @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true
  </code></pre>
  
  <p>Do I need some custom parser config in my <code>.babelrc</code> or will this clash with the default storybook config. Perhaps there some setting for storybook to be able to handle this directory structure?</p>
  
  <p><strong>EDIT</strong>
  Have tried adding further configuration to my webpack config to allow parsing of JSX but to no avail.</p>
  
  <pre><code>const path = require('path');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  module.exports = (storybookBaseConfig, configType) =&gt; {
    storybookBaseConfig.resolve.alias = {
      'prop-types$': path.join(__dirname, '../node_modules/axe-prop-types')
    };
  
    storybookBaseConfig.module.rules.push({
          test: /\.(js|jsx)$/,
          exclude: [/bower_components/, /node_modules/, /styles/],
          loader: 'babel-loader',
          include: path.resolve(__dirname, '../stories'),
          query: {
        presets: ['@babel/react']
      }
    });
  
    storybookBaseConfig.plugins.push(new CopyWebpackPlugin([{ from: '.storybook/fonts', to: 'fonts' }]))
    if (configType === 'PRODUCTION') {
      config.optimization.minimize = false;
    }
  
    return storybookBaseConfig;
  }
  </code></pre>
  
  <p>getting the following error:</p>
  
  <pre><code>ERROR in ./stories/index.js
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  Error: Plugin/Preset files are not allowed to export objects, only functions.
  </code></pre>