react-slick
react-slick copied to clipboard
akiran
Link Css file not working in Nextjs
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
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";
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.
You also need to install slick-carousel like it is described on the README, I think. Maybe this solves it.
I have the same problem. I installed everything according to the instructions
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.
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.
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"
}
}
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
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>
);
}
