带有 vue cli 和 TS 项目的 Vue 3 看不到 swiper 7

Question

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

Answer 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.