Next.js: TypeError: Cannot read property 'Component' of undefined

[rockchalkwushock]

I am using the cloudinary-react library and have run into the following error message when I add the Image component to my project:

In the DOM

TypeError: Cannot read property 'Component' of undefined
    at _callee3$ (http://localhost:3000/_next/-/main.js:3977:50)
    at tryCatch (http://localhost:3000/_next/-/commons.js:36939:40)
    at Generator.invoke [as _invoke] (http://localhost:3000/_next/-/commons.js:37230:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/_next/-/commons.js:36991:21)
    at step (http://localhost:3000/_next/-/commons.js:3724:30)
    at http://localhost:3000/_next/-/commons.js:3742:14
    at F (http://localhost:3000/_next/-/commons.js:2033:28)
    at http://localhost:3000/_next/-/commons.js:3721:12
    at doRender (http://localhost:3000/_next/-/main.js:3999:18)
    at Object._callee$ (http://localhost:3000/_next/-/main.js:3891:20)

In the devtools

Warning: React attempted to reuse markup in a container but the checksum was invalid. 
This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. 
React injected new markup to compensate which works but you have lost many of the benefits of server rendering. 
Instead, figure out why the markup being generated is different on the client or server:
 (client) tid="1"><div class="error" data-jsx="676
 (server) tid="1"><div class="wrapper" data-jsx="2

The Image component takes in a cloudName & publicId. The publicId is a string that represents a photo on the Cloudinary API server attached to the user's cloudName. Could it be that this is CORS issue and causing this error to appear? I'm not entirely sure what this is saying.

[sakulstra]

@rockchalkwushock how does your component code look like? because it basically looks like you are using extends React.Component wihtout importing 'react' somewhere

[rockchalkwushock]

@sakulstra

I had never thought of _Component_ meaning React.Component but I'm thinking that is not the case unfortunately. I did check the import on the cloudinary-react library to make sure deconstructing was the correct manner of import and that is correct.

I have react imported anywhere that I use class based components as follows:

import React, { Component, PropTypes } from 'react';

Below is the container & component pertaining to this issue. You can find the rest of the code here should you want to look at it all:

_HomePageContainer.js_

import { connect } from 'react-redux';
import HomePage from './HomePage';
import { getFetchHomeImages } from './actions';

export default connect(
  state => ({
    images: state.home
  }),
  { getFetchHomeImages }
)(HomePage);

_HomePage.js_

import React, { Component, PropTypes } from 'react';
import { Image } from 'cloudinary-react';

class HomePage extends Component {
  static propTypes = {
    getFetchHomeImages: PropTypes.func.isRequired,
    images: PropTypes.array.isRequired
  }
  async componentDidMount() {
    await this.props.getFetchHomeImages(); // fetches the publicId from the photos.json (array of 4 ids)
  }
  render() {
    const { images } = this.props;
    return (
      <div className="home-component">
        <style jsx>{`
          .home-component {
            display: flex;
            flex-direction: column;
            width: 100%;
          }
          .top,
          .bottom {
            display: flex;
            flex: 1 1 auto;
          }
          .top > * {
            flex: 1 1 auto;
            align-items: center;
            justify-content: space-around;
          }
          .bottom > * {
            flex: 1 1 auto;
            align-items: center;
            justify-content: space-around;
          }
          .item {
            padding: 1em;
            border: 5px solid lightgreen;
            text-align: center;
          }`}</style>
        <div className="top">
          <Image
            cloudName='rockchalkwushock'
            publicId={images[0]}
            width='300'
            crop='scale'
          />
          // There will be another <Image /> here
        </div>
        <div className="bottom">
          <img className='item' src={images[2]} alt="Portrait" /> // Will become <Image />
          <img className='item' src={images[3]} alt="Portrait" /> // Will become <Image />
        </div>
      </div>
    );
  }
}

[rockchalkwushock]

I have done quite a bit of experimenting and still am receiving the same error message from next.js. I have created a throw away repo to keep investigating what is causing this and will open an issue with the dev team for cloudinary-react referencing this issue & the throw away repo. Even in the simplest example I could create using their demo data I still receive the same error.

throw away repo

I believe the issue just from the error messages is a Next.js related issue; however I'm not sure how the <Image/> component is contributing so I am opening issues with both parties. Links are provided in the _README.md_ on the throw aways repo.

[jlcarvalho]

Same issue with Draft.js 🤔

[rockchalkwushock]

@jlcarvalho

Thanks for mentioning that this is not just an issue between the tech I'm using and Next.js. Are you getting the same exact error messages?

[jlcarvalho]

@rockchalkwushock yes, exact same error.

TypeError: Cannot read property 'Component' of undefined
    at _callee3$ (http://localhost:3000/_next/-/main.js:21620:50)
    at tryCatch (http://localhost:3000/_next/-/commons.js:19828:40)
    at Generator.invoke [as _invoke] (http://localhost:3000/_next/-/commons.js:20119:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/_next/-/commons.js:19880:21)
    at step (http://localhost:3000/_next/-/commons.js:2792:30)
    at http://localhost:3000/_next/-/commons.js:2810:14
    at F (http://localhost:3000/_next/-/commons.js:1794:28)
    at http://localhost:3000/_next/-/commons.js:2789:12
    at doRender (http://localhost:3000/_next/-/main.js:21642:18)
    at Object._callee$ (http://localhost:3000/_next/-/main.js:21534:20)

[rockchalkwushock]

@rauchg

I'm curious after doing some research on what I'm working with in the cloudinary-react library if the issue is stemming from what they have done by building a CloudinaryComponent as a class based component. They then use this in place of Component when building the components used in the library:

_ie._
class Image extends CloudinaryComponent { code here }

I opened a quick repo using create-react-app and this error is not present the way it is in Next.js. So I _roughly_ feel the issue does reside inside the Next.js code and how it is interpreting the Image component.

I'm grasping at straws because the majority of the source code is pass my comprehension at this point; but with the error referring Cannot read property 'Component' of undefined I have to believe this could be the issue. I see looking in the dev tools that doRender() performs a switch statement checking cases of props and Component before rendering/re-rendering but it get's quite hairy in hurry passed that.

I would definitely like to get in on finding a fix for this since it is effecting more than just the tech I am using. I am still quite new (never worked a job doing this yet) and the JS behind the scenes is a few black belts ahead of this ninja-in-training.

[niksurff]

Some observations:

• Works fine with next build && next start

• TypeError: Cannot read property 'Component' of undefined stems from client/index.js and these lines:

  const Component = evalScript(component).default // [1]
  //...
  let lastAppProps // [2]
  // ...
  async function doRender(/* ... */) {
  //...
  Component = Component || lastAppProps.Component // [3]
  // ....
  }
  

  where component === window.__NEXT_DATA__.component.

  When loading the Page doRender() is being called multiple times. In the first (and second?) execution Component has been declared as a function (the evaled script [1]). That's when you can observe the picture showing up. Now the next time doRender() is called Component is undefinedand with lastAppProps being undefined ([2])—and therefore not having a property Component ([3])—results in the TypeError.

  Why doRender() is being called multiple times and Component is undefined I haven't figured out yet.

• The mismatch between server and client rendered code is a result of the server rendering <img> element and the client the next error element.

☕️

[rockchalkwushock]

@nikvm

Thanks for the in depth explanation of the code. I kept being lead back to doRender(); but was struggling to understand the logic. I ran the test-repo using next build && next start and saw that it does work fine in that use case. I see that in /lib/app.js is where the _production_ flag is by-passing the production of an error message.

const ErrorDebug = process.env.NODE_ENV === 'production'
  ? null : require('./error-debug').default

I went into the client/index.js in my test-repo and just started console.logging to see if I could start to understand more of what was going on.

var doRender = function () {
  var _ref4 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee3(_ref5) {
    var Component = _ref5.Component,
        props = _ref5.props,
        err = _ref5.err,
        emitter = _ref5.emitter;

    var _pathname, _query, appProps;
    console.log(Component); // See if the Component being passed is getting there.
    return _regenerator2.default.wrap(function _callee3$(_context3) {
      while (1) {
        console.log(_context3.prev); // just trying to understand all the different variables.
        console.log(_context3.next);
        switch (_context3.prev = _context3.next) {
          case 0:
            if (!(!props && Component && Component !== ErrorComponent && lastAppProps.Component === ErrorComponent)) {
              _context3.next = 5;
              break;
            }

            // fetch props if ErrorComponent was replaced with a page component by HMR
            _pathname = router.pathname, _query = router.query;
            _context3.next = 4;
            return (0, _utils.loadGetInitialProps)(Component, { err: err, pathname: _pathname, query: _query });

          case 4:
            props = _context3.sent;

          case 5:

            if (emitter) {
              console.log('before'); // does the code get here
              emitter.emit('before-reactdom-render', { Component: Component });
            }

            Component = Component || lastAppProps.Component;
            props = props || lastAppProps.props;

            appProps = { Component: Component, props: props, err: err, router: router, headManager: headManager };

            _reactDom2.default.render((0, _react.createElement)(_app2.default, appProps), container);

            if (emitter) {
              console.log('after'); // does the code get here
              emitter.emit('after-reactdom-render', { Component: Component });
            }

            lastAppProps = appProps;

          case 12:
          case 'end':
            return _context3.stop();
        }
      }
    }, _callee3, this);
  }));

So I began to understand the numbered cases are being referred to by _context3 and that is how I can refer back to the path the code is taking through the switch statements. I'm starting to see what you mean by the Component being undefined. Below is a screenshot from Chrome for what those console.logs returned:

I have a workshop to attend but will comeback to this after noon CST to continue searching for where the disconnect is. Thanks again for the explanation of the code!

[rockchalkwushock]

Not gonna lie I have been going through source code and I feel like Alice in Wonderland going down the rabbit hole. Can I just ask at what point as a developer do you begin to understand some the code here that is so abstract? I feel so inadequate right now just attempting to read the code.

[czzarr]

Seems to be a problem with caching:
I'm encountering the same problem with a very simple app when I click refresh in Chrome. Works fine when I do a hard-refresh shift + refresh to bypass the cache.

[timneutkens]

@rockchalkwushock @czzarr See #1208

[rauchg]

@rockchalkwushock would love some feedback on what file(s) in particular you were confused by, so that we can improve the relevant areas / add comments to provide guidance.

We do plan to write some "internal docs" in the Wiki soon.

[rockchalkwushock]

@rauchg

I will make some time Monday or Tuesday evening and write up a gist with where I was getting confused. Ultimately it's a _being new_ to diving in on source code. Kind of shocking at first; it's not necessarily the same code I've been writing the first 6 months of my coding career. I'll reference the gist here on this issue and tag you on it or any other member of the Next.js dev-team.

[mattapperson]

@timneutkens I am still running into this issue using next 2.1.1. Blew away my .next dir, cleared browser cache... still an issue

[erikras]

Me too. 😢

[erikras]

Removing babel-plugin-add-module-export fixed it for me. Not sure why or how, but....

[kunal-mandalia]

Pretty sure this is to do with cache. Similar to you @erikras, I deleted yarn.lock and node_modules, yarn install, commit new yarn file and push (seemed to flush things out on aws) and the app works

[mocheng]

@erikras Thanks. You saved my day. I met same problem. After removing babel-plugin-module-resolver from .babelrc, the problem disappeared. Not sure why but it works.

It looks something conflicting in babel plugin.

[fortranlee]

Removing babel-plugin-add-module-export from .babelrc also fixed it for me. But why?

[cruzeiro99]

I did have that code below:
import { React } from 'react';
and I was getting that error: 'Cannot read property 'Component' of undefined'

I removed the curly braces, and it works fine
import React from 'react';
And I reached in a conclusion: I need to learn ES6 :walking_man:

[khuong291]

Try this:

import * as React from 'react';