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

【问题标题】：How to implement Twak.to widget in a Next JS website?如何在 Next JS 网站中实现 Twak.to 小部件？
【发布时间】：2022-06-18 05:57:54
【问题描述】：

我已经尝试过他们的@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:\Projects\motocorp\.next\server\pages\_app.js:240:18)
    at __webpack_require__ (E:\PROJECT\FOLDER\.next\server\webpack-runtime.js:33:42)

我应该怎么做才能让它正常运行？

【问题讨论】：

这是否回答了您的问题："Cannot use import statement outside a module" error when importing react-hook-mousetrap in Next.js?

标签： javascript reactjs react-hooks next.js

【解决方案1】：

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

import Script from 'next/script';

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

【讨论】：

【解决方案2】：

好的，所以我遇到了类似的问题，这是因为 tawk.to 不打算在服务器上执行。不能说该解决方案是最优雅的，但作为一种解决方法，我动态导入了 TawkMessengerReact 组件。并且仅在应用程序在浏览器中加载时呈现。同样，我确信可能有一些更漂亮的方法可以做到这一点，但是，嘿，这是一个有效的快速和肮脏的解决方案。

const TawkMessengerReact = dynamic(() =>
  import('node_modules/@tawk.to/tawk-messenger-react'),
);

const App = ({ Component, pageProps }) => {
const initialRenderRef = useRef(false);

 useEffect(() => {
    initialRenderRef.current = true;
  }, []);

return (
<div>
    {initialRenderRef.current && (
     <TawkMessengerReact
      propertyId='asdfasdasdadwswdadw'
      widgetId='asdwer'
     />)}
     <Component {...pageProps} />
</div>


}

【讨论】：

动态导入是正确的用例，但您需要指定 { ssr: false } 作为 dynamic() 的第二个参数。

【解决方案3】：

试试这个，这非常适合我的项目，要了解更多想法，请查看探索此页面 How to use tawk.to

更多定制请访问此页面MORE CUSTOMIZATION

@tawk.to/tawk-messenger-react

npm i @tawk.to/tawk-messenger-react

或

yarn add @tawk.to/tawk-messenger-react

那么

import "../styles/globals.css";
import Message from "../components/Message";
import Head from "next/head";
import Script from "next/script";
import TawkMessengerReact from "@tawk.to/tawk-messenger-react";
import { useRef } from 'react';

function MyApp({ Component, pageProps }) {
  const tawkMessengerRef = useRef();

  const handleMinimize = () => {
    tawkMessengerRef.current.minimize();
  };
  return (
    <>
      <Component {...pageProps} />
      <button onClick={handleMinimize}> Minimize the Chat </button>

      <TawkMessengerReact
        propertyId={process.env.NEXT_PUBLIC_TWAKTO_PROPERTY_ID}
        widgetId={process.env.NEXT_PUBLIC_TWAKTO_WIDGET_ID}
        useRef={tawkMessengerRef}
      />
    </>
  );
}

export default MyApp;

【讨论】：