应用程序在 localhost 上运行良好，但在 netlify 上没有加载？答案

【问题标题】：App working fine on localhost but doesn't loads on netlify?应用程序在 localhost 上运行良好，但在 netlify 上没有加载？
【发布时间】：2019-06-08 21:31:41
【问题描述】：

我现在正在尝试部署它，该应用程序在 localhost 上运行良好，完全没有问题，但是当我从 github 将它部署到 netlify 时，它在开发人员控制台中给我这些错误而崩溃。

init @ include.preload.js:442
(index):1 Mixed Content: The page at 'https://5cfc2538a4fc311e18e72538--brave-poincare-d969b9.netlify.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://video-react.js.org/assets/video-react.css'. This request has been blocked; the content must be served over HTTPS.
2.0370c799.chunk.js:1 Uncaught SyntaxError: Unexpected token <
main.dbd098f2.chunk.js:1 Uncaught SyntaxError: Unexpected token <
include.preload.js:442 [Deprecation] Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.
init @ include.preload.js:442
include.preload.js:442 [Deprecation] Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.
init @ include.preload.js:442
manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.
(index):1 Mixed Content: The page at 'https://5cfc2538a4fc311e18e72538--brave-poincare-d969b9.netlify.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://video-react.js.org/assets/video-react.css'. This request has been blocked; the content must be served over HTTPS.

之前无法安装 node-pre-gyp 模块，但我已修复，但现在已部署但无法正常工作

netlify 部署的完整日志：

5:14:32 PM: Build ready to start
5:14:34 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
5:14:34 PM: build-image tag: v3.3.2
5:14:34 PM: buildbot version: 75cd99f62ada9e21edea53208e8baf0eab85a045
5:14:35 PM: Fetching cached dependencies
5:14:35 PM: Failed to fetch cache, continuing with build
5:14:35 PM: Starting to prepare the repo for build
5:14:35 PM: No cached dependencies found. Cloning fresh repo
5:14:35 PM: git clone https://github.com/Phyxable/app-jun-07
5:14:50 PM: Preparing Git Reference refs/heads/master
5:14:51 PM: Starting build script
5:14:51 PM: Installing dependencies
5:14:53 PM: Downloading and installing node v10.16.0...
5:14:53 PM: Downloading https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz...
5:14:53 PM: 
#######
5:14:53 PM:          11.0%
5:14:53 PM: 
###############################################################
5:14:53 PM: ###        91.8%
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: #
5:14:54 PM: ################
5:14:54 PM: ########################################## 100.0%
5:14:54 PM: Computing checksum with sha256sum
5:14:54 PM: Checksums matched!
5:14:56 PM: Now using node v10.16.0 (npm v6.9.0)
5:14:57 PM: Attempting ruby version 2.6.2, read from environment
5:14:58 PM: Using ruby version 2.6.2
5:14:58 PM: Using PHP version 5.6
5:14:58 PM: Started restoring cached node modules
5:15:00 PM: Finished restoring cached node modules
5:15:00 PM: Installing NPM modules using NPM version 6.9.0
5:15:33 PM: > grpc@1.20.3 install /opt/build/repo/node_modules/grpc
5:15:33 PM: > node-pre-gyp install --fallback-to-build --library=static_library
5:15:33 PM: node-pre-gyp
5:15:33 PM: WARN
5:15:33 PM:  Using request for node-pre-gyp https download
5:15:34 PM: [grpc] Success: "/opt/build/repo/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc/grpc_node.node" is installed via remote
5:15:34 PM: > core-js-pure@3.1.3 postinstall /opt/build/repo/node_modules/core-js-pure
5:15:34 PM: > node scripts/postinstall || echo "ignore"
5:15:34 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
5:15:34 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
5:15:34 PM: > https://opencollective.com/core-js 
5:15:34 PM: > https://www.patreon.com/zloirock 
5:15:34 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
5:15:34 PM: > protobufjs@6.8.8 postinstall /opt/build/repo/node_modules/protobufjs
5:15:34 PM: > node scripts/postinstall
5:15:35 PM: > jss@9.8.7 postinstall /opt/build/repo/node_modules/jss
5:15:35 PM: > node -e "console.log('\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m')"
5:15:35 PM: Love JSS? You can now support us on open collective:
5:15:35 PM:  > https://opencollective.com/jss/donate
5:15:35 PM: > firebase-functions@2.3.1 postinstall /opt/build/repo/node_modules/firebase-functions
5:15:35 PM: > node ./upgrade-warning
5:15:35 PM: ======== WARNING! ========
5:15:35 PM: This upgrade of firebase-functions contains breaking changes if you are upgrading from a version below v1.0.0.
5:15:35 PM: To see a complete list of these breaking changes, please go to:
5:15:35 PM: https://firebase.google.com/docs/functions/beta-v1-diff
5:15:37 PM: npm WARN
5:15:37 PM: optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/jest-haste-map/node_modules/fsevents):
5:15:37 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:15:37 PM: npm WARN
5:15:37 PM:  optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/chokidar/node_modules/fsevents):
5:15:37 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:15:37 PM: npm
5:15:37 PM: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.0.6 (node_modules/fsevents):
5:15:37 PM: npm
5:15:37 PM:  WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.0.6: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:15:37 PM: added 1849 packages from 1018 contributors and audited 890418 packages in 35.912s
5:15:37 PM: found 0 vulnerabilities
5:15:37 PM: NPM modules installed
5:15:37 PM: Started restoring cached go cache
5:15:37 PM: Finished restoring cached go cache
5:15:38 PM: unset GOOS;
5:15:38 PM: unset GOARCH;
5:15:38 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
5:15:38 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
5:15:38 PM: go version >&2;
5:15:38 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
5:15:38 PM: go version go1.12 linux/amd64
5:15:38 PM: Installing missing commands
5:15:38 PM: Verify run directory
5:15:38 PM: Executing user command: npm run build
5:15:38 PM: > finalphyx@0.1.0 build /opt/build/repo
5:15:38 PM: > react-scripts build && echo '/*    /index.html   200' > build/_redirects
5:15:39 PM: Creating an optimized production build...
5:16:15 PM: Compiled with warnings.
5:16:15 PM: ./src/Components/App/index.js
5:16:15 PM:   Line 13:   'FourZeroFourPage' is defined but never used  no-unused-vars
5:16:15 PM:   Line 15:  'Switch' is defined but never used            no-unused-vars
5:16:15 PM: ./src/Pages/SubscribePage/index.jsx

manifest.json：

{
  "short_name": "Phyxable",
  "name": "Phyxable",
  "icons": [
    {
      "src": "/images/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

package.json：

{
  "name": "finalphyx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/lab": "^3.0.0-alpha.30",
    "disable-scroll": "^0.4.1",
    "firebase": "^6.1.1",
    "firebase-functions": "^2.3.1",
    "html-loader": "^0.5.5",
    "mdbreact": "^4.15.0",
    "netlify": "^2.4.6",
    "react": "^16.8.6",
    "react-bootstrap": "^0.32.4",
    "react-div-100vh": "^0.3.4",
    "react-dom": "^16.8.6",
    "react-firebaseui": "^3.1.2",
    "react-ga": "^2.5.7",
    "react-jw-player": "^1.19.0",
    "react-meta-tags": "^0.7.4",
    "react-password-mask": "^3.3.1",
    "react-player": "^1.11.0",
    "react-responsive": "^7.0.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.0.1",
    "react-scroll": "^1.7.11",
    "react-share": "^3.0.0",
    "react-stripe-checkout": "^2.6.3",
    "react-stripe-elements": "^3.0.0",
    "recompose": "^0.30.0",
    "stripe": "^7.1.0",
    "video-react": "^0.13.7",
    "waypoints": "^4.0.1",
    "window-scroll-manager": "^1.1.4"
  },
  "devDependencies": {
    "bundle-loader": "^0.5.6",
    "prettier": "^1.18.2",
    "pretty-quick": "^1.11.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && echo '/*    /index.html   200' > build/_redirects",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "aws s3 sync build s3://www.phyxable.com"
  },
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://jacobmjones@bitbucket.org/jacobmjones/web.git"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "homepage": "https://bitbucket.org/jacobmjones/web#readme",
  "author": "",
  "license": "ISC",
  "description": ""
}

它应该可以正常工作，因为它在 localhost 上运行良好，但不能。

【问题讨论】：

我认为netlify只部署静态网站。
@MonicaAcha 不，我们在同一产品的 netlify 上也有以前的版本，这个版本包含一些小改动。那是一个不同的开发者。因此，如果它有效，那么它现在也应该有效。
你能解决这个问题吗？

标签： reactjs github https deployment netlify

【解决方案1】：

编辑我能够通过更改 packages.json 文件来解决这个问题..

来自：

  ...
  "homepage": "https://bitbucket.org/jacobmjones/web#readme",
  "author": "",
  "license": "ISC",
  "description": ""
  ...

至此：

  ...
  "homepage": "/",
  "author": "",
  "license": "ISC",
  "description": ""
  ...

这是由于 mixed content 导致您的 CSS 无法加载...

无论您在应用中的何处导入此 CSS：'http://video-react.js.org/assets/video-react.css'..

..把它改成这个，它应该可以工作了：

'https://video-react.js.org/assets/video-react.css'

请注意 https... 您不能在安全 (https) 连接上使用 XHR 来检索不安全连接 (http) 上的资源。您的 Netlify 站点位于 https 上，并且CSS 文件位于 http - 符合 mixed-content 的条件。

【讨论】：

非常感谢我通过将样式表放在本地文件夹而不是服务器上来消除混合内容错误。但仍然收到那些意外的令牌错误。
如果你在本地运行“npm build”（或“npm run build”——我不记得你必须运行哪个），它工作得很好吗？
在本地机器上我必须运行`npm start，是的，它在本地工作正常。
Npm start 不像 netlify 那样构建文件。可以运行 npm build 看看是否有错误吗？
我注意到在开发人员控制台中出现错误的文件名甚至不存在。

【解决方案2】：

错误似乎在'意外的令牌

错误 Uncaught SyntaxError: Unexpected token

来源：https://community.netlify.com/t/common-issue-why-do-i-see-uncaught-syntaxerror-unexpected-token-errors-how-can-i-use-chunking-or-versioning-for-my-assets-at-netlify/124

另外，看看你能不能从这里得到任何线索： https://www.netlify.com/docs/build-gotchas/

另外，尝试将节点版本升级到最新版本。

【讨论】：

您好，谢谢您的提示。我实际上坚持这一点，因为我得到的错误是在这些文件上。因为在代码构建文件名之后，如果 JS 块被更改为其他内容。我以前从来没有研究过这个东西，你能建议我如何解决这个问题吗？