“Failed to load resource: net::ERR_FILE_NOT_FOUND” Electron

Cannot load

enter image description here

Resource of CalHeatmap not found when testing app in Electron. I check on my vscode that clicked new CalHeatmap(); will jump into the source file, so it should be work, but when try to npm start the resource not found.

Notes:

  • In load.js focus on imports and focus on line <script type="module" src="./load.js"></script> in index.html. Let me know if you still need info.
  • I already manage to get work of cal-heatmap in VITE then I try to make into Electron. In VITE project all it’s fine, but in Electron project it’s not.
  • If you need more information, let me know in the comment.

load.js

import CalHeatmap from './node_modules/cal-heatmap';
import './node_modules/cal-heatmap/cal-heatmap.css';

// Instantiate CalHeatmap
const cal = new CalHeatmap();

const _data = {
    data: {
        source: 'https://raw.githubusercontent.com/vega/vega/main/docs/data/seattle-weather.csv',
        type: 'csv',
        x: 'date',
        y: d => +d['temp_max'],
        groupY: 'max',
    },
    date: { start: new Date('2012-01-01') },
    range: 12,
    scale: {
        color: {
            type: 'threshold',
            range: ['#14432a', '#166b34', '#37a446', '#4dd05a'],
            domain: [10, 20, 30],
        },
    },
    domain: {
        type: 'month',
        gutter: 4,
        label: { text: 'MMM', textAlign: 'start', position: 'top' },
    },
    subDomain: { type: 'ghDay', radius: 2, width: 11, height: 11, gutter: 4 },
}


cal.paint(_data);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
    <div id="cal-heatmap"></div>
    <script type="module" src="./load.js"></script>
</body>
</html>