使用 React 和 Snowpack 的 Swiper：useState 错误

Question

我在 React 项目中遇到了 Swiper 库的问题，出现以下错误：未捕获的类型错误：无法读取 null 的属性（读取“useState”）。

这是错误跟踪的一部分：

Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (swiper.react.v11.1.14.js:1624:21)
    at swiper.react.v11.1.14.js:7563:57
    at renderWithHooks (react-dom.v18.3.1.js:15494:18)
    at updateForwardRef (react-dom.v18.3.1.js:19248:20)
    at beginWork (react-dom.v18.3.1.js:21678:16)
    at beginWork$1 (react-dom.v18.3.1.js:27453:14)
    at performUnitOfWork (react-dom.v18.3.1.js:26584:12)
    at workLoopSync (react-dom.v18.3.1.js:26493:5)
    at renderRootSync (react-dom.v18.3.1.js:26461:7)
    at performSyncWorkOnRoot (react-dom.v18.3.1.js:26113:20)

我使用 TypeScript 和 Snowpack 进行设置，并且我已经尝试了多种解决方案但没有成功。即使我创建仅包含基本依赖项的最小存储库，该错误仍然存在。

这是最小存储库的链接以供参考：https://github.com/KyleSaunders01/swiper-bug-test

我非常感谢任何有关如何解决此问题的建议，特别是如果您有在 Snowpack 环境中使用 Swiper 的经验。谢谢！

我尝试过的： 我更新了 Swiper 和 React 以确保兼容性，在 Snowpack 配置中外部化了 React 和 React-dom，并仅使用 Swiper 和基本幻灯片测试了最小设置。我还尝试禁用分页和导航等功能、降级 Swiper 以及禁用 React Fast Refresh。

我的期望： 我希望 Swiper 能够正确渲染幻灯片，而不会触发 useState 错误，并且页面加载时不会出现任何运行时错误。

实际发生的事情： 尽管我进行了所有尝试，但 useState 错误仍然存在。即使在仅安装基本依赖项的最小设置中，错误仍然发生。

Answer 1

Swiper v11.x 可能不完全支持 React 18，导致兼容性问题。降级到 Swiper v8（与 React 18 广泛兼容）可能会解决这个问题。