【Next.js】Invariant Violation: React.Children.only expected to〜が吐き出される

Next.js React.js

こんなエラーが出た場合、

Invariant Violation: React.Children.only expected to receive a single React element child.

意味としては、「Reactのコンポーネントは、1つしかエレメントを内包できません」という意味となります。

        return (
            <StripeProvider stripe={this.state.stripe}>
                    <Head>
                        <script src="https://js.stripe.com/v2/"></script>
                    </Head>
                    <Header />
                    <div>
                        <h2>{detail.pageName}</h2>
                        <h4>概要</h4>
                        <p>{detail.body}</p>
                        <h4>アーティスト名　</h4>
                        <p>{detail.artistName}</p>
                        <h4>月額</h4>
                        <p>{detail.monthlyFee}円</p>
                    </div>
                    <Elements>
                        <CheckoutForm />
                    </Elements>
                    <Footer />
                    <style jsx>{`
                        div {
                            margin: 0 auto;
                            width: 80%;
                            height: 80%;
                        }
                        .fan-img {
                            display: block;
                        }
                    `}</style>
            </StripeProvider>
          );

ここでいうReactのコンポーネントは、

<StripeProvider stripe={this.state.stripe}>...</StripeProvide}>

のことで、その中のエレメントを何かしらの要素で1まとめにしてあげれば解決します。

以下のような感じです。

        return (
            <StripeProvider stripe={this.state.stripe}>
                <> // 追加
                    <Head>
                        <script src="https://js.stripe.com/v2/"></script>
                    </Head>
                    <Header />
                    <div>
                        <h2>{detail.pageName}</h2>
                        <h4>概要</h4>
                        <p>{detail.body}</p>
                        <h4>アーティスト名　</h4>
                        <p>{detail.artistName}</p>
                        <h4>月額</h4>
                        <p>{detail.monthlyFee}円</p>
                    </div>
                    <Elements>
                        <CheckoutForm />
                    </Elements>
                    <Footer />
                    <style jsx>{`
                        div {
                            margin: 0 auto;
                            width: 80%;
                            height: 80%;
                        }
                        .fan-img {
                            display: block;
                        }
                    `}</style>
                </> // 追加
            </StripeProvider>
          );