React отображает пустую страницу после сборки приложения? - PullRequest
0 голосов
/ 21 февраля 2019

После запуска команды npm run build я получил файлы сборки без ошибок, но однажды, когда я пытаюсь запустить приложение, он показывает пустую страницу и ошибку как enter image description here

IЯ не могу найти, где проблема в том, что мой файл index.html похож на

`<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="description" content="dashboard, admin, template, templates, sigma, bootstrap 4, react 4 templates, react 4 themes">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- icons -->
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">

  <link rel="manifest" href="%PUBLIC_URL%/assets/icons/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <!-- <meta name="msapplication-TileImage" content="%PUBLIC_URL%/assets/icons/ms-icon-144x144.png"> -->
  <meta name="theme-color" content="#ffffff">

  <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Roboto:400,500,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

</head>

<body>
  <div id="root"></div>

  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places"></script>
</body>

</html>`

my package.json

{
  "name": "sigma",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "approve": "0.0.12",
    "approvejs": "^3.1.1",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.1.1",
    "chartist": "^0.11.0",
    "d3": "^5.5.0",
    "font-awesome": "^4.7.0",
    "froala-editor": "^2.9.1",
    "gulp": "^3.9.1",
    "harmony-reflect": "^1.6.0",
    "i18n": "^0.8.3",
    "ionicons": "^4.1.2",
    "lodash": "^4.17.10",
    "mgr-pdf-viewer-react": "^1.0.1",
    "minimist": "^1.2.0",
    "moment": "^2.22.2",
    "mustache": "^2.3.0",
    "prop-types": "^15.5.10",
    "rc-slider": "^8.3.1",
    "react": "^16.4.1",
    "react-chartist": "^0.13.0",
    "react-datamaps": "^0.4.1",
    "react-datetime": "^2.9.0",
    "react-dom": "^16.4.0",
    "react-easy-chart": "^1.0.0",
    "react-faux-dom": "^4.2.0",
    "react-froala-wysiwyg": "^2.9.1-1",
    "react-google-maps": "^9.4.5",
    "react-intl-tel-input": "^5.0.5",
    "react-loadable": "^5.4.0",
    "react-places-autocomplete": "^7.2.0",
    "react-rating": "^1.3.0",
    "react-redux": "^5.0.6",
    "react-render-html": "^0.6.0",
    "react-router-dom": "^4.0.0-beta.8",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-scripts": "^1.0.11",
    "react-select": "^1.0.0-rc.5",
    "react-spinners": "^0.3.2",
    "react-transition-group": "^2.3.1",
    "reactable": "^0.14.1",
    "reactstrap": "^6.0.1",
    "reapop": "^1.1.2",
    "recharts": "^1.0.0-alpha.3",
    "recompose": "^0.27.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.2.0",
    "serve-favicon": "^2.5.0",
    "socket.io": "^2.1.1",
    "socket.io-client": "^2.1.1",
    "source-map": "^0.7.3",
    "source-map-explorer": "^1.4.0"
  },
  "devDependencies": {
    "node-sass-chokidar": "^1.3.0",
    "npm-run-all": "^4.1.3"
  },
  "babel": {
    "presets": [
      [
        "env",
        {
          "modules": false
        }
      ],
      "react"
    ]
  },
  "scripts": {
    "analyze": "source-map-explorer build/static/js/main.*",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build-css": "node-sass-chokidar --include-path ./src/scss --include-path ./node_modules src/scss -o src/css",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src/scss --include-path ./node_modules src/scss -o src/css --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build"
  }
}

.где ошибка При поиске я узнал, что эта ошибка возникает из-за отсутствия каких-либо сценариев, но не могу понять, что я делаю неправильно enter image description here

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

разобрался с проблемой!он находится во внутреннем узлеjjs и не вызывает корректно index.html файл реакции

0 голосов
/ 21 февраля 2019

Вы обновили пакеты реагировать и реагировать на пакеты, но не обновили пакет реагирующих сценариев, несовместимый с реакцией 16. Поэтому вам необходимо обновить пакет реагирующих сценариев.

После этого вы можете собратьеще раз и проверьте, я вполне уверен, что это работает для вас.

...