Error while Adding React Slick carousel to Chackra Theme

🙋Get Help
1

I added react-slick to the Chackra Theme, I managed it to work more-or-less (the slider itself is working, but there are no arrows), but I get some error, as it does not find some resources.
The error on the CLI is:

Error: post type from endpoints "posts,pages,media" with slug "slick.woff" not found
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:8:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

And in the DevTools:

downloadable font: rejected by sanitizer (font-family: "slick" style:normal weight:400 stretch:100 src index:2) source: http://localhost:3000/fonts/slick.ttf
downloadable font: no supported format found (font-family: "slick" style:normal weight:400 stretch:100 src index:4) source: (end of source list)

And the same error for slick.ttf on both the CLI and DevTools.

The steps I made:
npm install slick-carousel react-slick --save
Added the following code to the frontity/packages/frontity-chakra-theme/src/components/index.js file:

import slickcss from "slick-carousel/slick/slick.css";
import slickcssTheme from "slick-carousel/slick/slick-theme.css";
...
  <Global styles={css(slickcss)} />
  <Global styles={css(slickcssTheme)} />
</ThemeProvider>

In components/home/home.js:

import Slider from "react-slick";
...
//Then use the slider like:
<Slider>
...
</Slider>

What did I wrong? Thanks!

2

Hey @koli14!

It looks like the font issue that you’re encountering is caused by either firefox running out of memory or a server misconfiguration

However, if you are just looking for a simple image slider I would advise against using react-slick and recommend something like:

  1. Uses a more modern, hook-based API (react-swipeable)
  2. Smaller size
  3. Works nicely with swipe gestures on mobile
  4. They don’t include any opinionated CSS. You can style them yourself easily!
3 Likes