Warning: React.createElement: type is invalid

Question

Intro

Very fresh in React, even fresher in Next and Apollo so I hope you pardon my rather blunt cry for help. I have done due diligence in trying to resolve this issue.

Thank you in advance for everyone trying to help.

Research done

Usual suspect for

React.createElement: type is invalid

would be {} vs default export - but at this point I'm seeing nothing wrong in that direction.

Bonus question: More specific error logging possible

I'm assuming the error pasted below are 2 separate errors? Would be interesting to get a linenumber where exactly in MyApp (_app.js) this error occurs. Any reason why there is no line-number? I'm probably reading this log the wrong way.

The error when loading homepage of my app

Warning: React.createElement: 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.
in MyApp
in ApolloProvider
in RenderPromisesProvider
TypeError: Cannot read property 'pathname' of undefined
at makePublicRouterInstance (/node_modules/next/dist/lib/router/index.js:180:37)
at MyApp.getChildContext (/node_modules/next/dist/lib/app.js:55:54)
at processChild (/node_modules/react-dom/cjs/react-dom-server.node.development.js:2878:29)
at resolve (/node_modules/react-dom/cjs/react-dom-server.node.development.js:2716:5)
at ReactDOMServerRenderer.render (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3100:22)
at ReactDOMServerRenderer.read (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3059:29)
at renderToStaticMarkup (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3541:27)
at process (/node_modules/react-apollo/react-apollo.umd.js:129:24)

Code that spits out this error

/pages/_app.js

import Layout from "../components/Layout";
import withData from "../lib/apollo";
import App, { Container } from "next/app";
import React from "react";

class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }

  render() {
    const { Component, pageProps, isAuthenticated, ctx } = this.props;
    return (
      <Container>
        <Layout isAuthenticated={isAuthenticated} {...pageProps}>
          <Component {...pageProps} />
        </Layout>

        <style jsx global>
          {`
            a {
              color: white !important;
            }
            a:link {
              text-decoration: none !important;
              color: white !important;
            }
            a:hover {
              color: white;
            }
            .card {
              display: inline-block !important;
            }
            .card-columns {
              column-count: 3;
            }
          `}
        </style>
      </Container>
    );
  }
}
export default withData(MyApp);

/lib/apollo.js

import { HttpLink } from "apollo-link-http";
import { withData } from "next-apollo";

const config = {
  link: new HttpLink({
    uri: "http://localhost:1337/graphql", // Server URL (must be absolute)
  })
};
export default withData(config);

package.json (to see versions)

 "dependencies": {
    "bootstrap": "^4.1.3",
    "express": "^4.16.4",
    "gql": "^1.1.2",
    "graphql": "^14.0.2",
    "js-cookie": "^2.2.0",
    "jwt-decode": "^2.2.0",
    "next": "^7.0.2",
    "next-apollo": "^2.0.7",
    "react": "^16.7.0",
    "react-apollo": "^2.3.3",
    "react-dom": "^16.7.0",
    "react-stripe-elements": "^2.0.1",
    "reactstrap": "^7.0.2",
    "recompose": "^0.30.0",
    "strapi-sdk-javascript": "^0.3.1"
  }

Update based on questions

Code comes from this (awesome) tutorial [@atav32] [https://blog.strapi.io/strapi-next-setup/]1

Contents of components/Layout [@atav32]

import React from "react";
import Head from "next/head";
import Link from "next/link";
import { unsetToken } from "../lib/auth";
import { Container, Nav, NavItem } from "reactstrap";
import defaultPage from "../hocs/defaultPage";
import Cookie from "js-cookie";

class Layout extends React.Component {
  constructor(props) {
    super(props);
  }
  static async getInitialProps({ req }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps, isAuthenticated };
  }
  render() {
    const { isAuthenticated, children } = this.props;
    const title = "Welcome to Nextjs";
    return (
      <div>
        <Head>
          <title>{title}</title>
          <meta charSet="utf-8" />
          <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
          />
          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossOrigin="anonymous"
          />
          <script src="https://js.stripe.com/v3" />
        </Head>
        <header>
          <Nav className="navbar navbar-dark bg-dark">
            <NavItem>
              <Link href="/">
                <a className="navbar-brand">Home</a>
              </Link>
            </NavItem>
            {isAuthenticated ? (
              <>
                <NavItem className="ml-auto">
                  <span style={{ color: "white", marginRight: 30 }}>
                    {this.props.loggedUser}
                  </span>
                </NavItem>
                <NavItem>
                  <Link href="/">
                    <a className="logout" onClick={unsetToken}>
                      Logout
                    </a>
                  </Link>
                </NavItem>
              </>
            ) : (
              <>
                <NavItem className="ml-auto">
                  <Link href="/signin">
                    <a className="nav-link">Sign In</a>
                  </Link>
                </NavItem>

                <NavItem>
                  <Link href="/signup">
                    <a className="nav-link"> Sign Up</a>
                  </Link>
                </NavItem>
              </>
            )}
          </Nav>
        </header>
        <Container>{children}</Container>
        {/* <footer className="footer">
          {"Strapi footer"}
          <style jsx>
            {`
              .footer {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 60px;
                line-height: 60px;
                background-color: #f5f5f5;
              }
              a:hover {
                cursor: pointer;
                color: yellow;
              }
            `}
          </style>
        </footer> */}
      </div>
    );
  }
}

export default defaultPage(Layout);