找不到模块：错误：包路径 ./react/swiper-react 未从包中导出

发布于 2025-01-11 10:04:27 字数 319 浏览 0 评论 0原文

我升级到react-scripts v5，并且收到以下错误：

这是我的导入基于 Swiper 文档：

import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';

import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.min.css';

原文

I upgraded to react-scripts v5, and I'm getting these errors:

This is how my imports look based on Swiper documentation:

import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';

import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.min.css';

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你的他你的她 2025-01-18 10:04:27

更改

import { SwiperSlide } from 'swiper/react/swiper-react.js';

源

import { SwiperSlide } from 'swiper/react';

https://github.com/nolimits4web/swiper/issues/4003

Change

import { SwiperSlide } from 'swiper/react/swiper-react.js';

import { SwiperSlide } from 'swiper/react';

source
https://github.com/nolimits4web/swiper/issues/4003

回复收藏 0 原文

裸钻 2025-01-18 10:04:27

添加到 Rafal 发布的内容中，您的问题的另一个解决方案可能是更改以下行。

import 'swiper/swiper.min.css';

根据您使用的技术，导入 Swiper .css 有多种不同的方法。

如果您阅读官方文档： https://ionicframework.com/docs/react/slides
你可以看到导入CSS的所有不同方式

不使用 Create React App？您可以改为从 swiper/css 导入 Swiper CSS。

因此，在我在 Ionic 中开发应用程序的情况下，我的导入将如下所示：

import 'swiper/css';

还有其他选项，具体取决于您设计工作表的样式。

对于使用 SCSS 或 Less 样式的开发人员，Swiper 还提供这些文件的导入。

对于Less样式，用less替换css：

import 'swiper/swiper.less';

对于 SCSS 样式，将 css 替换为 scss：

import 'swiper/swiper.scss';

希望有帮助！

Adding to what Rafal posted, another fix to your issue could be changing the following line

import 'swiper/swiper.min.css';

There are various different ways of importing the Swiper .css depending on what technologies you are using.

If you read the official documentation: https://ionicframework.com/docs/react/slides
you can see all the different ways of importing the css

Not using Create React App? You can import the Swiper CSS from swiper/css instead.

So in my case where I am developing my app in Ionic, my import would look like this:

import 'swiper/css';

There are other options as well depending on how you are styling your sheets.

For developers using SCSS or Less styles, Swiper also provides imports for those files.

For Less styles, replace css with less:

import 'swiper/swiper.less';

For SCSS styles replace css with scss:

import 'swiper/swiper.scss';

Hope it helps!

回复收藏 0 原文

凉城已无爱 2025-01-18 10:04:27

我这样做了：

import 'swiper/css';
// eslint-disable-next-line import/no-unresolved, import/extensions
import 'swiper/css/navigation';
// eslint-disable-next-line import/no-unresolved, import/extensions
import 'swiper/css/pagination';

import clsx from 'clsx';
// eslint-disable-next-line import/no-unresolved, import/extensions
import { Swiper, SwiperSlide } from 'swiper/react';

忽略 eslint 问题似乎可以使其工作。

I did this:

import 'swiper/css';
// eslint-disable-next-line import/no-unresolved, import/extensions
import 'swiper/css/navigation';
// eslint-disable-next-line import/no-unresolved, import/extensions
import 'swiper/css/pagination';

import clsx from 'clsx';
// eslint-disable-next-line import/no-unresolved, import/extensions
import { Swiper, SwiperSlide } from 'swiper/react';

Ignoring the eslint issues seems to make it work.

回复收藏 0 原文

~没有更多了~