如何在 Next.JS 网站中实现 Tawk.to 小部件？

Question

我已经尝试过他们的@tawk.to/tawk-messenger-react插件文档上写的内容？

我做了一个类似的组件/components/Chat.js

import TawkMessengerReact from "@tawk.to/tawk-messenger-react";

export default function Chat() {
  return (
    <div className="chat">
      <TawkMessengerReact
        propertyId={process.env.NEXT_PUBLIC_TWAKTO_PROPERTY_ID}
        widgetId={process.env.NEXT_PUBLIC_TWAKTO_WIDGET_ID}
      />
    </div>
  );
}

Layout.js但是在导入组件后_app.js会出现类似的错误

E:\PROJECT\FOLDER\node_modules\@tawk.to\tawk-messenger-react\src\index.js:4
import { forwardRef, useEffect, useImperativeHandle } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.@tawk.to/tawk-messenger-react (E:\PROJECT\FOLDER\.next\server\pages\_app.js:240:18)
    at __webpack_require__ (E:\PROJECT\FOLDER\.next\server\webpack-runtime.js:33:42)

我应该怎么做才能使其正常运行？

Answer 1

为了使用 Tawk.to 的聊天小部件，我使用了带有lazyOnload 策略的脚本组件。您可以在文档中阅读更多内容。

import Script from 'next/script';

// inside the return statement of your page
return (
  <>
    <Script
      strategy="lazyOnload"
      src="https://embed.tawk.to/PROPERTY_ID"
    />
  </>
);