create-react-app 使用Swiper导致错误

n3ipq98p 于 5个月前发布在 React

关注(0)|答案(4)|浏览(55)

描述的bug:
不幸的是，Swiper 7(作为ESM包)和react-create-app似乎无法一起工作。当我安装Swiper 7作为node-module并导入它时，我得到错误信息：

找不到模块：无法解析'swiper/react'[...]

文档中提到：

Swiper NPM包现在是一个纯ESM包。这意味着它不再有CommonJS模块(带有require()和module.exports语法的模块),只包含原生ES模块。如果您的打包器/工具/环境不支持Node ES模块，您应该更新它或继续使用Swiper 6。*

不幸的是，对我来说，降级不是选项。

你尝试恢复依赖项了吗？

是的。

你在用户指南中搜索了哪些术语？

ESM包
ES Module

环境

环境信息：
create-react-app的当前版本：4.0.3
从C:\Users\jonas\AppData\Roaming
pm-cache_npx\3348
ode_modules\create-react-app运行
系统：
操作系统：Windows 10 10.0.19043
CPU:(12) x64 AMD Ryzen 5 2600 Six-Core Processor
二进制文件：
Node: 14.17.1 - C:\Program Files
odejs
ode.EXE
Yarn:未找到
npm:6.14.13 - C:\Program Files
odejs
pm.CMD
浏览器：
Chrome:未找到
Edge:Spartan (44.19041.1023.0),Chromium (94.0.992.38)
Internet Explorer:11.0.19041.1202
npmPackages:
react:^17.0.2 => 17.0.2
react-dom:^17.0.2 => 17.0.2
react-scripts:4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app:未找到

重现步骤

创建react应用
安装Swiper
导入Swiper

create-react-app

来源：https://github.com/facebook/create-react-app/issues/11514

4条答案

按热度按时间

nwo49xxi1#

有任何消息吗？

赞(0）回复(0）举报 5个月前

rqdpfwrv2#

https://swiperjs.com/react#usage-with-create-react-app

赞(0）回复(0）举报 5个月前

vhipe2zx3#

任何成功使用Swiper v7+与CRA(模板类型脚本)的人吗？
当运行开发服务器时，它运行良好，但在运行测试时，似乎Jest无法加载文件，我得到以下错误：

\node_modules\swiper\react\swiper-react.js:13
  import { Swiper } from './swiper.js';
  ^^^^^^

SyntaxError: Cannot use import statement outside a module

  > 4 | import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
      | ^

at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)

赞(0）回复(0）举报 5个月前

dxpyg8gm4#

当我在使用React和CRA CLI时，遇到了相同的问题，swiper版本为7.2.0。

赞(0）回复(0）举报 5个月前

我来回答

create-react-app 使用Swiper导致错误

你尝试恢复依赖项了吗？

你在用户指南中搜索了哪些术语？

环境

重现步骤

4条答案

相关问题

热门标签

最新问答