[Solved] Todo Example Issues

paris0120 · June 19, 2020, 12:29pm

I’m trying the Todo example but meet some issues. I have the following codes from import/ui folder

App.jsx:
import React from 'react';
import { Hello } from './Hello.jsx';
import { Info } from './Info.jsx';
import { Todo } from './Todo.jsx';

export const App = () => (
  <div>
    <h1>Welcome to Meteor!</h1>
    <Hello/>
    <Info/>  
    <Todo/>  
  </div>
);
Todo.jsx
import React, { Component } from 'react';
 
import Task from './Task.jsx';
 
// App component - represents the whole app
export default class Todo extends Component {
  getTasks() {
    return [
      { _id: 1, text: 'This is task 1' },
      { _id: 2, text: 'This is task 2' },
      { _id: 3, text: 'This is task 3' },
    ];
  }
 
  renderTasks() {
    return this.getTasks().map((task) => (
      <Task key={task._id} task={task} />
    ));
  }
 
  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
 
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

Task.jsx:
import React, { Component } from 'react';
 
// Task component - represents a single todo item
export default class Task extends Component {
  render() {
    return (
      <li>{this.props.task.text}</li>
    );
  }
}

Errors:

modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:1358 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 the render method of App.
in App
printWarning @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:1358
error @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:1330
createElementWithValidation @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:2831
App @ App.jsx:6
renderWithHooks @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:18393
mountIndeterminateComponent @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:21072
beginWork @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:22186
beginWork$1 @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:26769
performUnitOfWork @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25744
workLoopSync @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25720
performSyncWorkOnRoot @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25346
scheduleUpdateOnFiber @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:24778
updateContainer @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27963
(anonymous) @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28348
unbatchedUpdates @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25493
legacyRenderSubtreeIntoContainer @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28347
render @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28430
(anonymous) @ main.jsx:7
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27555 Uncaught Error: 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.

Check the render method of App.
at createFiberFromTypeAndProps (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27555)
at createFiberFromElement (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27578)
at createChild (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17218)
at reconcileChildrenArray (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17490)
at reconcileChildFibers (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17895)
at reconcileChildren (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:20352)
at updateHostComponent (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:20892)
at beginWork (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:22217)
at HTMLUnknownElement.callCallback (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3778)
at Object.invokeGuardedCallbackDev (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3827)
createFiberFromTypeAndProps @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27555
createFiberFromElement @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27578
createChild @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17218
reconcileChildrenArray @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17490
reconcileChildFibers @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17895
reconcileChildren @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:20352
updateHostComponent @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:20892
beginWork @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:22217
callCallback @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3778
invokeGuardedCallbackDev @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3827
invokeGuardedCallback @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3882
beginWork$1 @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:26793
performUnitOfWork @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25744
workLoopSync @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25720
performSyncWorkOnRoot @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25346
scheduleUpdateOnFiber @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:24778
updateContainer @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27963
(anonymous) @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28348
unbatchedUpdates @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25493
legacyRenderSubtreeIntoContainer @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28347
render @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28430
(anonymous) @ main.jsx:7
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:23117 The above error occurred in the

component:
in div (created by App)
in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:23117
logError @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:23154
update.callback @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:24298
callCallback @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:16080
commitUpdateQueue @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:16101
commitLifeCycles @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:23473
commitLayoutEffects @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:26393
callCallback @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3778
invokeGuardedCallbackDev @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3827
invokeGuardedCallback @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3882
commitRootImpl @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:26131
unstable_runWithPriority @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:29332
runWithPriority$1 @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:14629
commitRoot @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25971
finishSyncRender @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25397
performSyncWorkOnRoot @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25383
scheduleUpdateOnFiber @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:24778
updateContainer @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27963
(anonymous) @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28348
unbatchedUpdates @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25493
legacyRenderSubtreeIntoContainer @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28347
render @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28430
(anonymous) @ main.jsx:7
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27555 Uncaught Error: 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.

Check the render method of App.
at createFiberFromTypeAndProps (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27555)
at createFiberFromElement (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27578)
at createChild (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17218)
at reconcileChildrenArray (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17490)
at reconcileChildFibers (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17895)
at reconcileChildren (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:20352)
at updateHostComponent (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:20892)
at beginWork (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:22217)
at HTMLUnknownElement.callCallback (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3778)
at Object.invokeGuardedCallbackDev (modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3827)
createFiberFromTypeAndProps @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27555
createFiberFromElement @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27578
createChild @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17218
reconcileChildrenArray @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17490
reconcileChildFibers @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:17895
reconcileChildren @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:20352
updateHostComponent @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:20892
beginWork @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:22217
callCallback @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3778
invokeGuardedCallbackDev @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3827
invokeGuardedCallback @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:3882
beginWork$1 @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:26793
performUnitOfWork @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25744
workLoopSync @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25720
performSyncWorkOnRoot @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25346
scheduleUpdateOnFiber @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:24778
updateContainer @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:27963
(anonymous) @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28348
unbatchedUpdates @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:25493
legacyRenderSubtreeIntoContainer @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28347
render @ modules.js?hash=8de6a9b7cd32c48107d1c977a338c082d8078049:28430
(anonymous) @ main.jsx:7
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
Grammarly.js:2 [DEFAULT]: WARN : Using DEFAULT root logger
t.printToConsole @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
t.logImpl @ Grammarly.js:2
e.log @ Grammarly.js:2
e.warn @ Grammarly.js:2
e.getRootLogger @ Grammarly.js:2
get @ Grammarly.js:2
e.getLogger @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
Grammarly.js:2 [WARNING] Using default timeseries implementation.
e.getRootMetric @ Grammarly.js:2
e @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
t.pipe @ Grammarly.js:2
e.rootLogLevelGetter @ Grammarly.js:2
u @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
n @ Grammarly.js:2
(anonymous) @ Grammarly.js:2
(anonymous) @ Grammarly.js:2

alawi · June 19, 2020, 2:17pm

React is complaining that one of the imported components is undefined.

Try commenting out each imported component (Hello, Info, Todo) and rerun to isolate the broken export.

paris0120 · June 19, 2020, 2:19pm

This error occurs only when I include
“”

alawi · June 19, 2020, 2:19pm

Can you share the full code of that file? perhaps you default export there.

paris0120 · June 19, 2020, 2:33pm

i edited my original post. They are there. Thank you.

alawi · June 19, 2020, 2:36pm

Try changing import { todo } from → import todo from, remove the curely brackets.

paris0120 · June 19, 2020, 2:46pm

OK, it works!!! I see the difference. Thank you for your help!