应用程序可以在localhost上正常运行，但不能在netlify上加载吗？

时间：2019-06-08 21:31:41

标签： reactjs github https deployment netlify

我现在正在尝试部署它，该应用程序在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上很好地工作，但是不能。

2 个答案:

答案 0 :(得分：1)

错误似乎出在“意外令牌<”

错误Uncaught SyntaxError：意外令牌<通常是由您的网站代码引用不再可用的资产引起的。最常见的是，这是由于在构建期间生成的资产中文件名的更改。如果使用版本化或分块的javascript，每次部署时文件名都会更改，则会发生相同的情况。

来源：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/

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

答案 1 :(得分：1)

EDIT 我可以通过更改private var uri: Uri = Uri.parse("") override fun onBind(intent: Intent?) = AudioServiceBinder().apply { player = ExoPlayerFactory.newSimpleInstance( applicationContext, AudioOnlyRenderersFactory(applicationContext), DefaultTrackSelector()) } override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int { intent?.let { when (intent.action) { CONTENT_SELECTED_ACTION -> it.getParcelableExtra<Content>(CONTENT_SELECTED_KEY).also { content -> val intentUri = Uri.parse(content.audioUrl) // Checks whether to update Uri passed in Intent Bundle. if (!intentUri.equals(uri)) { uri = intentUri player?.prepare(ProgressiveMediaSource.Factory( DefaultDataSourceFactory( this, Util.getUserAgent(this, getString(app_name)))) .createMediaSource(uri)) player?.playWhenReady = true // Calling 'startForeground' in 'buildNotification(...)'. buildNotification(intent.getParcelableExtra(CONTENT_SELECTED_KEY)) } } } } return super.onStartCommand(intent, flags, startId) } // Calling 'startForeground' in 'onNotificationStarted(...)'. private fun buildNotification(content: Content): Unit? { playerNotificationManager = PlayerNotificationManager.createWithNotificationChannel( this, content.title, app_name, if (!content.audioUrl.isNullOrEmpty()) 1 else -1, object : PlayerNotificationManager.MediaDescriptionAdapter { override fun createCurrentContentIntent(player: Player?) = ... override fun getCurrentContentText(player: Player?) = ... override fun getCurrentContentTitle(player: Player?) = ... override fun getCurrentLargeIcon(player: Player?, callback: PlayerNotificationManager.BitmapCallback?) = ... }, object : PlayerNotificationManager.NotificationListener { override fun onNotificationStarted(notificationId: Int, notification: Notification) { startForeground(notificationId, notification) } override fun onNotificationCancelled(notificationId: Int) { stopForeground(true) stopSelf() } }) return playerNotificationManager.setPlayer(player) } 文件来解决此问题。

来自此： 

packages.json

为此： 

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

发生这种情况是由于mixed content阻止了您的 ... "homepage": "/", "author": "", "license": "ISC", "description": "" ... 加载...

无论您在应用程序中的何处导入此CSS：CSS ..

.. 将其更改为此，它应该起作用：

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

请注意'https://video-react.js.org/assets/video-react.css' ...您不能在安全（https）连接上使用XHR来检索不安全连接（https）上的资源。.Netlify站点位于http上，该https文件位于CSS上-符合http的条件。

相关问题
最新问题