Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. But app still renders

Question

Hi im fairly new to Meteor and react and am working on a customer portal. I have adapted the meteor react tutorial to work how i need it to work and am using Flow Router for routing. Everything currently works as it should except i am still getting this error Uncaught Error: AppMount(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null., no matter what i do.

Here is my code for routing aswell as most of the code for the main homepage:

main.jsx

import AppMount from '/imports/ui/AppMount'
import "./routes"

Meteor.startup(() => {
  render(<AppMount />, document.getElementById('root'))
})

AppMount.jsx

const AppMount = props => {
  return (props.content);
}

export default AppMount

App.jsx

const App = () => {

  const user = useTracker(() => Meteor.user());

  const { tasks, isLoading } = useTracker(() => {
    const noDataAvailable = { tasks: [] };

    if (!Meteor.user()) {
      return (noDataAvailable);
    }
    const handler = Meteor.subscribe('tasks');

    if (!handler.ready()) {
      return ({ ...noDataAvailable, isLoading: true });
    }

    const tasks = TasksCollection.find(
      userFilter,
      {
        sort: { status: 1 },
      }
    ).fetch();

    return ({ tasks });

  });


  return(
    <div className="app">
      <Header />

      <div className="main">
        {user ? (
          <Fragment>
            <div className="menu">
              {user.admin && (
                <Fragment>
                  <button className="addUser" onClick={newUser} >
                    Add New User
                  </button>

                  <button className="addTask" onClick={addTask} >
                    Add Task
                  </button>

                </Fragment>
              )}

              <button className="changePass" onClick={changePass} >
                Change Password
              </button>

              <button className="user" onClick={logout} >
                Logout: {user.username}
              </button>

            </div>

            {isLoading && <div className="loading">loading..</div>}

            <ul className="tasks">
              {tasks.map(task => (
                <Task
                  key={task._id}
                  task={task}
                  onCheckboxClick={toggleChecked}
                  onDeleteClick={deleteTask}
                  advanceStage={advanceStage}
                  revertStage={revertStage}
                />
              ))}
            </ul>
          </Fragment>
        ) : (
            <LoginForm />
          )}
      </div>
    </div>
  );
}

export default App

routes.jsx

FlowRouter.route('/', {
  name: 'Home',
  action() {
    mount(AppMount, {
      content: <App />
    })
  }
})

I know this question has been asked before but i believe i have tried every solution to no avail.

Any help is appreciated.

Answer 1

props.content need {}

const AppMount = props => {
  return {props.content};
}