Why won't React production build run on the browser?

Probably you've not noticed yet but I don't think your html file is able to import css and script files correctly. When I look at your file structure, I see the everything about build is under the build folder. But in your html file, there are slashes ("/") before the file paths. That's why browser is looking for those files under the parent of the "build". Try to remove slashes.

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
      <meta name="theme-color" content="#000000">
      <link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico">
      <title>React App</title>
      <style></style>
      <link href="static/css/main.65027555.css" rel="stylesheet">
    </head>
    <body
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <script type="text/javascript" src="static/js/main.316f1156.js"></script>
    </body>
</html>

https://github.com/facebookincubator/create-react-app/issues/1487

The above problem can be overcome if you add - "homepage":".",

in your package.json. This is not official but a good hack to follow.


To fix this problem go to your build folder then you will see manifest.json file, open it and you will see your manifest.json have:

"start_url": ".",

change it to

"start_url": "/",

there is alternative way to fix the problem:

before your react project build go to your package.json file and specify homepage property with . value or maybe with your site base url, see example:

{
   ....
   "homepage": ".",
   ......
}

Tags:

Reactjs

Recent Posts