JavaScript не включен для создания-реакции-приложения в сборке Heroku - PullRequest
0 голосов
/ 21 октября 2019

Я пытаюсь развернуть приложение React в Heroku, сгенерированное из приложения create-реакции. Он работает локально, но после развертывания на странице нет тегов script. Если я делаю сборку локально через npm run-script build, на странице index.html есть три тега сценария, которые выглядят следующим образом:

  <script>
! function(a) {
  function e(e) {
    for (var r, t, n = e[0], o = e[1], u = e[2], p = 0, l = []; p < n.length; p++) t = n[p], Object.prototype.hasOwnProperty.call(i, t) && i[t] && l.push(i[t][0]), i[t] = 0;
    for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (a[r] = o[r]);
    for (s && s(e); l.length;) l.shift()();
    return c.push.apply(c, u || []), f()
  }

  function f() {
    for (var e, r = 0; r < c.length; r++) {
      for (var t = c[r], n = !0, o = 1; o < t.length; o++) {
        var u = t[o];
        0 !== i[u] && (n = !1)
      }
      n && (c.splice(r--, 1), e = p(p.s = t[0]))
    }
    return e
  }
  var t = {},
    i = {
      1: 0
    },
    c = [];

  function p(e) {
    if (t[e]) return t[e].exports;
    var r = t[e] = {
      i: e,
      l: !1,
      exports: {}
    };
    return a[e].call(r.exports, r, r.exports, p), r.l = !0, r.exports
  }
  p.m = a, p.c = t, p.d = function(e, r, t) {
    p.o(e, r) || Object.defineProperty(e, r, {
      enumerable: !0,
      get: t
    })
  }, p.r = function(e) {
    "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
      value: "Module"
    }), Object.defineProperty(e, "__esModule", {
      value: !0
    })
  }, p.t = function(r, e) {
    if (1 & e && (r = p(r)), 8 & e) return r;
    if (4 & e && "object" == typeof r && r && r.__esModule) return r;
    var t = Object.create(null);
    if (p.r(t), Object.defineProperty(t, "default", {
        enumerable: !0,
        value: r
      }), 2 & e && "string" != typeof r)
      for (var n in r) p.d(t, n, function(e) {
        return r[e]
      }.bind(null, n));
    return t
  }, p.n = function(e) {
    var r = e && e.__esModule ? function() {
      return e.default
    } : function() {
      return e
    };
    return p.d(r, "a", r), r
  }, p.o = function(e, r) {
    return Object.prototype.hasOwnProperty.call(e, r)
  }, p.p = "/";
  var r = this["webpackJsonpmy-app"] = this["webpackJsonpmy-app"] || [],
    n = r.push.bind(r);
  r.push = e, r = r.slice();
  for (var o = 0; o < r.length; o++) e(r[o]);
  var s = n;
  f()
}([])

Кажется, что я пропускаю некоторые настройкигде я могу указать скриптам, куда вставить JS.

Мой пакет выглядит так:

{
  "name": "my-app",
  "version": "0.2.0",
  "private": true,
  "engines": {
    "npm": "6.12.0",
    "node": "10.16.3"
  },
  "dependencies": {
    "history": "^4.10.1",
    "node-sass": "^4.12.0",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-scroll": "^1.7.14",
    "simplesignal": "^4.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "exenv": "^1.2.2",
    "point-geometry": "^0.1.0"
  }
}

Сервер выглядит так:

// server.js
var express = require('express')
var path = require('path')
var compression = require('compression')

var app = express()

// Must be first!
app.use(compression());
// Serve our static stuff like index.css
app.use(express.static(path.join(__dirname, 'public')))

// Send all requests to index.html so browserHistory in React Router works.
app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'))
})

var PORT = process.env.PORT || 8080
app.listen(PORT, function() {
  console.log('Production Express server running at localhost:' + PORT)
})

app.json:

{
  "name": "Some name.",
  "description": "Some description.",
  "repository": "",
  "logo": "",
  "keywords": ["node", "express", "static"],
  "image": ""
}

public / index.html:

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Some Title</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

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

</html>

Procfile:

web: node server.js

Что мне не хватает, чтобы получить сборку Heroku для добавления ссылок на скрипты там, где они нужны?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...