Build results in a blank screen #18

Pedneri1 · 2019-10-20T20:42:55Z

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

> [email protected] 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 ?

The text was updated successfully, but these errors were encountered:

yogithesymbian · 2020-07-08T01:35:57Z

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 · 2021-02-13T23:31:44Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build results in a blank screen #18

Build results in a blank screen #18

Pedneri1 commented Oct 20, 2019 •

edited

yogithesymbian commented Jul 8, 2020 •

edited

isantiago95 commented Feb 13, 2021 •

edited

Build results in a blank screen #18

Build results in a blank screen #18

Comments

Pedneri1 commented Oct 20, 2019 • edited

yogithesymbian commented Jul 8, 2020 • edited

isantiago95 commented Feb 13, 2021 • edited

Pedneri1 commented Oct 20, 2019 •

edited

yogithesymbian commented Jul 8, 2020 •

edited

isantiago95 commented Feb 13, 2021 •

edited