reactjs - İkinci pencerem neden Electron'da ipcRenderer'a erişemiyor

Bir Electron React TypeScript uygulaması oluşturuyorum ve electron contextBridge ile ilgili bir sorunla karşılaştım

İki pencerem var, her birinin kendi sayfası var. OverviewPage (ve ana pencerede) preload dosyasında contextBridge.exposeInMainWorld aracılığıyla açığa çıkarılan işlevlere erişmekte sorun yaşamıyorum. Ancak, aynı API çağrılarına SelfReport sayfasında erişmeye çalışırsam, aşağıdaki hatayı alıyorum

Yakalanmamış TypeError: Tanımsız olanın özellikleri okunamıyor ('closePopup' okunuyor)

Benim preload.ts dosyam

const { ipcRenderer, contextBridge } = require("electron");

contextBridge.exposeInMainWorld("api", {
 
  closePopup: (args: any) => ipcRenderer.send("close-popup", args)
  // other calls
});
export {};

Main.ts Ana Pencere

function createWindow(width: any, height: any) {
  const mainWindow = new BrowserWindow({
    width: width,
    height: height,
    fullscreen: true,
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, "/preload.js"),
    },
  });
  if (app.isPackaged) {
    mainWindow.loadFile(path.join(__dirname, "../index.html"));
  } else {
    mainWindow.loadURL("http://localhost:3000");
  }

Main.ts İkinci Pencere

let popupWindow;
function createPopupWindow(width: any, height: any) {
  popupWindow = new BrowserWindow({
    frame: false,
    resizable: false,
    movable: false,
    focusable: false,
    alwaysOnTop: true,
    skipTaskbar: true,
    height: 300,
    width: 400,
    x: width - 400,
    y: height - 300,

    webPreferences: {
      webPreferences: {
        contextIsolation: true,
        //preload: path.join(__dirname, "/preload.js"),    Do I need this?
      },
    },
  });
  Menu.setApplicationMenu(null);
  popupWindow.loadURL("http://localhost:3000/report"); 
}

React'te

window.api.closePopup({ close: true });

ve

class App extends Component {
    componentDidMount() {}

    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route element={<WithNavbar />}>
                        <Route path="/" element={<OverviewPage />} />          
                    </Route>
                    <Route element={<WithoutNavbar />}>
                        <Route path="/report" element={<SelfReport />} />
                    </Route>
                </Switch>
            </BrowserRouter>
        );
    }
}

react-app-env.d.ts içinde

/// <reference types="react-scripts" />

declare global {
    interface Window {
        api: any;
    }
}
export {};

Not

• Uygulamamı başlatırken, oluşturulmuş preload.js sürümünü kullanıyorum.
• Tüm React Sayfaları Fonksiyon Bileşenleridir

Cevap #1

Senin Main.ts dosyan (ikinci pencere) fazladan bir webPreferences seviyesine sahip. Bu ekstra seviye kaldırılabilir.

Ayrıca, window.api.closePopup çağrınızın çalışması için preload: satırınızın yorumunu kaldırmalısınız.

Main.ts (ikinci pencere)

let popupWindow;

function createPopupWindow(width: any, height: any) {
    popupWindow = new BrowserWindow({
        frame: false,
        resizable: false,
        movable: false,
        focusable: false,
        alwaysOnTop: true,
        skipTaskbar: true,
        height: 300,
        width: 400,
        x: width - 400,
        y: height - 300,
        webPreferences: {
            contextIsolation: true,
            preload: path.join(__dirname, "/preload.js") // Do I need this? Yes
        }
    });

    Menu.setApplicationMenu(null);
    popupWindow.loadURL("http://localhost:3000/report"); 
}