0
75
ViewsHTML Component not rendering in electron react app
The TitleBar from Component.js is not rendering as html in my electron app, I get no errors and have confirmed the file paths.
Component.js,
import React, { Component } from "react";
export default class TitleBar extends React.Component {
render() {
return(
<div id="TitleBar">
<button id="minButton">_</button>
<button id="maxButton">[]</button>
<button id="exitButton">X</button>
</div>
);
}
}
export default class NavBar extends React.Component {
render() {
return(
<div id="NavBar">
<button id="homeButton">Home</button>
</div>
);
}
}
Index.js,
import React from "react";
import ReactDOM from "react-dom";
import TitleBar from "./Components.js";
console.log('intro');
ReactDOM.render(<TitleBar />, document.getElementById('app'));
index.html,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DevFlow</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main id="app"></main>
<script defer type="text/babel" src="./index.js"></script>
</body>
</html>
When I run the command "npm start" the application comes up, however there is no component within the tags. Any assistance would be greatly appreciated. I will also include my Main.js although I don't think it would be necessary to diagnose my issue. Thanks
Main.js,
const { app, BrowserWindow } = require('electron');
const path = require('path');
if (require('electron-squirrel-startup')) {
app.quit();
}
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
frame: false
});
mainWindow.loadFile(path.join(__dirname, 'index.html'));
mainWindow.webContents.openDevTools();
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
·
Juan Pablo Isaza
3 answers
Answer question0
Try adding <base href="/"> at the top of your index.html file.
·
Juan Pablo Isaza
Report
0
Maybe you need to add babel browser script:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DevFlow</title>
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
<main id="app"></main>
<script defer type="text/babel" src="./index.js" data-type="module"></script>
</body>
</html>
·
Juan Pablo Isaza
Report
0
Solved my issue:
the index.js file cannot be read by the browser interpreter because it needs to be compiled into vanilla JS.
Which I will be attempting to do with webpack
·
Juan Pablo Isaza
Report
Answer question