How to import react js file in electron main.js? - reactjs

Question

I am using react and electron building an electron app.
I am new to react and electron and I got a problem on how to import a function in react index.js to electron main.js
Why I need to import that function to main.js file?
Because I need to pass the dependencies of my react app from main.js and most of these dependecies are function dependencies.
Here is the function in index.js which receive the dependencies. Look at the function dependency
mport React from 'react';
import ReactDOM from 'react-dom/client';
import './App.scss'
import './configFile'
import './fonts/NotoSansSC.otf'
import { init as initConfigFile } from './configFile'
import { init as initLanguage } from './international/language'
import App from './App';
export function dependency(config, saveConfigFile, createNewUser) {
}
const root = ReactDOM.createRoot(document.getElementById('root'))
initLanguage()
initConfigFile({
parentPwd: null,
qa: {
'configQuestion1': '123',
'configQuestion2': '123',
'configQuestion3': '123'
},
timeRangesNotAllowToUseTheComputer: [
],
language: 'en',
onlyWorkForTheUsers: ['test'],
usernames: ['onTheRoad', 'test'],
timeZones: { '中国': 'cn', '英国': 'uk' },
choosedTimeZone: 'uk'
}, null, null)
root.render(
<App />
)
Here is the main.js file
const path = require('path');
const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
nodeIntegration: true,
},
});
// and load the index.html of the app.
// win.loadFile("index.html");
win.loadURL(`file://${path.join(__dirname, '../build/index.html')}`);
// Open the DevTools.
if (isDev) {
win.webContents.openDevTools({ mode: 'detach' });
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bars to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
I tried to import the file use require
const index = require('./index.js')
when I build the react app there is no error throwed but when I start the electron with electron . got error like this:
A JavaScript error occurred in the main process
Uncaught Exception:
/home/zxw/Desktop/bsd/src/index.js:1
import React from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1040:15)
at Module._compile (node:internal/modules/cjs/loader:1076:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1175:10)
at Module.load (node:internal/modules/cjs/loader:988:32)
at Module._load (node:internal/modules/cjs/loader:829:12)
at c._load (node:electron/js2c/asar_bundle:5:13339)
at Module.require (node:internal/modules/cjs/loader:1012:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/home/zxw/Desktop/bsd/public/main.js:4:15)
libva error: vaGetDriverNameByIndex() failed with unknown libva error, driver_name = (null)
And then I tried to load the function by import statement like below
import {dependency} from '../src/index'
When I build react app there is no error throwed but when I start the electron app I got error like this
A JavaScript error occurred in the main process
Uncaught Exception:
/home/zxw/Desktop/bsd/public/main.js:4
import {dependency} from '../src/index'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1040:15)
at Module._compile (node:internal/modules/cjs/loader:1076:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1175:10)
at Module.load (node:internal/modules/cjs/loader:988:32)
at Module._load (node:internal/modules/cjs/loader:829:12)
at c._load (node:electron/js2c/asar_bundle:5:13339)
at loadApplicationPackage (/home/zxw/Desktop/bsd/node_modules/electron/dist/resources/default_app.asar/main.js:121:16)
at Object.<anonymous> (/home/zxw/Desktop/bsd/node_modules/electron/dist/resources/default_app.asar/main.js:233:9)
at Module._compile (node:internal/modules/cjs/loader:1120:14)
libva error: vaGetDriverNameByIndex() failed with unknown libva error, driver_name = (null)
Is there is a way to pass the dependencies to the index.js from main.js ?

Answer 1

I fix it by throgh a dump way
First install the axios and the express
Then in the react src file add a file called appDependency
Here is the code
import axios from 'axios'
export function saveConfigFile(config) {
try {
axios.put('http://localhost:8888/config', config).then(response => {
if (response.status !== 200) {
throw response.data
}
})
} catch (e) {
console.error(`Error occrred while saving the config file: ${e}`)
throw e
}
}
export function createNewUser(username, pwd) {
try {
axios.post('http://localhost:8888/users', {
username: username,
pwd: pwd
}).then((response) => {
if (response.status !== 200) {
throw response.data
}
})
} catch (e) {
console.error(`Error occrred while creating new user. ${e}`)
throw e
}
}
async function fetchTheConfig() {
return await axios.get('http://localhost:8888/config').then((response) => {
console.log(`The response is ${JSON.stringify(response.data)}`)
if (response.status !== 200) {
throw response.data
} else {
return response.data
}
})
}
export function getConfigFile() {
try {
return fetchTheConfig()
} catch (e) {
console.error(`err occurred while fetching the config file. ${e}`)
throw e
}
}
And in the electron main.js file I use express created a server
const path = require('path');
const { app, BrowserWindow } = require('electron');
const express = require('express')
const exApp = express()
exApp.use(express.urlencoded())
exApp.use(express.json())
const config = {
parentPwd: null,
qa: {
'configQuestion1': '123',
'configQuestion2': '123',
'configQuestion3': '123'
},
timeRangesNotAllowToUseTheComputer: [
],
language: 'en',
onlyWorkForTheUsers: ['test'],
usernames: ['onTheRoad', 'test'],
timeZones: { '中国': 'cn', '英国': 'uk' },
choosedTimeZone: 'uk'
}
function configFile(req, res) {
console.log(`request received getConfigFile`)
res.status(200).send(config)
}
function saveConfigFile(req, res) {
console.log(`The body is ${req.body.timeRangesNotAllowToUseTheComputer}`)
res.status(200).send()
}
function createNewUser(req, res) {
console.log(`The req is `)
}
function appDependecys() {
exApp.get('/config', configFile)
exApp.put('/config', saveConfigFile)
exApp.post('/users', createNewUser)
exApp.listen(8888)
}
appDependecys()
In the react index.js I made the change to
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.scss'
import './configFile'
import './fonts/NotoSansSC.otf'
import { init as initConfigFile } from './configFile'
import { init as initLanguage } from './international/language'
import App from './App';
import { getConfigFile, saveConfigFile, createNewUser } from './appDependency'
const root = ReactDOM.createRoot(document.getElementById('root'))
getConfigFile().then((cfg) => {
console.log(`The fucking config is ${cfg}`)
initLanguage()
initConfigFile(cfg, saveConfigFile, createNewUser)
root.render(
<App />
)
})