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

Question

I am building a login app using React and Node. I use Babel and Webpack for the transpiling and bundling. On the React side, I use ES6 module system and Commonjs module on the node side.

The app works fine on the client-side but when I intend to add server-side rendering, I got the above error.

After doing some research, I figured it might be the importing of my MainRouter, the module was exported using "export default" so I added this line "const MainRouter = require('../client/MainRouter').default". On adding this, the error goes but the app displays nothing.

Below is my code:

express.js

 `
// server side rendering module
const React = require("react");
const ReactDOMServer = require("react-dom");
const StaticRouter = require("react-router-dom").StaticRouter;  
const MainRouter = require("../client/MainRouter")
console.log(require("../client/MainRouter"))

const { SheetsRegistry, JssProvider } = require("react-jss");

const {
  MuiThemeProvider,
  createMuiTheme,
} = require("@material-ui/core/styles");
const { indigo, pink } = require("@material-ui/core/colors");
const Template = require("./../template");
app.get("*", (req, res) => {
  const sheetsRegistry = new SheetsRegistry();
  const theme = createMuiTheme({
    palette: {
      primary: {
        light: "#757de8",
        main: "#3f51b5",
        dark: "#002984",
        contrastText: "#fff",
      },
      secondary: {
        light: "#ff79b0",
        main: "#ff4081",
        dark: "#c60055",
        contrastText: "#000",
      },
      openTitle: indigo["400"],
      protectedTitle: pink["400"],
      type: "light",
    },
  });

  const context = {};
  const markup = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <JssProvider
        registry={sheetsRegistry}
      >
        <MuiThemeProvider theme={theme}>
          <MainRouter />
        </MuiThemeProvider>
      </JssProvider>
    </StaticRouter>
  );

  

  if (context.url) {
    return res.redirect(303, context.url);
  }
  const css = sheetsRegistry.toString();
  res.status(200).send(Template({ markup, css }));
});
`

Template.js

    module.exports = ({ markup, css}) => {
    return `<!doctype html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>MERN Skeleton</title>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
           
            <style> a { text-decoration: none}</style>
        </head>
        <body style="margin:0">
            <div id="root">${markup}</div>
            <style id="jss-server-side">${css}</style>
            <script type="text/javascript" src="/dist/bundle.js">
            </script>
        </body>
        </html>
    `

}

I will appreciate it if someone can point me in the right direction. Thanks in advance.