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;

have you read the migration guides for migrating next.js 10->11 and 11->12 — Bravo
– Bravo, Commented Apr 9, 2022 at 6:28
Have you done the migratiom correctly ? The Component seems dinamically imported correctly, with ssr: false so it should not render on Server, which is why you have that error thrown. Have you already tried to delete .next folder ? — Cesare Polonara
– Cesare Polonara, Commented Apr 9, 2022 at 10:03

Moein Moeinnia · Accepted Answer · 2022-04-09 06:59:50Z

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

answered Apr 9, 2022 at 6:59

Moein Moeinnia

2,4364 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sulung Nugroho Over a year ago

Got the same problem with TradingViewWidget. It should be imported using dynamic import.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related