ReactJS Vite SSR ReferenceError：窗口未定义-react-slick 库

Question

当我使用 React Vite SSR 插件运行

npm build

时，构建后出现以下错误：

/<path>/node_modules/enquire.js/src/MediaQueryDispatch.js:14
if(!window.matchMedia) {
^
ReferenceError: window is not defined
    at new MediaQueryDispatch (/<path>/node_modules/enquire.js/src/MediaQueryDispatch.js:14:5)
    at Object.<anonymous> (/<path>/node_modules/enquire.js/src/index.js:2:18)

我确信它来自react-slick库，因为当我注释掉它时它就起作用了。如何解决这个问题？

Answer 1

经过大量搜索，我了解到问题是一些库（例如react-slick）在撰写本文时不支持服务器端渲染（SSR）。该库期望窗口对象可用，但该对象在服务器端渲染环境中不存在。

所以解决方案是仅在客户端导入库（当窗口对象可用时）。执行以下操作对我有用：

 const [Slider, setSlider] = useState(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      import("react-slick")
        .then((module) => {
          setSlider(() => module.default);
        })
        .catch((error) => {
          console.error("An error occurred when loading react-slick", error);
        });
    }
  }, []);

您还可以使用 React Suspense 包装您正在使用库的组件。

此外，在 vite.config 文件中添加 noExternal 有助于解决具有无效代码的库：

  import { defineConfig } from "vite";
  import ssr from "vite-plugin-ssr/plugin";

  export default defineConfig({
   ...other configurations..,
   ssr: {
    noExternal: ["react-slick"],
   },

})