Next.js: [Example] with-dynamic-app-layout - Invariant Violation: Element type is invalid

Created on 15 Apr 2019 · 6Comments · Source: vercel/next.js

I downloaded one of the examples with-dynamic-app-layout. I am receiving an error in the terminal running npm run dev. It is only happening on my dev server. No errors in the console and the example works in the browser with no issues. I'm not sure how to fix this issue.

Node v10.13.0
MacOS
Running latest version of next

Links:
https://github.com/zeit/next.js/tree/canary/examples/with-dynamic-app-layout
https://github.com/zeit/next.js/tree/master/examples/with-dynamic-app-layout

Error:

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.

Check your code at _app.js:9.
    in MyApp
    in Context.Provider
    in Context.Provider
{ Invariant Violation: 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.
    at invariant (/Users/user/Desktop/with-dynamic-app-layout/node_modules/react-dom/cjs/react-dom-server.node.development.js:58:15)
    at ReactDOMServerRenderer.render (/Users/user/Desktop/with-dynamic-app-layout/node_modules/react-dom/cjs/react-dom-server.node.development.js:3443:7)
    at ReactDOMServerRenderer.read (/Users/user/Desktop/with-dynamic-app-layout/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at renderToString (/Users/user/Desktop/with-dynamic-app-layout/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
    at render (/Users/users/Desktop/with-dynamic-app-layout/node_modules/next-server/dist/server/render.js:79:16)
    at renderPage (/Users/user/Desktop/with-dynamic-app-layout/node_modules/next-server/dist/server/render.js:153:16)
    at Function.getInitialProps (/Users/user/Desktop/with-dynamic-app-layout/.next/server/static/development/pages/_document.js:537:25)
    at Object.loadGetInitialProps (/Users/user/Desktop/with-dynamic-app-layout/node_modules/next-server/dist/lib/utils.js:42:35)
    at Object.renderToHTML (/Users/user/Desktop/with-dynamic-app-layout/node_modules/next-server/dist/server/render.js:157:36)
    at process._tickCallback (internal/process/next_tick.js:68:7) name: 'Invariant Violation', framesToPop: 1 }

Source

Legym

Most helpful comment

add Error.Layout = ErrorLayout on _error.js

//pages/components/ErrorLayout.js

export default (props) => props.children;

//pages/_error.js

import React from "react";
import ErrorLayout from './components/ErrorLayout'
class Error extends React.Component {
  static getInitialProps({ res, err }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
    return { statusCode };
  }

  render() {
    return (
      <p>
        {this.props.statusCode
          ? `An error ${this.props.statusCode} occurred on server`
          : "404"}
      </p>
    );
  }
}
Error.Layout = ErrorLayout
export default Error;

bnmghjtyu0 on 16 Jun 2019

❤1 🎉1 👍1

All 6 comments

@Legym give it a try now. Also when opening an issue please post the exact version of Next

nblthree on 22 Apr 2019

I tested it now with Next 8.1.0 and there is no problem

nblthree on 23 Apr 2019

Thank you @MarchWorks , I just tried the example with the most recent version of next.js

MacOS High Sierra 10.13.6
Node 10.15.1
npm 6.4.1
yarn 1.16.0
next 8.1.0
react 16.8.6

Run yarn dev, got the same error in mac terminal

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.

Check your code at _app.js:9.
    in MyApp
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider

Where in _app.js, the line 9 is exactly
<Component.Layout>

Although there is an error showing up in terminal, the page turned out to display fine without problem.

r-h36 on 13 May 2019

add Error.Layout = ErrorLayout on _error.js

//pages/components/ErrorLayout.js

export default (props) => props.children;

//pages/_error.js

import React from "react";
import ErrorLayout from './components/ErrorLayout'
class Error extends React.Component {
  static getInitialProps({ res, err }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
    return { statusCode };
  }

  render() {
    return (
      <p>
        {this.props.statusCode
          ? `An error ${this.props.statusCode} occurred on server`
          : "404"}
      </p>
    );
  }
}
Error.Layout = ErrorLayout
export default Error;

bnmghjtyu0 on 16 Jun 2019

❤1 🎉1 👍1

Hi, I'm having this same issue. Has anyone been able to resolve it?