SvelteKit build issue between adapter-node and Swiper

[doceazedo]

Describe the bug

Running npm run build on a SvelteKit project that uses Swiper will throw a build error. I noticed that this doesn't happen with adapter-auto, but with adapter-node.

I saw a similar error described on the issue #3015 but it was closed because it looks like a problem with Swiper but the issue #5288 on the Swiper repository was also closed (I didn't quite understand the reason), so I'm opening a new one with a better description and easy way to reproduce.

I'm still not sure if this is a problem with SvelteKit or with Swiper, but since this appears to only happen with the node adapter, I think it makes sense to be discussed here.

Reproduction

• Start a new SvelteKit project
• Install swiper and @sveltejs/adapter-node@next
• In "svelte.config.js", change the adapter to import from @sveltejs/adapter-node
• In "src/routes/index.svelte", use Swiper normally, like in this example from their docs:

  <script>
    import { Swiper, SwiperSlide } from 'swiper/svelte';
    import 'swiper/css';
  </script>
  
  <Swiper
    spaceBetween={50}
    slidesPerView={3}
    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>

• Try to run npm run build

Logs

> Using @sveltejs/adapter-node
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for F:\Projetos HDD\temp-test-swiper\node_modules\swiper\swiper.min.css
    at new NodeError (internal/errors.js:322:7)
    at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
    at Loader.getFormat (internal/modules/esm/loader.js:105:42)
    at Loader.getModuleJob (internal/modules/esm/loader.js:243:31)
    at async ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:78:21)
    at async Promise.all (index 2)
    at async link (internal/modules/esm/module_job.js:83:9)
> 500 /
Error: 500 /
    at file:///F:/Projetos%20HDD/temp-test-swiper/node_modules/@sveltejs/kit/dist/chunks/index4.js:86:11
    at visit (file:///F:/Projetos%20HDD/temp-test-swiper/node_modules/@sveltejs/kit/dist/chunks/index4.js:222:5)
    at async prerender (file:///F:/Projetos%20HDD/temp-test-swiper/node_modules/@sveltejs/kit/dist/chunks/index4.js:303:6)
    at async Object.prerender (file:///F:/Projetos%20HDD/temp-test-swiper/node_modules/@sveltejs/kit/dist/chunks/index4.js:368:4)
    at async adapt (file:///F:/Projetos%20HDD/temp-test-swiper/node_modules/@sveltejs/adapter-node/index.js:111:4)
    at async adapt (file:///F:/Projetos%20HDD/temp-test-swiper/node_modules/@sveltejs/kit/dist/chunks/index4.js:393:2)
    at async file:///F:/Projetos%20HDD/temp-test-swiper/node_modules/@sveltejs/kit/dist/cli.js:896:5
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
    Memory: 10.30 GB / 23.95 GB
  Binaries:
    Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.57)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.4
    @sveltejs/adapter-node: ^1.0.0-next.56 => 1.0.0-next.56
    @sveltejs/kit: next => 1.0.0-next.202
    svelte: ^3.44.0 => 3.44.3

Severity

blocking an upgrade

Additional Information

No response

[Amerlander]

Had the same error, is fixed for me since release v7.3.4

[doceazedo]

Had the same error, is fixed for me since release v7.3.4

That's great! I tried to reproduce it again and confirmed that it's fixed.