盖茨比反应-spring-3d 问题

Question

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

从“react-spring-3d-carousel”导入 Carousel

和

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

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

盖茨比-node.js

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

如有任何帮助，我们将不胜感激

Answer 1

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

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

盖茨比反应-spring-3d 问题

gatsby react-spring-3d issue

reactjs

graphql

gatsby