Invalid type when trying to render component

Question

I am trying to use FlowRouter and react-mounter in my Meteor React app but get the following error message:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

client/main.html has this div in body:

<div id="root"></div>

with client/main.jsx:

import React from "react";
import { Meteor } from "meteor/meteor";
import { render } from "react-dom";
import { App } from "/imports/ui/App";
import "/client/router";

Meteor.startup(() => {
  render(<App/>, document.getElementById("root"));
});

client/router.jsx has this route:

import React from "react";
import { FlowRouter } from "meteor/ostrio:flow-router-extra";
import { mount, withOptions } from "react-mounter";

import App from "/imports/ui/App";
import Start from "/imports/ui/Start";

const mount2 = withOptions({
  rootId: "root"
}, mount);

FlowRouter.route("/", {
  name: "Start",
  action() {
    console.log("start");
    mount2(App, {
      content: <Start />
    });
  }
});

imports/ui/App.jsx:

import React from "react";

export const App = ({content}) => {
  console.log("content", content);
  return <div>{content}</div>
};

content prints undefined.

and the imports/ui/Start.jsx component that I want to render:

import React from "react";

export const Start = () => (
  <div>
    start
  </div>
);

What am I missing?

Answer 1

My problem was that the imports in /client/router.jsx should have curly brackets like:

import { App } from "/imports/ui/App";
import { Start } from "/imports/ui/Start";