React Hydrogen Unknown file extension ".css" when using slider library

Question

I'm trying to use a Splide Slider library inside my Hydrogen project. Hydrogen makes use of server components.

So, I created the slider as a .client component and then try to render it in a server component. However I get an error because I'm importing a css file.

[vite] Internal server error: Unknown file extension ".css" for .../node_modules/@splidejs/react-splide/dist/css/splide.min.css

I tried updating the vite.config file to add css import support to server components, but I still get the same error. Below is what the Hydrogen docs suggest:

export default defineConfig({
  plugins: [hydrogen({experimental: {css: 'global'}})]
})

The issues is defiantly the css import because once I remove it and restart my dev env it loads. Also if I start up the env without the import and then add it back, after the hot reload, it works, but once the browser is refreshed the error is thrown again.

Here's the component which is just boilerplate.

import {Splide, SplideSlide} from '@splidejs/react-splide'
import '@splidejs/react-splide/css'

export function ProductSlider() {
  return (
    <>
      <Splide
        options={{rewind: true}}
        aria-label="React Splide Example"
      >
        <SplideSlide>
          <p>test</p>
        </SplideSlide>
        <SplideSlide>
          <p>test 2</p>
        </SplideSlide>
      </Splide>
    </>
  )
} 

Any ideas on how I might get around this?

Answer 1

My solution was to copy the minified css files from node models and place them in my src directory then import the css from src into the component.

Not my favourite, but it works.