¿He intentado lo que está escrito en sus documentos del complemento @tawk.to/tawk-messenger-react ?
Hice un componente como /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> ); } Pero después de importar el componente en Layout.js o en _app.js , aparece un error como
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)¿Qué debo hacer para que funcione correctamente?
Para usar el widget de chat de Tawk.to usé el componente Script con la estrategia lazyOnload. Puede leer más en los documentos.
import Script from 'next/script'; // inside the return statement of your page return ( <> <Script strategy="lazyOnload" src="https://embed.tawk.to/PROPERTY_ID" /> </> );De acuerdo, he encontrado un problema similar, esto sucede porque tawk.to no está diseñado para ejecutarse en el servidor. No puedo decir que la solución sea la más elegante, pero como solución hice una importación dinámica del componente TawkMessengerReact . Y solo renderícelo cuando la aplicación esté cargada en el navegador. Nuevamente, estoy seguro de que podría haber una forma más hermosa de hacerlo, pero bueno, es una solución rápida y sucia que funciona.
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> }Esto funciona perfectamente para mi proyecto:
npm :
npm i @tawk.to/tawk-messenger-reacthilo :
yarn add @tawk.to/tawk-messenger-reactLuego agrega lo siguiente:
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; Para obtener más de una idea, consulte tawk.to
para más personalización visite esta página