React.createElement: type is invalid -- Express/Node.js and React-Router

Question

While trying to get react-router working on my Node/Express backend, React frontend I encounter this warning whilst trying to build

React.createElement: type is invalid -- expected a string

In search of answers I have discovered this already asked question

React.createElement: type is invalid -- expected a string

Of which the solutions involving * checking all my export default class Components... * Importing BrowserRouter from react-router-dom vs react-router

Do not correct my problem. Furthermore when I open DevTools in Chrome I see that the page is blank, React has not populated my root div and on top of all that There is a error in console client-bundle.js:1 Uncaught SyntaxError: Unexpected token <

When I click on this error, it leads me to the source for my client-bundle.js which does not contain javascript but the markup of the boilerplate html

I have been reading through examples, tutorials and documentations but have yet to find the source of my errors. I am hoping that someone here might see something I don't

umleto.js

import express from 'express';
import router from './routing/router';

// Basic config
const PORT = 3000;
const HOST = 'localhost';
const app = express();

// Setup server side router
router(app);

// Setup EJS template engine
app.set('views', `${__dirname}/views`);
app.set('view engine', 'ejs');

// Start server
const server = app.listen(PORT, () => console.log(`Listening to ${HOST}:${PORT}`));

routing/router.js

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router';
import Routes from './Routes';
import NotFoundPage from '../frontend/components/NotFoundPage';

// React Router as middleware
const router = (req, res, next) => {
    const context = { routes: Routes, location: req.url };
    const markup = renderToString( <StaticRouter context={context} /> );
    res.render('index', { markup });
    next();

}
export default (app) => app.use(router);

routing/Routes.jsx

import React from 'react';
import { Route, IndexRoute, Switch } from 'react-router';
import Layout from '../frontend/components/Layout';
import NotFoundPage from '../frontend/components/NotFoundPage';
import IndexPage from '../frontend/components/IndexPage';

// Client Side Routing
const Routes = (
    <Route path="/" component={Layout}>
        <IndexRoute component={IndexPage}/>
        <Route path="*" component={NotFoundPage}/>
    </Route>
);

export default Routes;

I have a git hub repository setup incase anyone wants a better look at my problem code. https://github.com/slipsnip/UMLeto

At first glance, shouldn't router.js be named router.jsx because it has JSX tags in it? — SArnab, Jul 18 '18 at 01:49
I just tried this change, I also changed a few more references from react-router to react-router-dom at the same time and have managed to remove the warning, though the error still exists and there is still no rendered output. I am beginning to question weather parceljs has anything to do with this because I use that to as a bundler. — , Jul 18 '18 at 02:18

score 0 · Accepted Answer · answered Jul 18 '18 at 22:55

I have solved the original problem React.createElement: type is invalid -- expected a string by changing my bundler from Parceljs to Webpack, It appears to have been build tool related.

While this problem is solved , a new one has presented itself as Error: Failed to lookup view "index" in views directory "//views" In the browser and Error: Can't set headers after they are sent. in the console after doing a refresh. Currently investigating this new problem. I think the best thing for me to do is accept this answer because the new problem seems unrelated.

Could someone instruct me on the best approach, accept this answer or wait to see what others say? about this new iteration of errors.

React.createElement: type is invalid -- Express/Node.js and React-Router

1 Answers1