title: Sveltekit: Cannot find module 'swiper'
body: <p>I tried the sveltekit-swiper example from
  <a href="https://swiperjs.com/svelte" rel="nofollow noreferrer">https://swiperjs.com/svelte</a></p>
  <pre><code>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)
  </code></pre>
  <p>I have installed new copies of sveltekit and swiper. Versions:</p>
  <pre><code>swiper@7.0.4
  vite@2.5.6
  @sveltejs/kit@1.0.0-next.165
  </code></pre>
  <p>A working example with Swiper 7 can be found in the codesandbox: <a href="https://codesandbox.io/s/3dxrg" rel="nofollow noreferrer">https://codesandbox.io/s/3dxrg</a>
  It uses Swiper 7.0.3 and SvelteKit v1.0.0-next.104</p>
  <hr />
  <p>I have installed svelte/kit and swiper without any changes:</p>
  <pre><code>mkdir tw09swipe
  cd tw09swipe
  npm init svelte@next
  npm install
  npm i swiper
  </code></pre>
  <p>This is <strong>my</strong> package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;~TODO~&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;svelte-kit dev&quot;,
      &quot;build&quot;: &quot;svelte-kit build&quot;,
      &quot;preview&quot;: &quot;svelte-kit preview&quot;,
      &quot;check&quot;: &quot;svelte-check --tsconfig ./tsconfig.json&quot;,
      &quot;check:watch&quot;: &quot;svelte-check --tsconfig ./tsconfig.json --watch&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@sveltejs/kit&quot;: &quot;next&quot;,
      &quot;svelte&quot;: &quot;^3.34.0&quot;,
      &quot;svelte-check&quot;: &quot;^2.0.0&quot;,
      &quot;svelte-preprocess&quot;: &quot;^4.9.4&quot;,
      &quot;tslib&quot;: &quot;^2.0.0&quot;,
      &quot;typescript&quot;: &quot;^4.0.0&quot;
    },
    &quot;type&quot;: &quot;module&quot;,
    &quot;dependencies&quot;: {
      &quot;swiper&quot;: &quot;^7.0.5&quot;
    }
  }
  </code></pre>
  <p>And here is tsconfig.json:</p>
  <pre><code>{
      &quot;compilerOptions&quot;: {
          &quot;moduleResolution&quot;: &quot;node&quot;,
          &quot;module&quot;: &quot;es2020&quot;,
          &quot;lib&quot;: [&quot;es2020&quot;, &quot;DOM&quot;],
          &quot;target&quot;: &quot;es2019&quot;,
          /**
              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.
              */
          &quot;importsNotUsedAsValues&quot;: &quot;error&quot;,
          &quot;isolatedModules&quot;: true,
          &quot;resolveJsonModule&quot;: true,
          /**
              To have warnings/errors of the Svelte compiler at the correct position,
              enable source maps by default.
              */
          &quot;sourceMap&quot;: true,
          &quot;esModuleInterop&quot;: true,
          &quot;skipLibCheck&quot;: true,
          &quot;forceConsistentCasingInFileNames&quot;: true,
          &quot;baseUrl&quot;: &quot;.&quot;,
          &quot;allowJs&quot;: true,
          &quot;checkJs&quot;: true,
          &quot;paths&quot;: {
              &quot;$lib&quot;: [&quot;src/lib&quot;],
              &quot;$lib/*&quot;: [&quot;src/lib/*&quot;]
          }
      },
      &quot;include&quot;: [&quot;src/**/*.d.ts&quot;, &quot;src/**/*.js&quot;, &quot;src/**/*.ts&quot;, &quot;src/**/*.svelte&quot;]
  }
  </code></pre>
  <p>And svelte.config.js:</p>
  <pre><code>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 &lt;div id=&quot;svelte&quot;&gt; element in src/app.html
          target: '#svelte'
      }
  };
  
  export default config;
  </code></pre>
  <p>routes/s.svelte</p>
  <pre><code>&lt;script&gt;
  
      // Import Swiper Svelte components    
      import { Navigation, Pagination, Scrollbar, A11y } from &quot;swiper&quot;;
      import { Swiper, SwiperSlide } from &quot;swiper/svelte&quot;;    
  
      // Import Swiper styles
      import &quot;swiper/css&quot;;
      import &quot;swiper/css/navigation&quot;;
      import &quot;swiper/css/pagination&quot;;
      import &quot;swiper/css/scrollbar&quot;;
  &lt;/script&gt;
  
  &lt;Swiper
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      on:slideChange={() =&gt; console.log(&quot;slide change&quot;)}
      on:swiper={(e) =&gt; console.log(e.detail[0])}
  &gt;
      &lt;SwiperSlide&gt;Slide 1&lt;/SwiperSlide&gt;
      &lt;SwiperSlide&gt;Slide 2&lt;/SwiperSlide&gt;
      &lt;SwiperSlide&gt;Slide 3&lt;/SwiperSlide&gt;
      &lt;SwiperSlide&gt;Slide 4&lt;/SwiperSlide&gt;
      ...
  &lt;/Swiper&gt;
  </code></pre>