reactjs - 无法使用 Nightmare.js

Question

我正在用打字稿制作电子应用程序。我正在使用以下样板。 https://github.com/diego3g/electron-typescript-react

我在里面使用 Nightmare.js。无法使用它。得到以下

TypeError: window.Main.nightmare(...).goto is not a function
    at Function.eval [as loginUser] (NightmareUtils.ts?fe62:9)
    at handleSayHello (index.tsx?6a78:13)
    at HTMLUnknownElement.callCallback (react-dom.development.js?6ac8:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?6ac8:3994)
    at invokeGuardedCallback (react-dom.development.js?6ac8:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?6ac8:4070)
    at executeDispatch (react-dom.development.js?6ac8:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js?6ac8:8275)
    at processDispatchQueue (react-dom.development.js?6ac8:8288)
    at dispatchEventsForPlugins (react-dom.development.js?6ac8:8299)

这是我调用函数的代码

export class NightmareUtils {
    static loginUser = (username: string, password: string, onDone: () => void) => {
        window.Main.sendMessage("Login")

        // console.log(window.Main.nightmare())
        
        try {
            window.Main.nightmare()
                .goto("https://www.linkedin.com/login")
                .wait(`body`)
                .type(`input[name="session_key"]`, username)
                .type(`input[name="session_password"]`, password)
                .click(`button[class='btn__primary--large from__button--floating']`)
                .wait(`body`)
                // .wait(20000)
                .then(() => {
                    onDone()
                })
                .catch((e) => {
                    console.log(e)
                })
        } catch (e: any) {
            console.log(e)
        }

    }
}

我正在使用 webpack 预加载以下代码 brige.ts

// @ts-nocheck
import { contextBridge, ipcRenderer } from 'electron'
import Nightmare from 'nightmare'

export const api = {
  /**
   * Here you can expose functions to the renderer process
   * so they can interact with the main (electron) side
   * without security problems.
   *
   * The function below can accessed using `window.Main.sayHello`
   */

  sendMessage: (message: string) => {
    ipcRenderer.send('message', message)
  },


  /**
   * Provide an easier way to listen to events
   */
  on: (channel: string, callback: Function) => {
    ipcRenderer.on(channel, (_, data) => callback(data))
  },

  nightmare: () => { 
    return new Nightmare({
      show: true
    }) 
  }
}


contextBridge.exposeInMainWorld('Main', api)

此视频中解释了一些发现 https://www.loom.com/share/e0fac6e0bcdc4291968e6d03f0f0b9cc

标签： reactjstypescriptwebpackelectronnightmare