CODEWITHSUNDEEP
node.jsreactjsreact-router
Zeus
Zeus

Reputation: 1275

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function. react router v4

I am rather new to reactjs and was testing basic server side rendering with react-router v4 but I cannot get past this error, been trying since hours. I have tried every solution that I found on google but none of them seems to be working.

Here is the server.js code :

import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router'
import MyRoutes from './routes/routes.js';

...

app.get('*', (req, res) => {

  let markup = `<!DOCTYPE html>
    <html lang="en">        
    <body>
        ${renderToString(<StaticRouter location={req.url} context={{}}><MyRoutes/></StaticRouter>)}
    </body>
    </html>`;
  res.write(markup);
  res.end();
});

Problem seems to be with the following code :

./routes/routes.js code:

import React from 'react';
import { Match, Miss } from 'react-router';    

const componentTest = () =>
(       
    <div>
     Testing a component
    </div>
);

export default () => (
        <div>
        <Match exactly={true} pattern="/" component={componentTest} />
        </div>
);

Now if I remove the Match tag line I get blank page with no error. But if that Match tag line is there I get the following error:

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.
    in Unknown
    in Router (created by StaticRouter)
    in StaticRouter
Invariant Violation: 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. Check the render method of `StatelessComponent`.
    at invariant (/home/ubuntu/workspace/node_modules/react-dom/node_modules/fbjs/lib/invariant.js:44:15)
    at instantiateReactComponent (/home/ubuntu/workspace/node_modules/react-dom/lib/instantiateReactComponent.js:74:56)
    at instantiateChild (/home/ubuntu/workspace/node_modules/react-dom/lib/ReactChildReconciler.js:44:28)
    at /home/ubuntu/workspace/node_modules/react-dom/lib/ReactChildReconciler.js:71:16
    at traverseAllChildrenImpl (/home/ubuntu/workspace/node_modules/react-dom/lib/traverseAllChildren.js:77:5)
    at traverseAllChildren (/home/ubuntu/workspace/node_modules/react-dom/lib/traverseAllChildren.js:172:10)
    at Object.ReactChildReconciler.instantiateChildren (/home/ubuntu/workspace/node_modules/react-dom/lib/ReactChildReconciler.js:70:7)
    at ReactDOMComponent.ReactMultiChild.Mixin._reconcilerInstantiateChildren (/home/ubuntu/workspace/node_modules/react-dom/lib/ReactMultiChild.js:187:41)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/ubuntu/workspace/node_modules/react-dom/lib/ReactMultiChild.js:226:27)
    at ReactDOMComponent.Mixin._createContentMarkup (/home/ubuntu/workspace/node_modules/react-dom/lib/ReactDOMComponent.js:653:32)

Any help would be much appreciated.

Upvotes: 1

Views: 670

Answers (1)

Zeus
Zeus

Reputation: 1275

The solution to this was given by Tharaka Wijebandara in comments.

Problem is that Match has been replaced by Route in react-router v4. So replacing the Match tag line with this line solved it : 

 <Route exact path="/" component={componentTest} />

Source : https://reacttraining.com/react-router/web/api/Route

Upvotes: 1

Related Questions