Link Css file not working in Nextjs

akiran / react-slick

React carousel component

http://react-slick.neostack.com/

MIT License

11.62k stars 2.09k forks source link

Link Css file not working in Nextjs #2377

Open PunkFleet opened 1 month ago

PunkFleet commented 1 month ago

Guidelines for posting a new issue

Please replicate your issue with this CodeSandBox and provide a link to it along with the issue description

<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>

But these file not loaded in rendering

VMLuca commented 1 month 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 4 weeks 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 3 weeks ago

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

predmaxim commented 3 weeks ago

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

VMLuca commented 1 week 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 1 week 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 3 days ago

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

{
  "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 3 days 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