Реагировать на минимальную ошибку № 130 только во время сборки, а не при запуске пряжи - PullRequest
Новая
       53

Реагировать на минимальную ошибку № 130 только во время сборки, а не при запуске пряжи

1 голос
/ 25 марта 2019

Я разработал приложение реагирования с использованием приставки, а навигация - по реакции-маршрутизатора-домена.Во время разработки сборки приложения, т.е. при запуске 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;
...