Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Minified React error in react while navigation one component to anther

I am getting this error while implementing the react-routing here is my code http://codepen.io/anon/pen/VmOgyy?editors=1010

Error

react.min.js:16 Uncaught Error: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at r (react.min.js:16)
    at p.a [as _instantiateReactComponent] (react.min.js:16)
    at performInitialMount (react.min.js:13)
    at p.mountComponent (react.min.js:13)
    at Object.mountComponent (react.min.js:15)
    at i (react.min.js:14)
    at r.perform (react.min.js:16)
    at s (react.min.js:14)
    at r.perform (react.min.js:16)
    at Object.batchedUpdates (react.min.js:14)

Could you please tell me why it is showing this error

var Router = ReactRouter;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var browserHistory = Router.browserHistory;
var RouteHandler = Router.RouteHandler;

class First extends React.Component {
  render() {
    return <h1>Hello word</h1>;
  }
}

class Second extends React.Component {
  render() {
    return <h1>Second</h1>;
  }
}

ReactDOM.render( <Router history={browserHistory}>
        <Route path="/" component={First}/>
    </Router>,document.getElementById('root')
)
like image 979
user944513 Avatar asked Dec 03 '22 13:12

user944513


1 Answers

Well the error occurs because of the conflict between the development and production environment versions of your modules. The react-router instance that you are using in your codepen is a development version and contains the full error messages. And as the React Docs say

In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.

We highly recommend using the development build locally when debugging your app since

To solve the error, use the non-minified version of react and react-dom

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js

and

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js
like image 135
Shubham Khatri Avatar answered Dec 06 '22 10:12

Shubham Khatri