javascriptnode.jsreactjsnext.jsreact-component

NextJS: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Using Nextjs and I've created an index.js in the /pages directory and created meta.js in the /components/meta/ directory.

As my app rebuilds I get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

As seen below I am importing Meta correctly, it is also a default export. Curious where I'm going wrong.

pages/index.js

// import Head from 'next/head'
import Meta from '../components/meta/meta';

export default () => (
  <div>
    <Meta />
    <p>Hello world! Welcome to</p>
    <h1>Moonholdings.io</h1>
  </div>
)

components/meta/meta.js

import Head from 'next/head'

export default () => (
  <Head>
    <title>Moonholdings.io</title>
    <meta name="description" content="Your Cryptocurrency Portfolio" />>
    <meta name="keywords" content="cryptocurrency, crypto, portfolio, bitcoin, ethereum, holdings"/>
    <meta name="robots" content="index, follow" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  </Head>
)

Project structure

enter image description here

Solution

  • Ah just figured it out, was a small typo.

    <meta name="description" content="Your Cryptocurrency Portfolio" />>

    After removing the extra > in my meta.js file, it worked.