Electron: Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css
I have such a structure in the application:
I write in head my index.html:
<link rel="stylesheet" href="css/app.css"/>
run electron and get error:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css
Please everyone, tell me, how should I set the path to the file?
RinatMullayanov
All 26 comments
Related issue: #1747.
lolmaus
on 25 May 2015
Try this as an alternative way to get around this path issue:
<html>
<head>
<title></title>
</head>
<body>
<script>
var link = document.createElement('link')
link.setAttribute('rel', 'stylesheet')
link.setAttribute('href', require('path').join(__dirname, 'css', 'app.css'))
document.head.appendChild(link)
</script>
</body>
</html>
shama
on 25 May 2015
@shama Thanks for snippet.
I get an error because the use <base href="/">, without this error does not occur.
Sample work https://github.com/RinatMullayanov/angular-boilerplate branch electron.
RinatMullayanov
on 25 May 2015
Have the same issue too. Electron tries to load resources from C:/ , relative paths not working.
Setting full path is not an option, files will not be loading if we will place application on another path.
odragora
on 20 Feb 2016
I have the same issue getting some font
I have added this to my CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
I have even tried adding this to my html:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
I have also tried:
<link rel="stylesheet" type="text/css" href="http//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Open+Sans" />
but I get this error:
Failed to load resource: net::ERR_CONNECTION_REFUSED
BesatZardosht
on 13 Apr 2016
If this occur when having <base href="/"> in the index.html, just replace it by <base href="./">.
Myrga
on 31 Oct 2016
@Myrga you're a life save. I've been looking for an answer for 5 days now, no doc on this, until I came across this old post. Thanks a lot
guibot17
on 14 Nov 2016
ps: if you came here and are using create-react-app, try putting "homepage": "./", in your package.json. (Although apparently this is not currently supported so you might have other issues with fonts and such, which might require moving those assets to your /public folder)
johnmw
on 12 Jan 2017
thank you so much
breaded
on 17 Feb 2017
@BesatZardosht You've got a typo in your URL:
<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Open+Sans" />
should be:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />
(note the :)
anaisbetts
on 17 Feb 2017
In case you are here with the same problem using Webpack 2.x, React and/or Redux, there is a chance that this would solve your problem:
Search your project directory for "publicPath" and change its value from
/to./
with all the different available boilerplates this setting may be found in different locations, In my case usingredux-cliwhich usesredux-starter-kit, it was in theproject.config.js:
publicPath: './',
Also if you are building for Electron you may need to add/modify the Webpack target property.
Stay Happy!! 😄
mim-Armand
on 17 Jun 2017
Had same problem, Myrga's solution worked. I think
hexthedev
on 27 Jul 2017
Decided to remake my application in React. Once I added file-loader to my project, I started getting this issue again. changing the publicPath property in webpack.config.js to a relative path (for me ./app/ rather than /app/) fixed the problem.
P.S. seems that the dev server hates this. If you make this change and want to run a webpack dev server this change will confuse it. You'll need to switch back and forth as you go from working directly in electron and working on dev server (The reason i do this is to do css work, I find the dev server faster and more stable)
hexthedev
on 4 Aug 2017
You can save the html file as "save as web page" then try to open in chrome.
This worked for me.
emirpoy
on 22 Aug 2017
how to solve "Failed to load resource: net::ERR_FILE_NOT_FOUND"
whenever I add an image using "CSS" it throws this error. Do you guys have any solution for it???
not only image but the files like font file, it gives the same error.
Tahawahid
on 20 Jun 2018
@Tahawahid @RinatMullayanov
It's because of your all files are being served from the local file system rather than the relative app path.
The solution is to intercept the file protocol. Do following changes in main.js file
Main.js
mainWindow = new BrowserWindow({width: 1100, height: 700, icon: __dirname + '/icon.ico'})
mainWindow.loadURL(url.format({
pathname:'index.html',
protocol: 'file',
slashes: true
}))
app.on('ready', () => {
protocol.interceptFileProtocol('file', (request, callback) => {
const url = request.url.substr(7) /* all urls start with 'file://' */
callback({ path: path.normalize(${__dirname}/${url})})
}, (err) => {
if (err) console.error('Failed to register protocol')
})
createWindow() /* callback function */
})
itsaakashpatel
on 9 Jul 2018
a
rkmyowin
on 8 Sep 2018
@Tahawahid @RinatMullayanov
It's because of your all files are being served from the local file system rather than the relative app path.
The solution is to intercept the file protocol. Do following changes in main.js fileMain.js
mainWindow = new BrowserWindow({width: 1100, height: 700, icon: __dirname + '/icon.ico'}) mainWindow.loadURL(url.format({ pathname:'index.html', protocol: 'file', slashes: true }))
app.on('ready', () => { protocol.interceptFileProtocol('file', (request, callback) => { const url = request.url.substr(7) /* all urls start with 'file://' */ callback({ path: path.normalize(${__dirname}/${url})}) }, (err) => { if (err) console.error('Failed to register protocol') }) createWindow() /* callback function */ })
？
xiaomizhou66
on 22 Apr 2019
Path issue. Browser search your file in D:/css/app.css. This because somewhere in your code, have mentioned a wrong path. If you are given a path like /css/... this will search in D:/
Yuresh
on 27 Apr 2019
This also did the trick. Thanks for Mr. @itsaakashpatel for the insight.
// ...
const { protocol } = require('electron')
// ...
// run the next block right before <BrowserWindow>.loadFile()
const htmlRootDir = 'dist/'
const indexFile = 'index.html'
protocol.interceptFileProtocol(
'file',
(request, callback) => {
const url = request.url.substr(7) // strip "file://" out of all urls
if (request.url.endsWith(indexFile)) {
callback({ path: url })
} else {
callback({ path: path.normalize(`${__dirname}/${htmlRootDir}/${url}`) })
}
},
error => console.error(error)
)
// ...
Just replace htmlRootDir and/or indexFile for your expectations.
_Tested on Linux_
leodutra
on 15 Jul 2019
@Myrga Thanks for saving my day. Loved your answer :)
zearaez
on 16 Jul 2019
@Myrga well, you would probably set "homepage": "./" in the package.json instead of hard-coding these things.
defusioner
on 2 Sep 2019
@Myrga well, you would probably set
"homepage": "./"in thepackage.jsoninstead of hard-coding these things.
Please @defusioner, is there any doc on this?
leodutra
on 2 Sep 2019
@leodutra humm, I'm using react-cra and they are able to produce such config: https://create-react-app.dev/docs/deployment#building-for-relative-paths
defusioner
on 3 Sep 2019
@defusioner Hum, that explains a lot.
Looks like this is not on the electron level, it's more a homepage for react apps, where this will replace the default root for any relative or root link.
In my case, using a Vue.js dist or raw electron, this probably won't work.
I think this package approach should be taken in consideration... like some electronBasePath on package.json
leodutra
on 3 Sep 2019
I think the win.loadFile('index.html') is like a shit! After we compile it to EXE file by using electron-builder. It'll always show DevTools failed to load SourceMap: Could not load content for file:///C:/User..../resources/app.asar/bootstrap.min.css.map.
But the win.loadURL() works well.
I spent 8 hours to find out that this is a bug that I can't solve.
Then I realized this bug is not important, because the map file is indeed imported.
For me, the real bug was caused by alert(): https://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert
yingshaoxo
on 7 Jun 2020
Related issues
chonsser
·
3Comments
tenry92
·
3Comments
christiangenco
·
3Comments
dangan-ronpa
·
3Comments
feross
·
3Comments
Most helpful comment
If this occur when having
<base href="/">in the index.html, just replace it by<base href="./">.