Не рендерится React в Electron приложении.

Question

Не рендерится React в Electron приложении.

dojo mafia3 Ученик (44), на голосовании 3 месяца назад

✋.
Решил начать изучать Electron, а параллельно с ним React. Вот мой index.html:

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Дефолтный html</title> 
</head> 
<body> 
<div id="root"></div> 
<script src="../dist/render.js"></script> 
</body> 
</html>

render.tsx:

 import React from 'react'; 
import ReactDOM from 'react-dom'; 
 
const App: React.FC = () => { 
    return ( 
        <h1>Test</h1> 
    ); 
}; 
 
ReactDOM.render(<App />, document.getElementById('root'));

JS render, сбилженный через webpack:

 "use strict"; 
var __importDefault = (this && this.__importDefault) || function (mod) { 
    return (mod && mod.__esModule) ? mod : { "default": mod }; 
}; 
Object.defineProperty(exports, "__esModule", { value: true }); 
const react_1 = __importDefault(require("react")); 
const react_dom_1 = __importDefault(require("react-dom")); 
const App = () => { 
    return (react_1.default.createElement("h1", null, "Test")); 
}; 
react_dom_1.default.render(react_1.default.createElement(App, null), document.getElementById('root'));

main.ts:

 import { app, BrowserWindow, Menu } from 'electron'; 
import * as path from 'path'; 
 
function createWindow() { 
    const mainWindow = new BrowserWindow({ 
        width: 800, 
        height: 600, 
        webPreferences: { 
            preload: path.join(__dirname, 'preload.js'), 
        }, 
    }); 
 
    mainWindow.loadFile(path.join(__dirname, 'index.html')); 
 
    Menu.setApplicationMenu(null); 
} 
 
app.whenReady().then(() => { 
    createWindow(); 
 
    app.on('activate', () => { 
        if (BrowserWindow.getAllWindows().length === 0) { 
            createWindow(); 
        } 
    }); 
}); 
 
app.on('window-all-closed', () => { 
    if (process.platform !== 'darwin') { 
        app.quit(); 
    } 
});

Ну и остальные файлы, если надо, могу скинуть.
Проблема заключается в том, что скрипт рендера не работает. Он подключен в html, но в приложении никаких надписей нету. В чем может быть проблема?

Answer 1

Проблема может заключаться в различных аспектах, включая неправильное подключение модулей или ошибки при компиляции кода. Вот несколько моментов, которые стоит проверить:
1. Убедитесь, что путь к файлу render.js указан правильно в HTML коде.
2. Проверьте, что файл render.js действительно загружается и выполняет свои функции. Возможно, нужно добавить логирование или отладочные сообщения, чтобы отслеживать выполнение кода.
3. Убедитесь, что компоненты React подключены корректно. Попробуйте использовать библиотеку типа Babel для транспиляции ES6 кода в совместимый с браузером формат.
4. Проверьте, нет ли ошибок в консоли разработчика вашего браузера или терминале. Это поможет выявить возможные проблемы на этапе компиляции или выполнения кода.
5. Если вы используете препроцессоры, убедитесь, что они настроены правильно и работают без ошибок.

Если все эти шаги были выполнены, но проблема осталась, возможно, есть ещё какие-то особенности в вашем проекте, которые необходимо учесть.