Next.js 14 中的 ApexCharts 问题 - ReferenceError：窗口未定义

Question

我在尝试在 Next.js 14 项目中使用 ApexCharts 时遇到问题。当我运行该项目时，我在终端中收到以下错误：

好像和window对象的用法有关。还有其他人遇到过这个问题吗，尤其是 Next.js 14？你是怎么解决的？

我尝试了几种方法来解决此问题，但尽管做出了这些努力，问题仍然存在。我期望这些调整能够解决渲染过程中的 ReferenceError: window is not Defined 问题。

Answer 1

我在构建 Next 时也遇到了“windows 未定义”的错误。 14应用程序，这是因为react-apexcharts使用窗口对象，而窗口对象在ssr（服务器端渲染）或构建下一个应用程序时不可用

"use client"

我还使用“使用客户端”使其成为客户端，这在生产中有效，但仍然无法构建

"use client"
  const DynamicApexCharts = dynamic(() => import('react-apexcharts'), {
    ssr: false, // Ensure ApexCharts is not imported during SSR
  });
        
        
export const MyComponent = () => {
  return (
    <DynamicApexCharts options={options} series={series} type="area" height={350} width={700} />
 )}

我用了这个方法，它有效...这可能有效