App working fine on localhost but doesn't loads on netlify? - reactjs

Question

i am trying to deploy it now, the app works great on localhost, no problems at all but when i deploy it to netlify from github it crashes by giving me these errors in developers console.
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.
it was not being able to install node-pre-gyp module before, but i fixed it but now it gets deployed but doesn't work
complete log of netlify deployement:
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": ""
}
it should be working fine as it works great on localhost but doesn't.

Answer 1

EDIT I was able to resolve this by changing the packages.json file..
From this:
...
"homepage": "https://bitbucket.org/jacobmjones/web#readme",
"author": "",
"license": "ISC",
"description": ""
...
To this:
...
"homepage": "/",
"author": "",
"license": "ISC",
"description": ""
...
This is happening due to mixed content which is preventing your CSS from loading...
Wherever you are importing this CSS within your app: 'http://video-react.js.org/assets/video-react.css'..
..change it to this, and it should work:
'https://video-react.js.org/assets/video-react.css'
Notice the https... You cannot use XHR on a secure (https) connection to retrieve resources on an insecure connection (http).. Your Netlify site is on https and that CSS file is on http - which qualifies for mixed-content.
Chrome
docs
Mozilla/Firefox docs

Answer 2

Error seems to be in 'unexpected token <'
The error Uncaught SyntaxError: Unexpected token < is most commonly caused by your site’s code referring to an asset that is no longer available. Most commonly, this is due to a filename change in assets generated during your build. The same situation happens if you use versioned or chunked javascript where the filename changes with every deploy.
Source: 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
In addition, See if you can get any clues from here:
https://www.netlify.com/docs/build-gotchas/
Also, try upgrading node version to the latest one.