I am planning to add React-slick library into my nextjs project for image slider, but getting an issue
Tries installing "react-slick" and "slick-carousel" as mentioned in the docs by
yarn add react-slick
yarn add slick-carousel
but then as soon as i import the css in my _app.tsx file it gives error
Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'
_app.tsx file
import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import "@styles/global.scss";
import { Provider } from "react-redux";
import store from "@redux/store";
import { MuiThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "src/createMiuitheme";
import "~slick-carousel/slick/slick.css"; //here
import "~slick-carousel/slick/slick-theme.css"; //here
function MyApp({ Component, pageProps }: AppProps): JSX.Element {
// const theme = responsiveFontSizes(createTheme());
return (
<>
<Head>
<link rel="shortcut icon" href="#" />
<meta charSet="utf-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
<meta name="theme-color" content={theme.palette.primary.main} />
</Head>
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</MuiThemeProvider>
</Provider>
</>
);
}
export default MyApp;
next.config.js file
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
module.exports = withPlugins([], {});
module.exports = withImages();
package.json
{
"name": "my_first_app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 4000",
"build": "next build",
"start": "next start",
"test": "jest -c test/jest.config.js"
},
"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@reduxjs/toolkit": "^1.6.0",
"@types/jest": "^27.0.1",
"axios": "^0.21.4",
"formik": "^2.2.9",
"next": "10.2.0",
"next-compose-plugins": "^2.2.1",
"next-i18next": "^7.0.1",
"next-images": "^1.8.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-query": "^3.23.2",
"react-redux": "^7.2.4",
"react-slick": "^0.28.1",
"sass": "^1.32.5",
"slick-carousel": "^1.8.1",
"yup": "^0.32.9"
},
"devDependencies": {
"@types/node": "^14.14.13",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-redux": "^7.1.16",
"dotenv": "^8.2.0",
"identity-obj-proxy": "^3.0.0",
"isomorphic-unfetch": "^3.1.0",
"jest": "^26.6.3",
"nock": "^13.0.6",
"ts-jest": "^26.4.4",
"typescript": "^4.1.3"
}
}
Just removed the tilde prefix
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';