Javascript React/Next.js不';I don’我好像不跟阿派克斯哈特一起工作 问题

Javascript React/Next.js不';I don’我好像不跟阿派克斯哈特一起工作 问题,javascript,reactjs,next.js,server-side-rendering,apexcharts,Javascript,Reactjs,Next.js,Server Side Rendering,Apexcharts,我的Next.js/React/Node应用程序在我从任何文件中的“React apexcharts”导入图表时崩溃。试图访问应用程序会导致以下错误:服务器错误引用错误:未定义窗口生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。(请参阅下面的调用堆栈)。无论导入的是在页面中呈现还是未使用,都会发生这种情况。有趣的是,如果我保存一个文件并启动Next.js快速刷新,我的应用程序就会开始正常工作(有时)。但是,当我刚刚启动应用程序并尝试访问它时,或者当我使用f5手动刷新时,就会出现上述错误

我的Next.js/React/Node应用程序在我从任何文件中的“React apexcharts”导入图表时崩溃。试图访问应用程序会导致以下错误:
服务器错误
引用错误:未定义窗口
生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。

(请参阅下面的调用堆栈)。
无论导入的
是在页面中呈现还是未使用,都会发生这种情况。有趣的是,如果我保存一个文件并启动Next.js快速刷新,我的应用程序就会开始正常工作(有时)。但是,当我刚刚启动应用程序并尝试访问它时,或者当我使用f5手动刷新时,就会出现上述错误。基本上,它只在Next.js快速刷新后工作(有时,可能是随机的,在这种情况下也不工作,抛出与以前相同的错误)

环境 Node.js(14.16.0)、React(17.0.2)、Express(4.17.1)、Next.js(10.2.0)、
React-apexcharts
(1.3.9)、
apexcharts
(3.26.3)、边缘浏览器、Win10。
Next.js server与Express server集成在一起

登录中
ReferenceError:未定义窗口
反对。(C:\Users\georg\Documents\development\web\projects\Angelina Website\node\u modules\apexcharts\dist\apexcharts.common.js:6:345884)
at模块编译(内部/modules/cjs/loader.js:1063:30)
在Object.Module._extensions..js(internal/modules/cjs/loader.js:1092:10)
在Module.load(内部/modules/cjs/loader.js:928:32)
at Function.Module._load(内部/modules/cjs/loader.js:769:14)
at Module.require(内部/modules/cjs/loader.js:952:19)
根据需要(内部/modules/cjs/helpers.js:88:18)
反对。(C:\Users\georg\Documents\development\web\projects\Angelina Website\node\u modules\react-apexcharts\dist\react-apexcharts.min.js:1:722)
at模块编译(内部/modules/cjs/loader.js:1063:30)
在Object.Module._extensions..js(internal/modules/cjs/loader.js:1092:10)
在Module.load(内部/modules/cjs/loader.js:928:32)
at Function.Module._load(内部/modules/cjs/loader.js:769:14)
at Module.require(内部/modules/cjs/loader.js:952:19)
根据需要(内部/modules/cjs/helpers.js:88:18)
在Object.react-apexcharts(C:\Users\georg\Documents\development\web\projects\Angelina Website\.next\server\pages\partner\dashboard.js:4973:18)
在需要网页时(C:\Users\georg\Documents\development\web\projects\Angelina Website\.next\server\webpack runtime.js:25:42)

您应该使用以下方法导入它:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('yourcomponent using react apex-charts'),
  { ssr: false }
)
由于使用了window,因此在启用ssr模式的情况下无法工作

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('yourcomponent using react apex-charts'),
  { ssr: false }
)