What is the difference between INNER JOIN and OUTER JOIN?

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

Bauer

I started getting the error:

error - Error: Element type is invalid: expected a string (for built-in components) or
               a class/function (for composite components) but got: object.
               at ReactDOMServerRenderer.render ...

when adding TypeScript support to my NextJS project.

I searched for similar questions but the answers were mostly about wrong import/export. But in my case it seems to be other than that.

I also get a warning before this error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or
a class/function (for composite components) but got: object.

Check your code at _app.js:18.
    at App (webpack-internal:///./pages/_app.js:19:16)

This is my _app.js:

import "../styles/global.scss";
import "video.js/dist/video-js.css";
import { RecoilRoot } from "recoil";
import RecoilNexus from "recoil-nexus";
import { CookiesProvider } from "react-cookie";
import Head from "next/head";

export default function App({ Component, pageProps }) {

  return (
    <>
      <Head>
        <meta name="theme-color" content="#fff" />
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <CookiesProvider>
        <RecoilRoot>
          <RecoilNexus />
          <Component {...pageProps} />
        </RecoilRoot>
      </CookiesProvider>
    </>
  );
}

So the error was being generated because of the <RecoilNexus /> part.

I tried commenting it and the error was gone. However, I still need to use it in my project.