Sveltekit：找不到模块'swiper'

Question

我尝试了来自https://swiperjs.com/svelte

08:07:51 [vite] Error when evaluating SSR module /src/routes/s.svelte: Error: Cannot find module 'swiper' from 'C:/Svelte/tw09swipe/src/routes'
at Function.resolveSync [as sync] (C:Sveltetw09swipenode_modulesresolvelibsync.js:102:15)
at resolveFrom$3 (C:Sveltetw09swipenode_modulesvitedistnodechunksdep-9f74b403.js:4081:29)
at resolve (C:Sveltetw09swipenode_modulesvitedistnodechunksdep-9f74b403.js:75136:22)
at nodeRequire (C:Sveltetw09swipenode_modulesvitedistnodechunksdep-9f74b403.js:75115:25)
at ssrImport (C:Sveltetw09swipenode_modulesvitedistnodechunksdep-9f74b403.js:75057:20)
at eval (/src/routes/s.svelte:7:37)
at async instantiateModule (C:Sveltetw09swipenode_modulesvitedistnodechunksdep-9f74b403.js:75100:9)

我已经安装了新的sveltekit和swiper。版本:

swiper@7.0.4
vite@2.5.6
@sveltejs/kit@1.0.0-next.165

可以在codesandbox中找到Swiper 7的工作示例:https://codesandbox.io/s/3dxrg它使用Swiper 7.0.3和SvelteKit v1.0.0-next.104

---

我已经安装了svelte/kit和swiper，没有任何更改:

mkdir tw09swipe
cd tw09swipe
npm init svelte@next
npm install
npm i swiper

This ismypackage.json:

{
"name": "~TODO~",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"preview": "svelte-kit preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@sveltejs/kit": "next",
"svelte": "^3.34.0",
"svelte-check": "^2.0.0",
"svelte-preprocess": "^4.9.4",
"tslib": "^2.0.0",
"typescript": "^4.0.0"
},
"type": "module",
"dependencies": {
"swiper": "^7.0.5"
}
}

这里是tsconfig.json:

{
"compilerOptions": {
"moduleResolution": "node",
"module": "es2020",
"lib": ["es2020", "DOM"],
"target": "es2019",
/**
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
to enforce using `import type` instead of `import` for Types.
*/
"importsNotUsedAsValues": "error",
"isolatedModules": true,
"resolveJsonModule": true,
/**
To have warnings/errors of the Svelte compiler at the correct position,
enable source maps by default.
*/
"sourceMap": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"allowJs": true,
"checkJs": true,
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"]
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

和svelte.config.js:

import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte'
}
};
export default config;

路线/s.svelte

<script>
// Import Swiper Svelte components    
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";
import { Swiper, SwiperSlide } from "swiper/svelte";    
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
</script>
<Swiper
modules={[Navigation, Pagination, Scrollbar, A11y]}
spaceBetween={50}
slidesPerView={3}
navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
on:slideChange={() => console.log("slide change")}
on:swiper={(e) => console.log(e.detail[0])}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>

Answer 1

SvelteKit有一个解决方案(应该也适用于Sapper)

Slider.svelte

<script>
import { Swiper, SwiperSlide } from 'swiper/svelte';
import SwiperCore, { Mousewheel, Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
...
SwiperCore.use([Mousewheel, Pagination]);
</script>
...
<Swiper
direction='vertical'
mousewheel={true}
pagination={true}
slidesPerView={1}
on:slideChange={onSlideChange}
on:swiper={(e) => console.log(e.detail[0])}
>
<SwiperSlide>
</Swiper>
...

这是工作，我们导入Slider.svelte组件:

<script>
...
let Slider;
onMount(async () => {
const module = await import('./components/Slider.svelte');
Slider = module.default;
});
...
</script>
<svelte:component this={Slider}/>
...

所以我基本上建议不要在onMount中导入所有的Swiper实例，而是在onMount中导入包含Swiper Slider的组件-希望它能帮助别人并保持你的代码库更干净:)