Styjun

I've developed a react application using redux and navigation is using react-router-dom. During the development build of the application i.e. while running yarn start the application works perfectly and without no errors but while doing a yarn build and after serving the built index.html the console shows an error Uncaught Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I've checked out the previous solutions given to this problem regarding default and named imports but it's still unsolved.

I've tried debugging the minified javascript and decompile using the source maps but still no luck. I can't understand why the same error is not shown during the development mode. I've attached some code of the project for further reference.

Package.json file:

 "name": "gyaan",
 "version": "1.0.0",
 "description": "",
 "keywords": [],
 "main": "src/index.js",
 "dependencies": 
 "global": "^4.3.2",
 "moment": "^2.24.0",
 "react": "16.5.2",
 "react-datepicker": "^2.1.0",
 "react-dom": "16.5.2",
 "react-dropzone": "^8.1.0",
 "react-facebook-login": "^4.1.1",
 "react-google-login": "^4.0.1",
 "react-loadable": "5.5.0",
 "react-loader": "2.4.5",
 "react-redux": "6.0.0",
 "react-router": "4.3.1",
 "react-router-dom": "4.3.1",
 "react-router-redux": "4.0.8",
 "react-s3-uploader": "^4.8.0",
 "react-scripts": "^2.1.8",
 "react-semantic-datetime": "^1.0.5",
 "react-tag-input": "^6.2.1",
 "react-youtube": "^7.9.0",
 "redux": "4.0.1",
 "redux-devtools-extension": "2.13.7",
 "redux-logger": "3.0.6",
 "semantic-ui-react": "^0.84.0",
 "serve": "^10.1.2",
 "socket.io-client": "^2.2.0",
 "styled-components": "^4.1.3",
 "superagent": "4.0.0",
 "superagent-promise": "1.1.0"
 ,
 "devDependencies": 
 "semantic-ui": "^2.4.2"
 ,
 "scripts": 
 "build-semantic": "cd src/semantic && gulp build-css build-assets",
 "watch-semantic": "cd src/semantic && yarn run build-semantic && gulp watch",
 "start": "react-scripts start",
 "build": "yarn run build-semantic && react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
 ,
 "browserslist": [
 ">0.2%",
 "not dead",
 "not ie <= 11",
 "not op_mini all"
 ]

index.js

import React from "react";
import ReactDOM from "react-dom";
import Provider from "react-redux";
import BrowserRouter from "react-router-dom";
import store from "./store";

import App from "./Components/App";

ReactDOM.render(
 <Provider store=store>
 <BrowserRouter>
 <App/>
 </BrowserRouter>
 </Provider>,
 document.getElementById("root")
);

App.js

import React, Component from "react";
import PropTypes from "prop-types";
import connect from "react-redux";
import APP_LOAD, REDIRECT from "../Constants/actionTypes";
import Route, Switch, withRouter from "react-router-dom";
import agent from "../agent";

import ResponsiveContainer from "./components/Base";

import Home from "./scenes/Home";
import Videos from "./scenes/Videos";
import StudentProfile from "./scenes/StudentProfile";
import TutorProfile from "./scenes/TutorProfile";
import Stream from "./scenes/Stream";
import Streamer from "./scenes/Streamer";
import Category from "./scenes/Category";
import CreateStream from "./scenes/CreateStream";
import VideoDetail from "./scenes/VideoDetail";

import "../semantic/dist/semantic.min.css";

const mapStateToProps = state => (
 appLoaded: state.common.appLoaded,
 currentUser: state.common.currentUser,
 redirectTo: state.common.redirectTo,
 userType: state.common.userType
);

const mapDispatchToProps = dispatch => (
 onLoad: (payload, token) => 
 dispatch(
 type: APP_LOAD,
 payload,
 token,
 skipTracking: true
 );
 ,
 onRedirect: () => 
 dispatch( type: REDIRECT );
 
);

class App extends Component 
 UNSAFE_componentWillReceiveProps(nextProps) 
 if (nextProps.redirectTo) 
 this.context.router.history.push(nextProps.redirectTo);
 this.props.onRedirect();
 
 

 UNSAFE_componentWillMount() 
 const token = window.localStorage.getItem("jwt");
 if (token) 
 agent.setToken(token);
 
 this.props.onLoad(token ? agent.Auth.current() : null, token);
 

 render() 
 return (
 <React.Fragment>
 <ResponsiveContainer
 currentUser=this.props.currentUser
 userType=this.props.userType
 >
 <Route exact path="/" component=Home />
 <Route path="/categories" component=Videos />
 <Route path="/students/:username" component=StudentProfile />
 <Route path="/tutors/:username" component=TutorProfile />
 <Route path="/stream/:id" component=Stream />
 <Route path="/streamer/:id" component=Streamer />
 <Route path="/create" component=CreateStream />
 <Route path="/category/physics" component=Category />
 <Route path="/video-detail" component=VideoDetail />
 </ResponsiveContainer>
 </React.Fragment>
 );
 


App.contextTypes = 
 router: PropTypes.object.isRequired
;

export default withRouter(connect(mapStateToProps,mapDispatchToProps)(App));

store.js

import applyMiddleware, createStore from "redux";
import createLogger from "redux-logger";
import composeWithDevTools from "redux-devtools-extension/developmentOnly";
import promiseMiddleware, localStorageMiddleware from "./middleware";
import reducer from "./reducer";


const getMiddleware = () => 
 if (process.env.NODE_ENV === 'production') 
 return applyMiddleware(promiseMiddleware, localStorageMiddleware);
 else 
 // Enable additional logging in non-production environments.
 return applyMiddleware(
 promiseMiddleware,
 localStorageMiddleware,
 createLogger()
 );
 
;

const store = createStore(reducer, composeWithDevTools(getMiddleware()));

export default store;