I want to use contextIsolation=true when i enabled contextIsolation=true and use import in renderer file like (import axios from 'axios') [it through this error message] https://i.stack.imgur.com/b7lsz.png
its webpack error , but having no solution to handle this issue
Preload.js file in nextron main folder
import { contextBridge, ipcRenderer } from 'electron'
//i try both import or require
contextBridge.exposeInMainWorld('electronAPI', {
setTitle: (title) => ipcRenderer.send('set-title', title)
})
**Renderer.js **
import React, { useEffect } from 'react';
import Head from 'next/head';
import Link from 'next/link';
//When i import axios here, it doesn't works
import axios from 'axios'
function Home() {
useEffect(() => {
const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
const title = titleInput.value
window.electronAPI?.setTitle(title)
});
data()
}, [])
return (
<React.Fragment>
<Head>
<title>Home - Nextron (with-typescript-tailwindcss)</title>
</Head>
Title: <input id="title" />
<button id="btn" type="button">Set</button>
</React.Fragment>
);
}
export default Home;
Background.ts nextron main folder
import { app, ipcMain, BrowserWindow } from "electron";
import serve from "electron-serve";
import path from "path";
import { createWindow } from "./helpers";
const isProd: boolean = process.env.NODE_ENV === "production";
if (isProd) {
serve({ directory: "app" });
} else {
app.setPath("userData", `${app.getPath("userData")} (development)`);
}
(async () => {
await app.whenReady();
const mainWindow = createWindow("main", {
width: 1000,
height: 600,
webPreferences: {
nodeIntegration:true,
contextIsolation: true,
preload: path.join(__dirname, "preload.js"),
},
});
if (isProd) {
await mainWindow.loadURL("app://./home.html");
} else {
const port = process.argv[2];
await mainWindow.loadURL(`http://localhost:${port}/home`);
mainWindow.webContents.openDevTools();
}
})();
ipcMain.on("set-title", (event, title) => {
const webContents = event.sender;
const win = BrowserWindow.fromWebContents(webContents);
win.setTitle(title);
console.log(title, "title");
});
app.on("window-all-closed", () => {
app.quit();
});
NextConfig.js
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.target = 'electron-renderer';
config.node = {
__dirname: true,
};
}
config.output.globalObject = 'this';
return config;
},
};
