Using Swiper causing error

PSMJonas commented 3 years ago

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

create react app
install Swiper
import Swiper

Expected behavior

Swiper as an ESM package should be loaded.

Actual behavior

The module can't be found.

screen

danchistyakov commented 2 years ago

Any news?

zqcccc commented 2 years ago

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

jon-a-nygaard commented 2 years ago

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 commented 2 years ago

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

facebook / create-react-app