Gatsbyによる反応Splide:一番上の先端

更新プログラム:Splideは、現在バージョン3と(更新以来)ですReact Splide 追加の設定なしでgatsby(v 4でテストされた)とうまく動作するように見えます.この記事は、反応Splideの古いバージョンを使用する場合にのみ有用です.
あなたがSplidejsに決して遭遇しないならば、私はあなたにそれをチェックするよう奨励します.これは、カルーセルを構築するための素晴らしいプラグインだと私は、ドキュメントは素晴らしいと思います.Check out SplideJS here .
私の痛い午後についてあなたに話すことから始めましょう.
今日は、ギャツビーを使ってクライアントのウェブサイトで働いています.今日までは、すべてがうまくいっている!今日の私の仕事はカルーセルのコンポーネントを開発することだったので、私は私の好きなツール(splide)になって、私は彼らが反応ポートを持っていることに気づいた.「ものすごい」私は考えました.
それからnetlifyログのエラーに気がついた.

  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

これはよく見えません.

のデバッグ
HTMLビルドのデバッグについては、gatsbyドキュメントに大きなセクションがありますhere . 私はこれを相談し、サードパーティ製モジュールのセクションを見つけました.私は、このアプローチをwindow HTMLビルド中にオブジェクトを作成するので、私はこの移動を与えると思いました.
インgatsby-node.js 次のように付け加えました.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  // With SSR enabled during development, we capture this
  // in development and during production build.
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /@splidejs/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

グレート💥 走りましょうgatsby build 再び.あらまあ

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

新しいエラーがあります.新しいエラーは良い、それは進行を意味する!エラーデコーダURLを新しいブラウザにコピーすると、以下のエラーが返されます.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

最初は困惑していたが、コーヒーの後は意味があった.私たちは、WebPackに反応したsplideをダミーモジュールに置き換えるように伝えました.The loaders.null() 我々は何も価値を返すつもりはないことを示唆undefined .
したがって、カルーセルコンポーネントの最終結果は以下の通りです.

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

  return (
    <Box mb={24}>
      <Splide
        options={{
          perPage: 1,
          perMove: 1,
          arrows: false,
        }}
      >
        {data.map(testimonial => {
          return (
            <SplideSlide key={testimonial.id}>
              <Flex bgColor="blue.600">
                <Box width="400px">
                  {/* To be replaced with Gatsby Image */}
                  <img src={testimonial.imageUrl} alt={testimonial.alt} />
                </Box>
                <Box py={12} px={12} display="flex" flex={1} color="white">
                  <PortableText blocks={testimonial._rawTestimonialText} />
                </Box>
              </Flex>
            </SplideSlide>
          )
        })}
      </Splide>
    </Box>
  )
}

つまり、HTMLビルドが行われると、コンポーネントは戻ります<p>Server Render</p> むしろundefined . ブラウザでコードを実行すると、window が定義され、splideコンポーネントが表示されます.

結論
私は、それがこの問題に遭遇する他の誰でも助けるという望みで、これを書きました.あなたがそれが役に立つならば、コメントで私に知らせてください.
ありがとう