Slider wont work when building

[konstantinschuette]

Description

I want to import the SplideJS Slider but I can't get it to work for the build. The Slider gets displayed properly with gatsby develop but an error occurs when you run gatsby build

Steps to reproduce

npm install @splidejs/react-splide

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import { Component } from "react"

import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';
class IndexPage extends Component {
  render() {
    return (
      <Layout>
        <SEO title="Home" />
        <h1>Hi people</h1>
        <Splide>
          <SplideSlide>
            <img src="image1.jpg" alt="Image 1"/>
          </SplideSlide>
          <SplideSlide>
            <img src="image2.jpg" alt="Image 2"/>
          </SplideSlide>
        </Splide>
        <p>Welcome to your new Gatsby site.</p>
        <p>Now go build something great.</p>
        <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
          <Image />
        </div>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      </Layout>
    )
  }
}
`gatsby build`
export default IndexPage

Expected result

The build should happen successfully and the slider should also work with gatsby serve

Actual result

failed Building static HTML for pages - 0.214s

 ERROR #95313 

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  14 |  else
  15 |          root["Splide"] = factory();
> 16 | })(self, function() {
     |  ^
  17 | return /******/ (() => { // webpackBootstrap
  18 | /******/         "use strict";
  19 | /******/         var __webpack_modules__ = ({


  WebpackError: ReferenceError: self is not defined

Environment

System:
  OS: Windows 10 10.0.19042
  CPU: (12) x64 Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz
Binaries:
  Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
  npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Chrome: 88.0.4324.190
  Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81)
npmPackages:
  gatsby: ^2.32.3 => 2.32.3 
  gatsby-image: ^2.11.0 => 2.11.0 
  gatsby-plugin-gatsby-cloud: ^1.0.1 => 1.0.1 
  gatsby-plugin-manifest: ^2.12.0 => 2.12.0 
  gatsby-plugin-offline: ^3.10.0 => 3.10.0 
  gatsby-plugin-postcss: ^3.7.0 => 3.7.0 
  gatsby-plugin-preact: ^4.7.0 => 4.7.0 
  gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0 
  gatsby-plugin-sharp: ^2.14.1 => 2.14.1 
  gatsby-source-filesystem: ^2.11.0 => 2.11.0 
  gatsby-transformer-sharp: ^2.12.0 => 2.12.0 
npmGlobalPackages:
  gatsby-cli: 2.19.1