我试过他们的@ www. example上写的东西 www.example.com plugin docs?
我做了一个像/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)
我该怎么做才能让它正常工作?
4条答案
按热度按时间wecizke31#
使用www.example的聊天小部件 www.example.com 。您可以在docs.中阅读更多内容
3gtaxfhh2#
这对我的项目非常有效:
npm:
yarn:
然后添加以下内容:
要了解更多信息,请查看tawk.to
欲了解更多定制,请访问this page
u5i3ibmn3#
我使用Next Js和Typescript。由于我找不到
tawk-messenger-react
的类型,Typescript失败,显示错误,并且在构建时,它可以not build
项目。我选择使用Next Head
和如下所示的普通脚本标记来解决这个问题。该脚本将如下所示:
Next Script
在我的用例中也不起作用,小部件是not loading
pb3s4cty4#
好吧,我遇到了类似的问题,这是因为 www.example.com 。不能说这个解决方案是最优雅的,但作为一种变通方法,我动态导入了
TawkMessengerReact
组件。只有在浏览器中加载应用程序时才会呈现它。再次,我相信可能有一些更好的方法来做到这一点,但嘿,这是一个快速和肮脏的工作解决方案。