无法将Vonage客户端SDK导入我的preact (vite)项目

Question

我有一个使用预演的维特项目。我想使用vonage的nexmo客户端SDK，但是当我使用ES方法导入时，它会破坏我的项目。

// app.tsx
import NexmoClient from 'nexmo-client';

我在控制台中得到以下错误。

index.js:19 Uncaught ReferenceError: global is not defined
    at index.js:19:19
    at index.js:12:22
    at node_modules/nexmo-client/dist/index.js (index.js:16:1)
    at __require (chunk-J43GMYXM.js?v=f3505250:11:50)
    at dep:nexmo-client:1:16

但是，如果我通过脚本标记导入它，它就能正常工作。

// index.html
<script src="node_modules/nexmo-client/dist/nexmoClient.js"></script>

// app.tsx
const NexmoClient = window.NexmoClient;

Answer 1

好的，这里有两个问题。

首先，NexmoClient尝试使用浏览器上不可用的global。

其次，NexmoClient依赖于socket.io-client，出于某种原因，Vite导入了socket.io-client的Node版本，该版本再次尝试使用浏览器上不可用的模块，即“子进程”。

要解决这两个问题，您可以向Vite提供以下配置，这应该确保生成的生成与兄弟兼容。

// vite.config.js or vite.config.ts

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

export default defineConfig({
  plugins: [preact()],
  define: {
    global: {},
  },
  resolve: {
    alias: {
      "xmlhttprequest-ssl": "./node_modules/engine.io-client/lib/xmlhttprequest.js"
    }
  }
})