Using Swiper causing error

[PSMJonas]

Describe the bug

Unfortunately, Swiper 7 (as ESM package) and react-create-app do not seem to work together. When I install Swiper 7 as node-module and import it, I get the error message:

Module not found: Can't resolve 'swiper/react' in [...]

The docu says:

Swiper NPM package is now a pure ESM package. Which means it doesn't have CommonJS modules anymore (the ones with require() and module.exports syntax) and contains only native ES modules. If your bundler/tooling/environment doesn't support Node ES module, you should update it or stay on Swiper 6.

Unfortunately, a downgrade is not an option for me.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

• ESM package
• ES Module

Environment

Environment Info:

current version of create-react-app: 4.0.3
running from C:\Users\jonas\AppData\Roaming\npm-cache_npx\3348\node_modules\create-react-app

System:
OS: Windows 10 10.0.19043
CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
Binaries:
Node: 14.17.1 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
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: Not Found

Steps to reproduce

1. create react app
2. install Swiper
3. import Swiper

Expected behavior

Swiper as an ESM package should be loaded.

Actual behavior

The module can't be found.

[danchistyakov]

Any news?

[zqcccc]

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

[jon-a-nygaard]

Anyone who has successfully used Swiper v7+ with CRA --template typescript?
It works well when running the development server, but when running tests it seems that Jest is unable to load the files and I get the following error:

\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)

[Soumyahoichoi]

Facing same issue when I am using react using CRA cli with swiper version 7.2.0