relatively new to electron area:
I tried a few method to solve this issue such as using ./ instead of / or adding "homepage" : in packaging.json and still won't work.
I was trying to import these two
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
my json:
{
"name": "login",
"version": "1.0.0",
"homepage":"./",
"main": "main.js",
....
}
html:
<!DOCTYPE html>
<head>
<title>Infomation Board </title>
<link rel="stylesheet" href="../styles/styles.css" />
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
</head>
<body>
...
..
And when I run debug, I get either of these errors:
GET file:///C:/node_modules/gridstack/dist/gridstack-h5.js net::ERR_FILE_NOT_FOUND
GETfile:///C:/Users/whatd/OneDrive/Desktop/Amazon%20Verson%202/src/directories/node_modules/gridstack/dist/gridstack.min.css net::ERR_FILE_NOT_FOUND
directory:
how would I go about solving this issue?
relatively new to electron area:
I tried a few method to solve this issue such as using ./ instead of / or adding "homepage" : in packaging.json and still won't work.
I was trying to import these two
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
my json:
{
"name": "login",
"version": "1.0.0",
"homepage":"./",
"main": "main.js",
....
}
html:
<!DOCTYPE html>
<head>
<title>Infomation Board </title>
<link rel="stylesheet" href="../styles/styles.css" />
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
</head>
<body>
...
..
And when I run debug, I get either of these errors:
GET file:///C:/node_modules/gridstack/dist/gridstack-h5.js net::ERR_FILE_NOT_FOUND
GETfile:///C:/Users/whatd/OneDrive/Desktop/Amazon%20Verson%202/src/directories/node_modules/gridstack/dist/gridstack.min.css net::ERR_FILE_NOT_FOUND
directory:
how would I go about solving this issue?
Share Improve this question asked Feb 18, 2022 at 6:50 ZyaanZyaan 1091 gold badge2 silver badges10 bronze badges 3- Did u install gridstack using npm? – Deepak Mukka Commented Feb 18, 2022 at 10:36
-
Like with the
styles.css, you could provide a correct relative path: e.g.../../node_modules/gridstack/dist/gridstack-h5.js– snwflk Commented Feb 18, 2022 at 12:20 - 1 @DeepakMukka Yes i did and as for snwflk I tried and still throw me the same errors – Zyaan Commented Feb 18, 2022 at 22:06
2 Answers
Reset to default 4I think the "homepage": line in your package.json file is a React thing. If you are not using React then you can remove the "homepage": line.
The "main": line in your package.json file is the entry point of your Electron app. Therefore, if the js file that will kick things off is "main.js" then "main": "main.js" is correct.
package.json
{
"name": "login",
"version": "1.0.0",
"main": "main.js",
...
}
If you are creating your info-board window in your main.js file then you would do so like this.
main.js
// Electron module(s).
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
// Node module(s).
const nodePath = require('path');
// Declare window (no garbage collect).
let infoBoardWindow;
// Application is now ready to start.
electronApp.on('ready', () => {
// Create the info-board window.
infoBoardWindow = new electronBrowserWindow({
x: 0,
y: 0,
width: 800,
height: 600,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
worldSafeExecuteJavaScript: true,
enableRemoteModule: false,
preload: nodePath.join(__dirname, 'preload.js')
}
});
// Load the info-board window.
infoBoardWindow.loadFile(nodePath.join(__dirname, './src/directories/infoboard.html'))
.then(() => { infoBoardWindow.show(); })
});
Now, to reference both the gridstack css and js files in your infoboard.html file use relative paths (./, ../), not an absolute path (/). IE: You need to step-up 2 directory levels to get access to the node_modules directory.
infoboard.html
<!DOCTYPE html>
<head>
<title>Infomation Board </title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="stylesheet" href="../../node_modules/gridstack/dist/gridstack.min.css" />
<script src="../../node_modules/gridstack/dist/gridstack-h5.js"></script>
</head>
<body>
...
..
If this is happening when having <base href="/"> in the index.html, just replace it by <base href="./">
Or if you have any other url, use relative URL by adding ./ at beginning.