unhandledRejection: TypeError: Cannot destructure property 'protocol' of 'window.location' as it is undefined

Question

I used react-tradingview-widget in my nextjs project.it's correctly works on nextjs version 10.2.3. but when i upgrade nextjs version to 12.1.4 , this error occurred when i reload the tradingview component.

error - unhandledRejection: TypeError: Cannot destructure property 'protocol' of 'window.location' as it is undefined. event - compiled client and server successfully in 2.1s (6717 modules) ReferenceError: document is not defined at new StyleSheet (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\styled-jsx\dist\index\index.js:136:35) at new StyleSheetRegistry (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\styled-jsx\dist\index\index.js:491:33) at Object.createStyleRegistry (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\styled-jsx\dist\index\index.js:667:10) at Object.renderToHTML (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\next\dist\server\render.js:353:46) at async doRender (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\next\dist\server\base-server.js:878:38) at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\next\dist\server\base-server.js:977:28) at async C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\next\dist\server\response-cache.js:72:36

Component

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;

Answer 1

I ran into same issue with magic api , check this one:

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>
  );