reactjs - Storybook 无法导入 Swiper 模块
问题描述
我正在尝试导入 Swiper 以对我的应用程序做出反应并在 Storybook 中使用它。
我有以下导入:
import { Swiper, SwiperSlide } from 'swiper/react';
这适用于 React 应用程序,但不适用于 Storybook,我收到以下错误:
ModuleNotFoundError: Module not found: Error: Can't resolve 'swiper/react'
其他 React 模块可以毫无问题地导入。我需要更改 Storybook 中的一些配置吗?
解决方案
Swiper v7+ 使用 ESM 模块。要使其与故事书一起使用,您必须更新故事书以使用 webpack5 而不是默认的 webpack4。还要确保您当前的节点版本必须等于或高于 12.20、14.13 或 16。这些是支持 ESM 模块的版本。
就我而言,我还删除了 .storybook/main.js 中的插件 @storybook/react 行,因为它仍然使用 webpack4 并引发配置验证错误。之后它运行良好。
完整说明
推荐阅读
- r - 只读具有在向量中指定的行名的大文件的行 - R
- python - 将 for 循环与 firestore 数据迭代 API 请求一起使用时出现 JSONDecodeError
- linker - --unresolved-symbols=ignore-in-shared-libs 和 --allow-shlib-undefined 标志有什么区别
- css - 如何让徽标 img 超出/超出标题
- javascript - 在 Chrome devtools 中查看页面加载时发生的 Android webview 网络请求
- atlassian-sourcetree - 如何一次将多个本地存储库添加到 SourceTree Windows 版本中?
- sql-server - 在 T-SQL 中创建具有参数化名称和表名的视图
- java - Linked List 排序方法在递归过程中给出 StackOverFlow 错误,并比较列表中的元素
- c++ - 我将消息长度声明为什么?整数还是字符?
- powershell - 如何使用 Powershell 正则表达式将 "" 转换为 \"?