React / Next js：即使组件是'use client'，Webpack也会抛出未定义的窗口

我使用Typescript 5，React 18，Next js 14作为堆栈，并且现在已经经历了许多库的类似错误。
出现以下错误：ReferenceError: window is not defined。
这来自一个第三方库，我无法控制，因此更令人沮丧。我找到了像动态加载https://stackoverflow.com/a/63293697/490031这样的解决方案。它有两个问题，这是不兼容的类型脚本，因此抛出错误，不管怎样，它都不工作。
我不明白，当消耗lib的组件是use client时，为什么Webpack试图在服务器上使用它？有任何帮助和修复吗？
以下是其中一个案例的错误日志：

./src/components/Chat/MyChat.tsx
./src/components/Chat/index.tsx
./src/components/layouts/Navigation.tsx
./src/app/page.tsx
 ⨯ node_modules/html-to-draftjs/dist/html-to-draftjs.js (1:333) @ eval
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/MessageComposer/index.tsx:10:73)
    at (ssr)/./src/components/Chat/MessageComposer/index.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:1303:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/Chat/MessageInput.tsx:13:103)
    at (ssr)/./src/components/Chat/Chat/MessageInput.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:841:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/Chat/Chat.tsx:9:105)
    at (ssr)/./src/components/Chat/Chat/Chat.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:720:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/Chat/ChatPanel.tsx:12:97)
    at (ssr)/./src/components/Chat/Chat/ChatPanel.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:764:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/ChatView.tsx:14:102)
    at (ssr)/./src/components/Chat/ChatView.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:1094:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/MyChat.tsx:9:96)
    at (ssr)/./src/components/Chat/MyChat.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:1149:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/index.tsx:9:100)
    at (ssr)/./src/components/Chat/index.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:1347:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/layouts/Navigation.tsx:13:87)
    at (ssr)/./src/components/layouts/Navigation.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:3668:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/page.tsx:10:91)
    at (ssr)/./src/app/page.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:500:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
**null**

字符串

我希望下面引用的Next.js文档可以帮助澄清这种混淆。
“use client”用于声明服务器和客户端组件模块之间的边界。这意味着通过在文件中定义“use client”，导入到其中的所有其他模块，包括子组件，都被视为客户端包的一部分。
https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs
客户端组件在客户端和服务器端（SSR）都呈现。
至于为什么html-to-draftjs会出现上面的错误，答案很简单-lib似乎根本不兼容SSR。为了克服这个限制，您可以使用动态导入强制它在客户端独占运行（您可能需要使用lib动态导入组件，而不是lib本身）：

const Chat = dynamic(() => import("./Chat"), { ssr: false });

字符串
我希望这能帮上忙。

React / Next js：即使组件是'use client'，Webpack也会抛出未定义的窗口

1条答案

相关问题

热门标签

最新问答