2

I installed Swiper 7 to vue3 project with TS, created via vue CLI: here is my ts.config:

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "noImplicitAny": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "chrome"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
, "src/router/index.js"  ],
  "exclude": [
    "node_modules",
    "src/webcommon/",
  ],
}

package.json:

{
  "name": "wallet-dapp",
  "version": "0.1.0",
  "private": true,
  "module": "vue.esm.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve-dev": "cross-env BUILD_TYPE=development vue-cli-service serve",
    "build": "vue-cli-service build --no-unsafe-inline",
    "build-dev": "cross-env BUILD_TYPE=development vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@types/chrome": "0.0.154",
    "@vueuse/components": "^6.0.0",
    "@vueuse/core": "^6.0.0",
    "bip32": "^2.0.6",
    "bitcoinjs-lib": "^5.2.0",
    "core-js": "^3.6.5",
    "cross-env": "^7.0.3",
    "seedrandom": "^3.0.5",
    "svgo": "^2.3.1",
    "swiper": "^6.8.4",
    "vue": "^3.0.0",
    "vue-i18n": "^9.1.7",
    "vue-meta": "^3.0.0-alpha.9",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "svgo-loader": "^3.0.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-svg-sprite": "^1.1.0",
    "vue-jest": "^5.0.0-0"
  }
}

I have this error during webpack build:

These dependencies were not found:

swiper in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/webcommon/components/Store/DappPage.vue?vue&type=script&lang=js

and i import swiper like this:

import { Swiper, SwiperSlide } from 'swiper/vue'

Swiper 7 is now pure ESM module. And i saw this document: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

Can anybody help with making it work)?

Олег Кущ
  • 21
  • 3
  • What exactly does "don't see" mean? The problem can occur in any part of the setup. If there's an error, post it exactly. See https://stackoverflow.com/help/how-to-ask – Estus Flask Sep 08 '21 at 12:25
  • The question doesn't list package.json. It should contain `swiper`, that's the most significant part that affects this. If it already does, try to remove and reinstall modules first. – Estus Flask Sep 08 '21 at 13:31
  • I'v alredy tried it out. And I had to go fallback to Swiper 6. It works fine - but I'm still looking for solution with swiper 7. As i sad in question Swiper 7 is now pure ESM module. And that is the problem. I've added package.json to question – Олег Кущ Sep 08 '21 at 14:47
  • I'm having the same problem using a Vue CLI project. I have followed the ESM guide linked above and Swiper 7 just will not be discovered. I have removed Typescript and ESLint to rule them out but the compiler still tells me `These dependencies were not found` and lists Swiper and it's CSS. – joshkrz Sep 10 '21 at 08:59
  • May be will help somebody - https://github.com/vueuse/vueuse/issues/718 – Олег Кущ Sep 12 '21 at 12:45

1 Answers1

1

I've come across the same problem with Vue CLI v4, which uses webpack 4. I assume there is some kind of problem with managing the ESM migration of Swiper 7 and I haven't found any way around it.

However, updating to webpack 5 solves the issue. You can do that by migrating to Vue CLI 5:

https://next.cli.vuejs.org/migrations/migrate-from-v4.html

Vue CLI 5 uses webpack 5 and everything's working fine.

Jaromír Šetek
  • 478
  • 2
  • 8