search

akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.76k stars 2.11k forks source link

Link Css file not working in Nextjs #2377

Open PunkFleet opened 5 months ago

PunkFleet commented 5 months ago

Guidelines for posting a new issue

VMLuca commented 5 months ago

I would import it like this in the layout file if you use app router or in the _app file if you use page router.

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
deku-redfox commented 5 months ago

I would import it like this in the layout file if you use app router or in the _app file if you use page router.

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

This raise an Cannot resolve 'slick-carousel/slick/slick.css' issue on my project. I installed the package using the npm method and my project is using Nextjs 14.

VMLuca commented 5 months ago

You also need to install slick-carousel like it is described on the README, I think. Maybe this solves it.

predmaxim commented 5 months ago

I have the same problem. I installed everything according to the instructions image image image

VMLuca commented 4 months ago

ah ok, I see you guys use next.js with turbopack. I ran into the same issue, somehow it is not working with turbopack I have no clue why. Just turn it off and it will work. I think for the long run I switch to a library called "embla-carousel" it looks like it is better maintained than this library. There are a couple of more bugs I ran into.

VMLuca commented 4 months ago

I have only tested it in my enterprise application so there are a lots of other dependency I thought that may be the cause. But if you can reproduce with a new next.js project would be nice if you either adjust the title of this issue or create a new issue and close this one.

TechhDan commented 4 months ago

I'm having issues importing the css. It doesn't seem to find the file. I'm using next JS.

image 
{
  "name": "tms-software-next-v2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^2.0.4",
    "@heroicons/react": "^2.1.4",
    "axios": "^1.7.2",
    "clsx": "^2.1.1",
    "js-cookie": "^3.0.5",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.2.1",
    "react-slick": "^0.30.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}
PunkFleet commented 4 months ago

ah ok, I see you guys use next.js with turbopack. I ran into the same issue, somehow it is not working with turbopack I have no clue why. Just turn it off and it will work. I think for the long run I switch to a library called "embla-carousel" it looks like it is better maintained then this library. There are a couple of more bugs I ran into.

I also given up this package

MuhammadMujtabaa commented 4 months ago

this issue was fixed for me after using the following code given below inside the _document.js file

/** @format */

import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>

        <link
          rel="stylesheet"
          type="text/css"
          charSet="UTF-8"
          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
        />
        <link
          rel="stylesheet"
          type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
ignacio-dev commented 3 months ago

Yeah, same issue with Vite in Laravel.. what a shame