在电子反应应用程序中导入 whatsapp-web.js nodejs 模块的问题答案

【问题标题】：Problem importing whatsapp-web.js nodejs module in electron react app在电子反应应用程序中导入 whatsapp-web.js nodejs 模块的问题
【发布时间】：2021-08-13 07:31:09
【问题描述】：

我正在尝试构建一个电子反应应用程序。我需要将此节点模块 https://www.npmjs.com/package/whatsapp-web.js 集成到我的电子反应应用程序中。我的电子 main.js 是这样的：

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      webSecurity: false,
    },
  });

  // and load the index.html of the app.
  mainWindow.loadURL("your ip address:3000");

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

我要导入 whatsapp-web.js 模块的 React 代码看起来像

import React from "react";
import styled from "styled-components";
const qrcode = require('qrcode-terminal');
const Client = require('whatsapp-web.js');
function Error() {
  var client = new Client();
  client.initialize();
  console.log(client);
  console.log(qrcode);
  return (
    <Container>
      <ErrorImage src="https://cdn4.iconfinder.com/data/icons/smiley-vol-3-2/48/134-512.png"></ErrorImage>
      <ErrorMessage>Oops, you are not connected to any number.</ErrorMessage>
    </Container>
  );
}

export default Error;

const Container = styled.div`
  display: flex;
  height: 100vh;
  width: 100%;
  padding-top: 20vh;
  position: center;
  /* align-items: center; */
  justify-content: center;
`;

const ErrorImage = styled.img`
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: contain;

  width: 25%;
  height: 25%;

  /* border: 2px solid black; */
`;

const ErrorMessage = styled.div`
  margin: 10px;
  width: 50%;
  height: 25%;
  /* top: 20px; */
  font-size: 30px;
  align-items: center;
  font-family: "Lucida Console", "Courier New", monospace;
  /* font-weight: bold; */
`;

现在每次我尝试导入 const {Client} = require('whatsapp-web.js') 它都会抛出如下错误： ** [0] ./node_modules/fluent-ffmpeg/index.js [0] 未找到模块：无法解析 'D:\Sunil\Zarir_app-main\Zarir_app-main\node_modules\fluent-ffmpeg' 中的 './lib-cov/fluent-ffmpeg' [0] 正在编译... [0] 编译失败。

我尝试了解决方案 https://github.com/fluent-ffmpeg/node-fluent-ffmpeg/issues/573#issuecomment-305408048 和其他资源，但仍然没有任何作用，只是在错误和错误中循环。如果您有任何相关信息，请提供帮助。谢谢。

【问题讨论】：

标签： node.js reactjs ffmpeg electron sharp

【解决方案1】：

webpack 插件好像没有生效

尝试：

# mac or linux
export FLUENTFFMPEG_COV=

# win
set FLUENTFFMPEG_COV=

yarn run build

因为：

fluent-ffmpeg相关源码：fluent-ffmpeg/node-fluent-ffmpeg/index.js

如果不行，建议你修改node_modules源码，在上面打印：process.env，验证变量是否有效。

最终解决方案：使用patch-package

【讨论】：