Gatsby import

Hello,

so I tried the import with Gatsby but, because its SSR, it can’t access the functions needed from the client side. I followed along the steps on the react page: https://splidejs.com/integration-react-splide/

But I only get this error:

ReferenceError: self is not defined
    at Object../node_modules/@splidejs/splide/dist/js/splide.esm.js

Could anyone help me set up Splide with Gatsby?

[subgero]

This solution works for me, in gatsby-node.js file:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /@splidejs/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

Then, in your component add the next lines:

if (typeof window === "undefined") {
    return <p>Server Render</p>
  }

Src: link

[animald]

Am I correct in thinking that this essentially forces Splider to render client side?

Either way, the self is not defined error relates to self not being available to NodeJs.

I have posted a fix here: #252, as the same issue interrupts Gridsome build. The end result is a fully working SSR rendered splider.