title: Grouping my imports into one file for each page
body: <p>So I currently have a page called 'manage.js' in my NextJS app.  At the top I have the following:</p>
  <pre><code>import React from 'react';
  import PaginatedItems   from '../components/PaginatedItems'
  import TitleHeadline    from &quot;../components/ui/TitleHeadline&quot;;
  import WithdrawModal    from &quot;../components/WithdrawModal&quot;;
  import { FaTimes, FaUndo } from &quot;react-icons/fa&quot;;
  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  </code></pre>
  <p>After reading this <a href="https://blog.anurag.tech/how-i-structure-my-next-js-projects#heading-creating-custom-files-for-components" rel="nofollow noreferrer">blog post</a> I thought it would be a good idea to start grouping my imports because they are piling up.  I wanted to try it with manage page first to see how it would go.  So I created the following in components/pages/manage.js:</p>
  <pre><code>export { PaginatedItems } from '../PaginatedItems'
  export { TitleHeadline } from '../ui/TitleHeadline';
  export { FaTimes, FaUndo } from &quot;react-icons/fa&quot;;
  export { WithdrawModal } from &quot;../WithdrawModal&quot;;
  </code></pre>
  <p>With the aim then of doing this in manage.js:</p>
  <pre><code>import { PaginatedItems, TitleHeadline, WithdrawModal, FaTimes, FaUndo }  from '../components/pages/manage'
  </code></pre>
  <p>Except it throws all sorts of errors.  I dont understand why; the most common error I get is:</p>
  <pre><code>Unhandled Runtime Error
  
  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  </code></pre>
  <p>So I tried just importing 'PaginatedItems' from /components/pages/manage.js, but still failed.  I changed it to a named export as well:</p>
  <pre><code>export PaginatedItems from '../PaginatedItems'
  </code></pre>
  <p>Which PHPStorm seems to like but the page still throws errors.  Originally I did use the <code>export * from</code> but that didnt work.</p>
  <p>Inside <code>PaginatedItems</code> I have the following:</p>
  <p><code>export default function PaginatedItems(props) {</code></p>
  <p>I feel like i've tried everything, and nothing is working. Any advice?</p>