unhandledRejection: TypeError:无法因为“window.location”的属性“协议”未定义而对其进行重构

Question

我在我的nextjs项目中使用了react tradingview-小部件，它在nextjs版本10.2.3上正确工作。但是，当我将nextjs版本升级到12.1.4时，在重新加载tradingview组件时会发生此错误。

错误- unhandledRejection: TypeError:无法因未定义而破坏“window.location”的属性“协议”。事件编译的客户端和服务器在2.1s (6717模块)中未在新的Repository\02.365-Crypto\365-Crypto\node_modules\styled-jsx\dist\index\index.js:136:35) (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\styled-jsx\dist\index\index.js:491:33) at新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 doRender ) (C:\Z Repository\02.365-Crypto\365-Crypto\node_modules\next\dist\server\base-server.js:878:38) at异步cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate ) (C:\Z Repository\02 )异步C:\Z .365-Crypto\365-Crypto\node_modules\next\dist\server\base-server.js:977:28) Repository\02.365-Crypto\365-Crypto\node_modules\next\dist\server\response-cache.js:72:36

组件

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

我在魔术api中遇到了同样的问题，请检查这个：

​

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

​