Sveltekit:找不到模块“滑动器”
Sveltekit:找不到模块“滑动器”
提问于 2021-09-09 06:49:48
我尝试了https://swiperjs.com/svelte中的sveltekit-swiper示例。
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:\Svelte\tw09swipe\node_modules\resolve\lib\sync.js:102:15)
at resolveFrom$3 (C:\Svelte\tw09swipe\node_modules\vite\dist\node\chunks\dep-9f74b403.js:4081:29)
at resolve (C:\Svelte\tw09swipe\node_modules\vite\dist\node\chunks\dep-9f74b403.js:75136:22)
at nodeRequire (C:\Svelte\tw09swipe\node_modules\vite\dist\node\chunks\dep-9f74b403.js:75115:25)
at ssrImport (C:\Svelte\tw09swipe\node_modules\vite\dist\node\chunks\dep-9f74b403.js:75057:20)
at eval (/src/routes/s.svelte:7:37)
at async instantiateModule (C:\Svelte\tw09swipe\node_modules\vite\dist\node\chunks\dep-9f74b403.js:75100:9)我安装了新的副本的sveltekit和刷卡。版本：
swiper@7.0.4
vite@2.5.6
@sveltejs/kit@1.0.0-next.165使用Swiper 7的工作示例可以在代码框中找到：https://codesandbox.io/s/3dxrg，它使用Swiper 7.0.3和SvelteKit v1.0.0-next.104
我安装了svelte/试剂盒和刷卡，没有任何改变：
mkdir tw09swipe
cd tw09swipe
npm init svelte@next
npm install
npm i swiper我是my package.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;路线/服务
<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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-22 18:50:24
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实例，而是导入组件，其中包含Swiper在onMount中--希望它能帮助某人，并保持代码库的清洁:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69113480
复制相关文章
相似问题
腾讯云开发者
