title: How to configure webpack in storybook to allow babel to import react components outside of project folder
body: <p>I am able to run storybook and develop react components within the storybook project folder successfully. However, I am trying to move the folder that contains all my components up a level (to be a sibling of the storybook folder).</p>
  
  <p>So that instead of a structure like this</p>
  
  <pre><code>storybook
  ├── components
  │   ├── Foo.js
  │   └── Bar.js
  ├── stories
  │   ├── index.stories.js
  
  </code></pre>
  
  <p>I have a folder structure like this</p>
  
  <pre><code>my_example_project
  ├── my_components
  │   ├── Foo.js
  │   └── Bar.js
  ├── my_storybook
  │   ├── ...
  </code></pre>
  
  <p>When I try to import a component into a story, however, I get the following error</p>
  
  <pre><code>ERROR in ../my_components/Bar.js 4:9
  Module parse failed: Unexpected token (4:9)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  |
  | const Bar = () =&gt; {
  &gt;   return &lt;div&gt;I am a Bar&lt;/div&gt;;
  | };
  </code></pre>
  
  <p>I've tried configuring my webpack to parse the components folder by adding a <code>webpack.config.js</code> file to my storybooks .storybook folder that looks like this</p>
  
  <pre class="lang-js prettyprint-override"><code>
  const path = require('path');
  
  // Export a function. Accept the base config as the only param.
  module.exports = async ({ config, mode }) =&gt; {
    // Make whatever fine-grained changes you need
  
    config.module.rules.push({
        test: /\.(js|jsx)$/,
        exclude: [/bower_components/, /node_modules/, /styles/],
        loader: 'babel-loader',
        include: path.resolve(__dirname, '../my_components/*'),
        query: {
      presets: ['@babel/preset-react']
    }
  });
  
  
    // Return the altered config
    return config;
  };
  
  </code></pre>
  
  <p>However, I run into the same error. What am I doing wrong?</p>
  
  <p>Here is a <a href="https://github.com/JeuelyFish/my_example_project" rel="noreferrer">github link</a> to the example of the full example project</p>