javascripthtmljsonelectron

Electron - Failed to load resource: net::ERR_FILE_NOT_FOUND

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:

directory

how would I go about solving this issue?

Solution

  • I 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>
  ...
  ..