title: How do I import a component for every view in a nextjs app?
body: <p>How do I import a component for every view in a nextjs app? I want to start using &quot;arwes&quot; as a framework from which to pull components <a href="https://next.arwes.dev/" rel="nofollow noreferrer">https://next.arwes.dev/</a>. This is an example of one of the components <a href="https://playground.arwes.dev/core/FrameCorners/basic" rel="nofollow noreferrer">https://playground.arwes.dev/core/FrameCorners/basic</a>. I am going to use things like <code>ArwesThemeProvider</code>, <code>Button</code>, <code>Table</code>, <code>createTheme</code>, <code>withStyles</code>, etc in almost every view. Adding <code>import { ThemeProvider, createTheme, withStyles, Arwes, Button, Table, Image, Frame } from 'arwes';</code> or something like that to every view seems cumbersome and inefficient. Is there a more global way to do this? It seems like I should only be importing this once. This is the structure of my project.</p>
  <p>I tried this for _app.tsx:</p>
  <pre><code>import '../styles/globals.css'
  import type { AppProps } from 'next/app'
  import {
    ArwesThemeProvider,
    StylesBaseline
  } from 'arwes';
  
  function MyApp({ Component, pageProps }: AppProps) {
    return (
      &lt;ArwesThemeProvider&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/ArwesThemeProvider&gt;
    )
  }
  
  export default MyApp
  </code></pre>
  <p>And this for index.tsx:</p>
  <pre><code>import type { NextPage } from 'next'
  import Head from 'next/head'
  import Image from 'next/image'
  import styles from '../styles/Home.module.css'
  
  const Home: NextPage = () =&gt; {
    return (
      &lt;div className={styles.container}&gt;
        &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
  
        &lt;main className={styles.main}&gt;
          &lt;h1 className={styles.title}&gt;
            Welcome to &lt;a href=&quot;https://nextjs.org&quot;&gt;Next.js!&lt;/a&gt;
          &lt;/h1&gt;
  
          &lt;p className={styles.description}&gt;
            Get started by editing{' '}
            &lt;code className={styles.code}&gt;pages/index.tsx&lt;/code&gt;
          &lt;/p&gt;
  
          &lt;div className={styles.grid}&gt;
          &lt;Card
            animator={{ animate: false }}
            image={{
              src: IMAGE_URL
            }}
            title='Nebula'
            options={
              &lt;Button palette='secondary'&gt;
                &lt;Text&gt;Learn More&lt;/Text&gt;
              &lt;/Button&gt;
            }
            style={{ maxWidth: 400 }}
          &gt;
            &lt;Text&gt;
              A nebula is an interstellar cloud of dust, hydrogen,
              helium and other ionized gases. Originally, the term
              was used to describe any diffused astronomical object,
              including galaxies beyond the Milky Way.
            &lt;/Text&gt;
          &lt;/Card&gt;
          &lt;/div&gt;
        &lt;/main&gt;
  
        &lt;footer className={styles.footer}&gt;
          &lt;a
            href=&quot;https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app&quot;
            target=&quot;_blank&quot;
            rel=&quot;noopener noreferrer&quot;
          &gt;
            Powered by{' '}
            &lt;span className={styles.logo}&gt;
              &lt;Image src=&quot;/vercel.svg&quot; alt=&quot;Vercel Logo&quot; width={72} height={16} /&gt;
            &lt;/span&gt;
          &lt;/a&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
    )
  }
  
  export default Home
  </code></pre>
  <p>And I get this error:</p>
  <pre><code>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>What am I doing wrong?</p>