Gatsby & contentful site incorrect files path in public build

Question

Trying to deploy Gatsby site with Contentful CMS. Everything works just fine in development mode - things get rough when I'm trying to build.

Gatsby build command deploys the site, all seems OK at first, but it throws errors preventing my content from loading.

Easier way to show it is just to check my github LIVE: GIT LIVE

Short description: seems like path to files error - trying to GET files from direct path (local F:\ path for me -> my main github page for git LIVE (name.github.io/...))

I'm having the very same problem with raw Gatsby website built.

My (raw) gatsby main site goes like:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <meta http-equiv="x-ua-compatible" content="ie=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 <link rel="preload" href="/component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />
 <link rel="preload" href="/component---src-pages-index-js-df93eb0c88a52638909b.js" as="script" />
 <link rel="preload" href="/path---index-a0e39f21c11f6a62c5ab.js" as="script" />
 <link rel="preload" href="/app-29169f9e7be0e183bc9a.js" as="script" />
 <link rel="preload" href="/commons-fcbb8af1639fee4f6844.js" as="script" />
 <title data-react-helmet="true">Gatsby Default Starter</title>
 <meta data-react-helmet="true" name="description" content="Sample" />
 <meta data-react-helmet="true" name="keywords" content="sample, something" />
 <style id="gatsby-inlined-css">
  
 </style>
</head>

<body>
 <div id="___gatsby">
  <div data-reactroot="" data-reactid="1" data-react-checksum="238678071">
   <!-- react-empty: 2 -->
   <div style="background:rebeccapurple;margin-bottom:1.45rem;" data-reactid="3">
    <div style="margin:0 auto;max-width:960px;padding:1.45rem 1.0875rem;" data-reactid="4">
     <h1 style="margin:0;" data-reactid="5"><a style="color:white;text-decoration:none;" href="/" data-reactid="6">Gatsby
       Default Starter</a></h1>
    </div>
   </div>
   <div style="margin:0 auto;max-width:960px;padding:0px 1.0875rem 1.45rem;padding-top:0;" data-reactid="7">
    <div data-reactid="8">
     <h1 data-reactid="9">Hi people</h1>
     <p data-reactid="10">Welcome to your new Gatsby site.</p>
     <p data-reactid="11">Now go build something great.</p><a href="/page-2/" data-reactid="12">Go to page 2</a>
    </div>
   </div>
  </div>
 </div>
 <script id="webpack-manifest">
  /*<![CDATA[*/
  window.webpackManifest = {
   "231608221292675": "app-29169f9e7be0e183bc9a.js",
   "162898551421021": "component---src-pages-404-js-4503918ea3a16cfcdb75.js",
   "35783957827783": "component---src-pages-index-js-df93eb0c88a52638909b.js",
   "218538773642512": "component---src-pages-page-2-js-1d4f0f19c1c44398ab65.js",
   "60335399758886": "path----cac63ff5c1b42581353c.js",
   "254022195166212": "path---404-a0e39f21c11f6a62c5ab.js",
   "142629428675168": "path---index-a0e39f21c11f6a62c5ab.js",
   "135728916539164": "path---page-2-a0e39f21c11f6a62c5ab.js",
   "178698757827068": "path---404-html-a0e39f21c11f6a62c5ab.js",
   "114276838955818": "component---src-layouts-index-js-07253e04741551c85ebc.js"
  } /*]]>*/
 </script>
 <script>
  /*<![CDATA[*/
  ["/commons-fcbb8af1639fee4f6844.js", "/app-29169f9e7be0e183bc9a.js", "/path---index-a0e39f21c11f6a62c5ab.js",
   "/component---src-pages-index-js-df93eb0c88a52638909b.js",
   "/component---src-layouts-index-js-07253e04741551c85ebc.js"
  ].forEach(function (s) {
   document.write('<script src="' + s + '" defer></' + 'script>')
  }) /*]]>*/
 </script>
</body>

</html>

Resolving path manually e.g replacing link href like this:

<link rel="preload" href="/component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />

into (just adding the dot)

<link rel="preload" href="./component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />

makes this particular error go away, throwing warning as below:

The resource file://(path here) was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

and another error (pointed NOT at line from HTML HEAD anymore but at the last script (signed as CDATA)

<script>
    /*<![CDATA[*/
    ["/commons-fcbb8af1639fee4f6844.js", "/app-29169f9e7be0e183bc9a.js", "/path---index-a0e39f21c11f6a62c5ab.js",
        "/component---src-pages-index-js-df93eb0c88a52638909b.js",
        "/component---src-layouts-index-js-07253e04741551c85ebc.js"
    ].forEach(function (s) {
        document.write('<script src="' + s + '" defer></' + 'script>')
    }) /*]]>*/
</script>

Going further - changing path here creates another "funny" thing. When trying to load the page, it "flashes" site with styles and all (just for a split second) and then throws multiple errors like

A page wasn't found for "/F:/HTML/TEST-2/site/public/index.html
bundle loading error true
Loading the component for /404.html failed
bundle loading error true
Loading the JSON for /404.html failed

I'm aware that I shouldn't be doing this all fix-the-path-by-myself thing in working process, however I have no idea where the problem lies in.

Hope I made my problem clear :)

When you run `gatsby develop` on the console, what error feedback do you get? Specifically, you should see the issues with the build when you run it in development mode. It doesn't look like you're ready to deploy with all these errors. — serraosays, Sep 11 '18 at 10:28
That's the point - gatsby develop throws no errors or warnings, so does browser console. Seems like everything works as it should, until the point I get to build my website... — Emzaw, Sep 11 '18 at 12:43
Yup, I do build locally, but local version is as I described above, full of errors. — Emzaw, Sep 11 '18 at 23:46

score 1 · Answer 1 · answered Sep 13 '18 at 19:03

I did a deeper dive on the errors present on your site.

1- The first pair of errors I see is related to Font Awesome:

Subresource Integrity: The resource 'https://use.fontawesome.com/releases/v5.3.1/css/solid.css' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.

Subresource Integrity: The resource 'https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.

These related to CORS for the integrity attribute on your Font Awesome includes (line 29 in your compressed codebase).

<link data-react-helmet="true" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/solid.css" integrity="sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW"/>
<link data-react-helmet="true" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7"/>

Just delete the checksum hash, or you might want to check why these aren't valid. This is why the CSS is flashing ok; Chrome checks the hash, sees it's invalid and removes it from the DOM.

2- The second set of errors has a bunch of your JS files 404ing. The errors look like this in Chrome DevTools:

GET https://emzawadzki.github.io/component---src-layouts-index-js-4386bcf88f311dc59346.js net::ERR_ABORTED 404

If we isolate where the paths are coming from for these files, you can trace them to your webpack build's manifest (line 738):

<script id="webpack-manifest">
    /*<![CDATA[*/
    window.webpackManifest = {
        "231608221292675": "app-cdbd5391462f32fb5915.js",
        "162898551421021": "component---src-pages-404-js-f6662393a31fb18d5e07.js",
        "35783957827783": "component---src-pages-index-js-6fe4a58b68048902490d.js",
        "60335399758886": "path----557518bd178906f8d58a.js",
        "254022195166212": "path---404-a0e39f21c11f6a62c5ab.js",
        "142629428675168": "path---index-a0e39f21c11f6a62c5ab.js",
        "178698757827068": "path---404-html-a0e39f21c11f6a62c5ab.js",
        "114276838955818": "component---src-layouts-index-js-4386bcf88f311dc59346.js"
    }
    /*]]>*/
</script>

The error is in your webpack build. Gatsby hides most of the webpack building stuff behind the scenes, so the error is likely coming out of your gatsby-config.js file. If you can tweak that, I'm pretty sure that's where this second problem is coming from. Comment out everything you aren't using and double check your local error logs.

Gatsby & contentful site incorrect files path in public build

1 Answers1