Gatsby: React Slick not working with Gatsby

[mahayash]

Implemented the React-slick component, but the component is not working in production env on the Digital Ocean

The react slick component works great with 'gatsby develop' on dev env. but not with 'gatsby build' on production env after being deployed on the Digital Ocean. The site Saanwariya Hospitality has incorporated the react slick component, and as you can see the component which is there below "Places to visit " get stuck it not sliding :( . Even I have added the favicon link in the Helmet component as a prop, that even seems to not working

Environment (if relevant)

System:
OS: macOS Sierra 10.12.6
CPU: x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.10.0 - ~/.nvm/versions/node/v8.10.0/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.10.0/bin/npm
Browsers:
Chrome: 69.0.3497.92
Safari: 10.1.2
npmPackages:
gatsby: ^1.9.277 => 1.9.277
gatsby-link: ^1.6.46 => 1.6.46
gatsby-plugin-react-css-modules: ^1.0.15 => 1.0.15
gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
gatsby-plugin-styled-components: ^2.0.11 => 2.0.11
gatsby-source-filesystem: ^1.5.39 => 1.5.39
gatsby-transformer-remark: ^1.7.44 => 1.7.44
npmGlobalPackages:
gatsby-cli: 1.1.58

File contents (if changed)

// gatsby-config.js:
module.exports = {
  siteMetadata: {
    title: 'Saanwariya Hospitality',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    `gatsby-transformer-remark`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/visitPlaces`,
        name: 'pages',
      },
    },
  ],
}

// package.json: 
{
  "name": "saanwariya-hospitality",
  "description": "Saanwariya Hospitality",
  "version": "1.0.0",
  "author": "PDA <[email protected]>",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/react-fontawesome": "^0.1.2",
    "gatsby": "^1.9.277",
    "gatsby-link": "^1.6.46",
    "gatsby-plugin-react-css-modules": "^1.0.15",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-styled-components": "^2.0.11",
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-transformer-remark": "^1.7.44",
    "gifsicle": "^3.0.4",
    "react-helmet": "^5.2.0",
    "react-slick": "^0.23.1",
    "slick-carousel": "^1.8.1",
    "styled-components": "^3.4.6"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "css-loader": "^1.0.0",
    "font-awesome": "^4.7.0",
    "prettier": "^1.13.7"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "guppy": {
    "id": "saanwariya-hospitality",
    "name": "saanwariya-hospitality",
    "type": "gatsby",
    "color": "#4919b7",
    "icon": null,
    "createdAt": 1536220192113
  }
}

// gatsby-node.js:
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
  const { createNodeField } = boundActionCreators
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allMarkdownRemark {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `).then(result => {
      result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
          path: node.fields.slug,
          component: path.resolve(`./src/pages/visitPlaces.js`),
          context: {
            // Data passed to context is available in page queries as GraphQL variables.
            slug: node.fields.slug,
          },
        })
      })
      resolve()
    })
  })
}

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[kakadiadarpan]

Hi @mahayash, can you please provide a reproduction repo for this? That would make it much easier to diagnose this issue.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍

[dedan]

@mahayash Did you solve this problem in the end? I also have a problem where react-slick works in development, but not in production

[kakadiadarpan]

@dedan I recommend you to open a new issue with a sample reproduction repository. That would make it much easier to help you.

[daniel7912]

@mahayash @dedan I also had this problem and it turns out that the purgecss plugin was removing the slick styles. I solved it by configuring it like this:

{
      resolve: 'gatsby-plugin-purgecss',
      options: {
        ignore: [
          '/node_modules/slick-carousel/slick/slick.css',
          '/node_modules/slick-carousel/slick/slick-theme.css'
        ]
      }
    },

Hope it helps!

[Rishabh-Rathod]

@mahayash @dedan I also had this problem and it turns out that the purgecss plugin was removing the slick styles. I solved it by configuring it like this:

{
      resolve: 'gatsby-plugin-purgecss',
      options: {
        ignore: [
          '/node_modules/slick-carousel/slick/slick.css',
          '/node_modules/slick-carousel/slick/slick-theme.css'
        ]
      }
    },

Hope it helps!

i tried what you recommended ..it didn't worked out as expected ..
in my case i solved it by importing the styles in gatsby-browser.js from node-modules directly

[Had3r]

I ran into a similar problem. Thanks @daniel7912 that solved my problem!

[paco-antley]

I had the same problem but none of the previously posted solutions worked for me so what I end doing is add to the plugin options the whitelist property with the list of slick classes to keep and now is working:

``{ resolve:gatsby-plugin-purgecss`,
options: {
whitelist: ['slick-slider',
'slick-initialized',
'slick-list',
'slick-track',
'slick-slide',
'slick-active',
'slick-current']
}