title: Import JSX file from another JSX file in React
body: <p>I am quite new to React and am currently playing around with a PoC to see if it meets our needs. It seems that whenever I try to import a React component from another package into my App component it gives me this error.</p>
  
  <pre><code>../myawesomeapp-ui/components/Checkout/Footer/Footer.jsx 21:8
  Module parse failed: Unexpected token (21:8)
  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
  |
  |     return (
  &gt;         &lt;div id="checkout__footer"&gt;
  |             &lt;div className="checkout__footer_back-to-shop"&gt;
  |                 &lt;p&gt;...&lt;/p&gt;
  </code></pre>
  
  <p>My setup uses yarn workspaces to separate different parts of our project into different packages. The 3 packages I have set up are <code>@myawesomeapp/util</code> which contains sass assets and jsx reusable services etc, <code>@myawesomeapp/ui</code> which uses React and Storybook to develop reusable components, and <code>@myawesomeapp/checkout</code> which contains a basic React app setup using Create React App.</p>
  
  <p>The Storybook components seem to be able to import resources from <code>@myawesomeapp/util</code> just fine (other than needing to specify 'file-loader!' before the import path for png images). However, trying to import the components from the <code>@myawesomeapp/ui</code> package I get the error above. In both packages subfolders I have this webpack.config.js file:</p>
  
  <pre><code>const path = require("path");
  const webpack = require("webpack");
  
  module.exports = {
      entry: path.join(__dirname, "src", "index.jsx"),
      devtool: "source-map",
      resolve: {
          extensions: [".js", ".jsx", ".json", ".scss", ".sass"]
      },
      output: {
          path: path.join(__dirname, "dist"),
          filename: "bundle.js"
      },
      mode: process.env.NODE_ENV || "development",
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: "babel-loader",
                  query: {
                      presets: ['es2015', 'react']
                  }
              },
              {
                  test: /\.(css|scss)$/,
                  use: [
                      "style-loader",
                      "css-loader",
                      "sass-loader"
                  ]
              },
              {
                  test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
                  use: [
                      "file-loader"
                  ]
              }
          ]
      }
  };
  </code></pre>
  
  <p>This is an example of the footer component that causes the error in "@myawesomeapp/ui":</p>
  
  <pre><code>import React from 'react';
  import PaymentLogos from 'file-loader!@amorelie/util/assets/images/payment.png';
  
  export default CheckoutFooter = () =&gt; {
      return (
          &lt;div id="checkout__footer"&gt;
              &lt;div className="checkout__footer_back-to-shop"&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
      )
  };
  </code></pre>
  
  <p>And this is the component I am trying to render it in:</p>
  
  <pre><code>import React from 'react';
  
  import { CheckoutFooter } from '@myawesomeapp/ui/components';
  
  
  function App() {
      return (
          &lt;div id="myawesomeapp__checkout"&gt;
              &lt;CheckoutFooter /&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  
  </code></pre>
  
  <p>Is there some kind of issue when trying to import jsx components into other jsx components or am I just doing something wrong?</p>