盖茨比 react-spring-3d 问题答案

【问题标题】：gatsby react-spring-3d issue盖茨比 react-spring-3d 问题
【发布时间】：2021-11-23 23:46:52
【问题描述】：

有谁知道如何用 react-spring-3d-carousel 解决这个问题 Gatsby：

从“react-spring-3d-carousel”导入轮播

和

<Carousel slides={slides} goToSlide={selectedSlide} />.

我查看了文档，但仍然出现错误：未定义窗口

gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html") {
      actions.setWebpackConfig({
        module: {
          rules: [
            {
              test: /react-spring-3d-carousel/,
              use: loaders.null(),
            },
          ],
        },
      })
    }
  }

任何帮助将不胜感激

【问题讨论】：

当window not defined 出现时？ gatsby develop 或 gatsby build?
你看过这个问题吗？ github.com/gutiguy/react-spring-3d-carousel/issues/8
@FerranBuireu gatsby 开发，但我修复了@loadable/component。这两行解决了我的问题。从“@loadable/component”导入可加载； const Carousel = loadable(() => import("react-spring-3d-carousel")) 再次感谢 :)
@Josh 谢谢，我刚刚找到我的问题并使用@loadable/component 修复。

标签： reactjs graphql gatsby

【解决方案1】：

对于可能面临类似问题的其他人，不仅与 react-spring-3d-carousel 有关：如果将 null 加载器添加到 SSR 转译不起作用，另一个可能的解决方法是添加可加载组件，实际上，所做的是在服务器端执行代码拆分。

import loadable from "@loadable/component"; 
const Carousel = loadable(() => import("react-spring-3d-carousel"))

【讨论】：