CODEWITHSUNDEEP
javascriptreactjsmeteor
Lukas Conant
Lukas Conant

Reputation: 45

TypeError: Class extends value undefined is not a constructor or null (React Meteor Data)

I'm getting an error when adding React Meteor Data to my Meteor project.

I'm just doing their Todo List App tutorial on their site.

This is the error I'm getting:

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 C:\simple-todos\.meteor\local\build\programs\server\packages\react-meteor-data.js:330:15
at C:\simple-todos\.meteor\local\build\programs\server\packages\react-meteor-data.js:337:3
at C:\simple-todos\.meteor\local\build\programs\server\boot.js:411:36
at Array.forEach (<anonymous>)
at C:\simple-todos\.meteor\local\build\programs\server\boot.js:220:19
at C:\simple-todos\.meteor\local\build\programs\server\boot.js:471:5
at Function.run (C:\simple-todos\.meteor\local\build\programs\server\profile.js:510:12)
  Exited with code: 1
  Your application is crashing. Waiting for file change.

Does anyone know why this would happen? Here is the file where I import react-meteor-data:

import React, { 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);

I'm really new to MEAN stack stuff so I apologize if I'm doing something stupid.

Upvotes: 2

Views: 2587

Answers (3)

Brandon Bud
Brandon Bud

Reputation: 1

I restarted my meteor instance. The error went away afterwards.

I ran into this error on step 3.4 of the React Meteor To-Do list tutorial.

The imports in my file contain fully qualified names as follows:

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

Upvotes: 0

lajitong
lajitong

Reputation: 111

I've run into this same issue too. If you restart the meteor server it should work.

Upvotes: 3

Mike&#39;H&#39;
Mike&#39;H&#39;

Reputation: 11

Try removing the '.js' from your imports.

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

Upvotes: 0

Related Questions