user7585690
Reputation:
App working fine on localhost but doesn't loads on netlify?
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: > [email protected] 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: > [email protected] 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: > [email protected] postinstall /opt/build/repo/node_modules/protobufjs
5:15:34 PM: > node scripts/postinstall
5:15:35 PM: > [email protected] 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: > [email protected] 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: [email protected] (node_modules/jest-haste-map/node_modules/fsevents):
5:15:37 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:15:37 PM: npm WARN
5:15:37 PM: optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/chokidar/node_modules/fsevents):
5:15:37 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
5:15:37 PM: npm
5:15:37 PM: WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
5:15:37 PM: npm
5:15:37 PM: WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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: > [email protected] 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://[email protected]/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.
Upvotes: 0
Views: 4173
Answers (2)
Matt Oestreich
Reputation: 8538
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.
Upvotes: 4
Joel H
Reputation: 990
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.
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.
Upvotes: 1
Related Questions
- netlify build command failed (create react app)-locally deployed ok
- Issue in deployment of react app in netlify
- React App working on localhost but not working on Netlify deploy because the API call is different
- React Js App is not working at localhost:3000 but it' works fine on localhost:8888(Netlify Dev)
- trouble deploying react app through netlify
- reactjs project working fine on local...but not working after deployment...any suggestion?
- Getting a Blank page when build folder is deployed to Netlify
- Why won’t my react site deploy to netlify?
- Network error from using localhost when web app is launched with Netlify
- Netlify site works in Chrome but not in Firefox, Opera, Edge