Build results in a blank screen
Pedneri1 opened this issue · 2 comments
Pedneri1 commented
After cloning the repo, making the changes on .gitmodules told by @design-revision here and npm installing the dependencies the build results in a blank screen:
The console output for the build is:
npm run build
> shards-dashboard-lite-react@1.0.0 build /Users/pedneri1/Desktop/shards-dashboard-react
> cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
251.8 KB build/static/js/1.6fe397d4.chunk.js
26.88 KB build/static/js/main.75140f8f.chunk.js
25.17 KB build/static/css/1.db30c455.chunk.css
18.41 KB build/static/css/main.491f31e8.chunk.css
763 B build/static/js/runtime~main.4a686d48.js
The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
http://bit.ly/CRA-deploy
the build folder has these files:
The generated index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="./favicon.ico" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"
rel="stylesheet"
/>
<link rel="manifest" href="./manifest.json" />
<title>Shards Dashboard Lite React</title>
<link href="./static/css/1.db30c455.chunk.css" rel="stylesheet" />
<link href="./static/css/main.491f31e8.chunk.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
!(function(l) {
function e(e) {
for (
var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = [];
f < n.length;
f++
)
(t = n[f]), p[t] && i.push(p[t][0]), (p[t] = 0);
for (r in o)
Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]);
for (s && s(e); i.length; ) i.shift()();
return c.push.apply(c, u || []), a();
}
function a() {
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 !== p[u] && (n = !1);
}
n && (c.splice(r--, 1), (e = f((f.s = t[0]))));
}
return e;
}
var t = {},
p = { 2: 0 },
c = [];
function f(e) {
if (t[e]) return t[e].exports;
var r = (t[e] = { i: e, l: !1, exports: {} });
return l[e].call(r.exports, r, r.exports, f), (r.l = !0), r.exports;
}
(f.m = l),
(f.c = t),
(f.d = function(e, r, t) {
f.o(e, r) ||
Object.defineProperty(e, r, { enumerable: !0, get: t });
}),
(f.r = function(e) {
"undefined" != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
Object.defineProperty(e, "__esModule", { value: !0 });
}),
(f.t = function(r, e) {
if ((1 & e && (r = f(r)), 8 & e)) return r;
if (4 & e && "object" == typeof r && r && r.__esModule) return r;
var t = Object.create(null);
if (
(f.r(t),
Object.defineProperty(t, "default", { enumerable: !0, value: r }),
2 & e && "string" != typeof r)
)
for (var n in r)
f.d(
t,
n,
function(e) {
return r[e];
}.bind(null, n)
);
return t;
}),
(f.n = function(e) {
var r =
e && e.__esModule
? function() {
return e.default;
}
: function() {
return e;
};
return f.d(r, "a", r), r;
}),
(f.o = function(e, r) {
return Object.prototype.hasOwnProperty.call(e, r);
}),
(f.p = "./");
var r = (window.webpackJsonp = window.webpackJsonp || []),
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;
a();
})([]);</script
><script src="./static/js/1.6fe397d4.chunk.js"></script
><script src="./static/js/main.75140f8f.chunk.js"></script>
</body>
</html>
And the Chrome console output is empty. What is going on ? Am I doing something wrong ?
yogithesymbian commented
me too , i have blank page with no console log. i have try default react project and deploy is fine , nothing wrong.
but with this template, why i got blank page .
in localhost is fine
but deploy server is blank page
have try with default package.json still blank
and try modif the file still blank ...
package.json
{
"name": "shards-dashboard-lite-react",
"version": "1.0.0",
"private": true,
"homepage": "./",
"dependencies": {
"axios": "^0.19.2",
"camelize": "^1.0.0",
"chart.js": "^2.7.3",
"classnames": "^2.2.6",
"cross-env": "^5.2.0",
"dateformat": "^3.0.3",
"flux": "^3.1.3",
"lodash.find": "^4.6.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-ga": "^2.5.6",
"react-quill": "^1.3.3",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"shards-react": "^1.0.0",
"shortid": "^2.2.14"
},
"scripts": {
"start": "react-scripts start",
"build:prod": "npm run build",
"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"
]
}
}
isantiago95 commented
Hello guys!
I have the same issue but in my case I saw in the console an error that said
unexpected token '<'
BTW my app ran perfectly the first time it was loaded, then if I reload the page I just saw a blank page
I did the following and it works!!
in the package.json I just deleted the
"homepage": "./",
and change the build script to:
"build": "react-scripts build",
With that changes my package.json was like this:
{
"name": "my-app",
"version": "1.0.0",
"private": true,
"dependencies": {
"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.11.0",
"firebase": "^8.0.1",
"flux": "^3.1.3",
"lodash.find": "^4.6.0",
"moment": "^2.29.1",
"node-sass": "4.14.1",
"react": "^16.6.3",
"react-datepicker": "^3.4.1",
"react-devtools": "^4.10.1",
"react-dom": "^16.6.3",
"react-redux": "^7.2.2",
"react-router-dom": "^5.1.2",
"react-scripts": "2.1.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"shards-react": "^1.0.0"
},
"scripts": {
"dev": "react-scripts start",
"build:prod": "npm run build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"reactide-server": "webpack-dev-server --config reactide.config.js --mode development --hot"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/helper-regex": "^7.10.5"
}
}
(I also deleted all my comments in JSX, because in the build folder one of the js files has to many errors related with JSX comments)
Hope this can help someone, at least it works for me :D