Usé react-tradingview-widget en mi proyecto nextjs. Funciona correctamente en la versión 10.2.3 de nextjs. pero cuando actualizo la versión nextjs a 12.1.4, este error ocurre cuando vuelvo a cargar el componente tradingview.
error - UnhandledRejection: TypeError: No se puede desestructurar la propiedad 'protocolo' de 'window.location' porque no está definida. evento: cliente y servidor compilados correctamente en 2.1s (módulos 6717) Error de referencia: el documento no está definido en la nueva hoja de estilo (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\styled-jsx\dist\index\index. js:136:35) en el nuevo StyleSheetRegistry (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\styled-jsx\dist\index\index.js:491:33) en Object.createStyleRegistry (C:\ Repositorio Z\02.365-Crypto\365-Crypto\node_modules\styled-jsx\dist\index\index.js:667:10) en Object.renderToHTML (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\ next\dist\server\render.js:353:46) en async doRender (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\next\dist\server\base-server.js:878:38) en async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\next\dist\server\base-server.js:977:28) en async C:\Z Repositorio\02.365-Crypto\365-Crypto\node_modules\next\dist\server\response-cache.js:72:36
Componente
import React from "react"; import { Themes } from "react-tradingview-widget"; import dynamic from "next/dynamic"; import styles from "./index.module.css"; const TradingViewWidget = dynamic(() => import("react-tradingview-widget"), { ssr: false, }); const Chart = ({ }) => { return ( <div className={`${styles.tradingviewWidget}`}> <TradingViewWidget symbol={`BINANCE:BTCUSDT`} theme={Themes.DARK} autosize="true" locale="en" interval="1" // hide_top_toolbar='true' /> </div> ); }; export default Chart;Me encontré con el mismo problema con magic api, mira este:
return ( <div className={`${styles.tradingviewWidget}`}> {typeof window !== "undefined" && <TradingViewWidget symbol={`BINANCE:BTCUSDT`} theme={Themes.DARK} autosize="true" locale="en" interval="1" // hide_top_toolbar='true' /> } </div> );