Question

我已经开发了一个使用redux的react应用程序，导航使用了react-router-dom。在应用程序的开发构建过程中，即在运行yarn start时，该应用程序运行正常且没有错误，但在进行yarn build时以及在服务完构建的index.html之后，控制台显示错误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.

我已经检查出针对此问题的先前解决方案，该解决方案涉及默认和命名导入，但仍未解决。

我尝试调试缩小的javascript，并使用源映射进行反编译，但仍然没有运气。我不明白为什么在开发模式下不会显示相同的错误。我已经附加了该项目的一些代码，以供进一步参考。

Package.json文件：

{
  "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;

仅在构建期间而不是在运行纱线启动时反应最小错误＃130

0 个答案: