Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gatsby Build - Failed to load resource: net::ERR_FILE_NOT_FOUND #11618

Closed
tinypell3ts opened this issue Feb 7, 2019 · 5 comments
Closed

Gatsby Build - Failed to load resource: net::ERR_FILE_NOT_FOUND #11618

tinypell3ts opened this issue Feb 7, 2019 · 5 comments

Comments

@tinypell3ts
Copy link

tinypell3ts commented Feb 7, 2019

Description

Everything works fine with gatsby develop. When I run gatsby build and open the index.html, I get the following errors in my chrome console :

Failed to load resource: net::ERR_FILE_NOT_FOUND
/app-dc69784665b5b2447af7.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/12-c8bcf2beede8a33b73a6.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/0-2d176e3d90599d6f73e0.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/webpack-runtime-700bf56470507bf7cae4.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
me-2cff084cc16aec8c535df04ec427e4aa.jpg:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
The resource file:///static/d/173/path---index-6a9-NZuapzHg3X9TaN1iIixfv1W23E.json 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.

Environment

System:
OS: macOS 10.14.2
CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 71.0.3578.98
Safari: 12.0.2
npmPackages:
gatsby: ^2.0.116 => 2.0.116
gatsby-image: ^2.0.29 => 2.0.29
gatsby-plugin-manifest: ^2.0.17 => 2.0.17
gatsby-plugin-offline: ^2.0.22 => 2.0.22
gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
gatsby-plugin-sharp: ^2.0.20 => 2.0.20
gatsby-plugin-styled-components: ^3.0.5 => 3.0.5
gatsby-source-filesystem: ^2.0.20 => 2.0.20
gatsby-transformer-sharp: ^2.1.13 => 2.1.13
npmGlobalPackages:
gatsby-cli: 2.4.8

All the files exist. Are the paths correct? If not, how would I go about fixing this. Any help appreciated. Thanks

@justinformentin
Copy link
Contributor

Certain built files / dependencies need JS to load. Off the top of my head, gatsby image is one that won't work this way. So you need to either use gatsby serve to view your site, or deploy the public folder to a server. Netlify or Github pages are good to start with because they're free and guide you through setup.

@DSchau
Copy link
Contributor

DSchau commented Feb 7, 2019

@justinformentin that's true, but the general issue is that this isn't a supported pattern outside of Gatsby. It's a relative vs. absolute link issue.

e.g. given a folder with an index.html file and a script.js file. If you set up index.html like so:

<!doctype html>
<head>
  <title>Sample</title>
</head>
<body>
  <h1>Hello World</h1>
  <script src="/script.js"></script>
</body>

It will also fail with ERR: File not found.

In a long-winded way, you should use a local file server (not opening up files directly in a browser) if you want to view the contents of your public directory. We would highly recommend using gatsby serve which you can enable with a package.json script like so:

{
  "scripts": {
    "serve": "gatsby serve"
  }
}

You can then run npm run serve to view the contents of your public directory in a web browser.

Closing as answered, thanks for the question and thanks @justinformentin for the assist!

@samullman
Copy link

Is there any documentation explaining why opening index.html from /public in a web browser will not work ? It looks like JS might not be available, but I do not understand why that is the case ... thanks ...

@sreenathkspanikker
Copy link

When I open index.html in the browser showing the below-listed errors,
Does anybody know how to fix this?

GET file:///D:/component---src-pages-index-js-d97aff637f10d79d7db7.js net::ERR_FILE_NOT_FOUND
index.html:1 Access to link element resource at 'file:///D:/page-data/index/page-data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
index.html:19 GET file:///D:/page-data/index/page-data.json net::ERR_FAILED
index.html:1 Access to link element resource at 'file:///D:/page-data/app-data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
index.html:19 GET file:///D:/page-data/app-data.json net::ERR_FAILED
8index.html:19 GET file:///D:/static/ff991c99c44c0da32f2bc7b6285460b4/d8255/uaeu-01.jpg net::ERR_FILE_NOT_FOUND
2index.html:1 GET file:///D:/static/merriweather-regular-webfont-d282ff0d04911455ae2623b85f0bd13f.woff2 net::ERR_FILE_NOT_FOUND
/D:/icons/icon-48x48.png?v=edf3d310d67f8284a562bc3a58c3e761:1 GET file:///D:/icons/icon-48x48.png?v=edf3d310d67f8284a562bc3a58c3e761 net::ERR_FILE_NOT_FOUND

@kimalphaville
Copy link

Is this already resolved? Im having the same issue here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants