提问人：Jolly Good 提问时间：9/25/2023 更新时间：9/25/2023 访问量：128
ReactJS Vite SSR ReferenceError： window is not defined - react-slick 库
ReactJS Vite SSR ReferenceError: window is not defined - react-slick library
问：
当我使用 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 库，因为当我注释掉它时，它可以工作。如何解决这个问题？
答：
0赞
Jolly Good
9/25/2023
#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);
});
}
}, []);
然后确保在它可用后使用它，如下所示：
{Slider ? (<Slider ...> <div>..</div> </Slider>) : ("Loading ...")}
此外，将 noExternal 添加到 vite.config 文件有助于解决具有无效代码的库：
import { defineConfig } from "vite";
import ssr from "vite-plugin-ssr/plugin";
export default defineConfig({
...other configurations..,
ssr: {
noExternal: ["react-slick"],
},
})
评论