DEV Community

React Splide with Gatsby: Top Tip

Jamie Bradley on January 07, 2021

Update: Splide is now in Version 3 and (since the update) React Splide appears to work well with Gatsby (tested on V4) without any additional confi...

Read full post

Livio Brunner • Apr 29 '21

Awesome article! I wonder do you know what is the root cause of this? I am currently struggling with this error with an internal third party library which I can easily contribute to. Is something messed up with the build output of that third party library (maybe tweak the Webpack / Rollup config on the libraries side)?

Livio Brunner • Apr 29 '21

Ah I think Gatsby does not work well with UMD library output. I've changed the third party library to use CommonJS and now I don't need any workarounds.

Here is my rollup config:

import resolve from '@rollup/plugin-node-resolve';
import sourcemaps from 'rollup-plugin-sourcemaps';

export default {
  input: {
    index: 'dist-transpiled/index',
    // 'routing/index': 'dist-transpiled/routing/index'
  },
  output: [
    {
      dir: 'dist/',
      entryFileNames: '[name].esm.js',
      chunkFileNames: '[name]-[hash].esm.js',
      format: 'es',
      sourcemap: true,
    },
    {
      dir: 'dist/',
      format: 'commonjs',
      preferConst: true,
      sourcemap: true,
    },
  ],
  external: (id) => !/^(\.|\/)/.test(id),
  plugins: [
    resolve(),
    sourcemaps(),
  ],
};

The libraries tsconfig.json:

{
  "compilerOptions": {
    "outDir": "dist-transpiled",
    "module": "es2015",
    "lib": ["dom", "es2015"],
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2015",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

and my build command:

tsc -p . && rollup -c

Jamie Bradley • May 24 '21

Sorry @brunnerlivio I missed your comment. That's a great find, I wasn't sure of the root cause myself but your insight is really useful. Thank you.

Livio Brunner • May 25 '21

Worte an article shedding a light on this here:
dev.to/brunnerlivio/use-stencil-wi...

Marco Adinolfi • Mar 2 '21 • Edited

Hi Jamie, thank you so much for this article!
It's the only one that helped me get Splidejs (great tool) and Gatsby working on the site I was building.
Just one suggestion, with the new SSR Gatsby functionality set to true (and so active) now it's better to update the if statement inside the onCreateWebpackConfig to "if (stage === "build-html" || stage === "develop-html")" so that you don't receive any error during development phase (gatsby develop). At least I had to do it. Maybe you could update the article with this info, it could help someone else.
Thank you so much for your help

Jamie Bradley • Apr 9 '21

Sorry for the delayed response Marco! I've had some time away from this site for a bit as I've been busy with day job. Yeah absolutely I'll get this updated and thank you for sharing.

Zubair Aziz • Feb 13 '21

Hi Jamie, I followed these steps and the build ran fine. But getting this error on the rendered HTML:

[SPLIDE] Track or list was not found.
j @ splide.esm.js:953
2react-dom.production.min.js:216 TypeError: Cannot read property 'length' of undefined
at Object.get length as length
at i.get (splide.esm.js:1838)
at Object.get edgeIndex as edgeIndex
at Object.handler (splide.esm.js:2755)
at splide.esm.js:139
at Array.forEach ()
at Object.emit (splide.esm.js:137)
at i.r.emit (splide.esm.js:1703)
at i.r.refresh (splide.esm.js:1772)
at m.value (Splide.js:208)

animald • Apr 23 '21

Hi, if you're still having issues I suggest you try reverting the changes made and importing node-self before your splider import.

The self is not defined error relates to self not being implemented in NodeJs - the above fixes that issue and the result should be a fully working SSR rendered splider. (At least that is the case in my Gridsome project).

Cheers!

Jamie Bradley • Apr 27 '21

Thanks @animald , appreciate the input!

Jamie Bradley • Apr 9 '21

Sorry for the delay Zubair, interesting as I've not seen this error before. I don't suppose this is related to Marco's comment regarding SSR during dev? I'm only asking with you saying that the build worked fine. I'm reading this as it worked during build phase but not dev phase. Thanks!

M Difa Ananda • Jan 20 '21

Hi Jamie, thanks for the tutorial!
But i follow the step above, and it seems the errors still appear.
Do you have any idea?

Jamie Bradley • Jan 21 '21

Oh that's not good (and slightly awkward 😬) which of the errors are you still getting? I'm presuming you mean:

WebpackError: ReferenceError: self is not defined

Let me know. I'm happy to have a look if you want share the code with me, maybe DM me on Twitter(@jamiebradley234)?

M Difa Ananda • Jan 21 '21

Here's my code pastebin.com/m4cB3Rec
Btw, I can't send the dm to your Twitter.

Jamie Bradley • Jan 21 '21

Thanks, can you send me your twitter handler please and I'll try reaching out to you over Twitter. I've got some questions but I don't want to spam the thread 😂

M Difa Ananda • Jan 21 '21

Sure, twitter.com/difaananda40

Jamie Bradley • Jan 21 '21 • Edited

Thanks for going through this with me on Twitter! For everyone else's reference the change was to update object in the rules array from:

{
  test: /@splidejs\/react-splide/,
  use: loaders.null(),
}

{
  test: /@splidejs/,
  use: loaders.null(),
}

I have updated the post accordingly!

Michael Hoffmann • Apr 9 '21

Thanks, I was looking exactly for a solution for that problem!