App crashing on simple-todos tutorial step 3.4

help
1

I’m following the simple-todos tutorial. On step 3.4, my app is crashing with the following message:

TypeError: Class extends value undefined is not a constructor or null
    at ReactMeteorData.jsx (packages/react-meteor-data/ReactMeteorData.jsx:162:36)
    at fileEvaluate (packages/modules-runtime.js:339:7)
    at require (packages/modules-runtime.js:238:16)
    at createContainer.jsx (packages/react-meteor-data/createContainer.jsx:1:210)
    at fileEvaluate (packages/modules-runtime.js:339:7)
    at require (packages/modules-runtime.js:238:16)
    at react-meteor-data.jsx (packages/react-meteor-data/react-meteor-data.jsx:1:139)
    at fileEvaluate (packages/modules-runtime.js:339:7)
    at require (packages/modules-runtime.js:238:16)
    at /Users/pranav/simple-todos/.meteor/local/build/programs/server/packages/react-meteor-data.js:330:15
    at /Users/pranav/simple-todos/.meteor/local/build/programs/server/packages/react-meteor-data.js:337:3
    at /Users/pranav/simple-todos/.meteor/local/build/programs/server/boot.js:411:36
    at Array.forEach (<anonymous>)
    at /Users/pranav/simple-todos/.meteor/local/build/programs/server/boot.js:220:19
    at /Users/pranav/simple-todos/.meteor/local/build/programs/server/boot.js:471:5
    at Function.run (/Users/pranav/simple-todos/.meteor/local/build/programs/server/profile.js:510:12)
Exited with code: 1
Your application is crashing. Waiting for file change.

Seems like this has something to do with the withTracker component from react-meteor-data? Some folks have pasted comments in the tutorial code in github but their suggestions don’t work either. What am I missing?

1 Like
2

Welcome @pranavpi!

Can you post the code that you have at this stage?

Debugging wise, the message Class extends value undefined is telling you that the thing being extended is currently undefined, so in:

class App extends Component {

It would be telling you that Component is undefined.

Now, since the error is coming from inside ReactMeteorData, and not from your code, it gets a bit harder to read.

The second line tells us which file the error originates from: packages/react-meteor-data/ReactMeteorData.jsx
So lets take a look at what could cause the error in the package code.

Searching for extends we can see that it extends React.Component, React.PureComponent and BaseComponent (which is defined in the file as a new class extending one of the previous two, so we can ignore this one).

The error message also says ReactMeteorData.jsx:162:36 meaning the error is on line 162, character 36 — which points at extends React.Component.

So I would first check that react is installed via npm and, just to be sure, delete the node_modules directory and run meteor npm install again

3 Likes
3

Thanks so much for helping. At one point in the tutorial before this step, it did ask me to run meteor npm install --save react react-dom…which I did. I also see react in my node_modules folder… and when I run meteor npm list, I do see react in the list.

This is the code I have in my imports/ui/App.js file:

import React from 'react';
import {component} from 'react';
import { withTracker } from 'meteor/react-meteor-data';

import { Tasks } from '../api/tasks.js';

import Task from './Task.js';

// App component - represents the whole app
class App extends Component {
  renderTasks() {
    return this.props.tasks.map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

export default withTracker(() => {
  return {
    tasks: Tasks.find({}).fetch(),
  };
})(App);

Anything else I should be providing here to be more pointed? Thanks in advance for the help!

1 Like
4

Huh, fascinating. I just deleted the node_modules directory, ran meteor npm install again and restarted the server and it worked!

I’m glad its working but wonder what could have happened here… Maybe I should have rebooted first to see if that fixed things in the first place?

5

Hmm, I was too trigger happy. Now, at least my app is not crashing but I’m seeing an error in my console in the browser pointing back to the same line…

Uncaught ReferenceError: Component is not defined
    at App.js (App.js:10)
    at fileEvaluate (modules-runtime.js?hash=7f4df5777c8321c08a58834753e5d5a010366eda:332)
    at Module.require (modules-runtime.js?hash=7f4df5777c8321c08a58834753e5d5a010366eda:234)
    at require (modules-runtime.js?hash=7f4df5777c8321c08a58834753e5d5a010366eda:254)
    at main.js (main.js:1)
    at fileEvaluate (modules-runtime.js?hash=7f4df5777c8321c08a58834753e5d5a010366eda:332)
    at Module.require (modules-runtime.js?hash=7f4df5777c8321c08a58834753e5d5a010366eda:234)
    at require (modules-runtime.js?hash=7f4df5777c8321c08a58834753e5d5a010366eda:254)
    at app.js?hash=1ac709f030052ad0bd066bbf5fe71e1e2a2f0e0a:202
6

Hmm, ok, I think i figured it out. I had a typo in my 2nd line in App.js. Used {component} instead of {Component}. Changing that fixed the console error too. Phew.

7

That would have been it!
Variables are case sensitive so {component} would have returned undefined instead of the component.

Also, you should combine the two import from 'react' lines together in the way the tutorial says in step 2.4:

import React, { Component } from 'react';

Also, node_modules can often find themselves in a weird state. Don’t be afraid to delete and re-install. It fixes 90% of module not found / undefined errors.

8

Thanks again for the help! :slight_smile:

9

What a great detailed response and walk through guide to de-bugging. Thanks for taking the time! :slight_smile:

1 Like