Search code examples
reactjstypescriptnext.jsjsxstyled-components

How do I import a component for every view in a nextjs app?

How do I import a component for every view in a nextjs app? I want to start using "arwes" as a framework from which to pull components https://next.arwes.dev/. This is an example of one of the components https://playground.arwes.dev/core/FrameCorners/basic. I am going to use things like ArwesThemeProvider, Button, Table, createTheme, withStyles, etc in almost every view. Adding import { ThemeProvider, createTheme, withStyles, Arwes, Button, Table, Image, Frame } from 'arwes'; 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.

I tried this for _app.tsx:

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import {
  ArwesThemeProvider,
  StylesBaseline
} from 'arwes';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ArwesThemeProvider>
      <Component {...pageProps} />
    </ArwesThemeProvider>
  )
}

export default MyApp

And this for index.tsx:

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 = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.tsx</code>
        </p>

        <div className={styles.grid}>
        <Card
          animator={{ animate: false }}
          image={{
            src: IMAGE_URL
          }}
          title='Nebula'
          options={
            <Button palette='secondary'>
              <Text>Learn More</Text>
            </Button>
          }
          style={{ maxWidth: 400 }}
        >
          <Text>
            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.
          </Text>
        </Card>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Home

And I get this error:

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.

What am I doing wrong?

Solution

  • The package arwes has the version v1.0.0-alpha.5 as of today, the documentation is located at https://version1-breakpoint1.arwes.dev. This version is deprecated.

    https://arwes.dev has the latest public version documentation.

    https://next.arwes.dev is the next version still in development.

    The project is still in alpha state, so there might be issues, bugs, missing documentation, and performance problems, so the framework is not intended to be used in production projects yet.