{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/dynamic-import-tips-for-gatsby/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"7abcf071-be73-5e79-8f69-06b345c43c5e","excerpt":"前記事のGatsby 製サイトに Algolia のサイト内検索を実装するを実現するにあたって、色々ライブラリが増えるけどページのロード時間は増やしたくなかったので React Suspense（以下 Suspense）＋ React.lazy ＋ Dynamic import で Code splitting…","html":"

前記事のGatsby 製サイトに Algolia のサイト内検索を実装するを実現するにあたって、色々ライブラリが増えるけどページのロード時間は増やしたくなかったので React Suspense（以下 Suspense）＋ React.lazy ＋ Dynamic import で Code splitting を試みたところハマったので備忘録を残します。

\n\n

TL;DR

\n\n

再現コード

\n

動かないので GitHub にはコミットされていませんが、こんな感じのことをすると Gatsby のビルドがこける。

\n
import React, { Suspense, lazy } from 'react'\n\nexport function Hoge() {\n  const SomeComponent = lazy(() => import('./SomeComponent'))\n  return (\n    <Suspense fallback={null}>\n      <SomeComponent />\n    </Suspense>\n  )\n}
\n

このコードはgatsby developで動作確認しているときは普通に動くので余計にハマった。

\n

エラーの内容

\n

gatsby buildすると以下のエラーが発生した。

\n

https://reactjs.org/docs/error-decoder.html/?invariant=294

\n

これでは分からないのでデコードしてみると、以下のエラーだった。

\n
ReactDOMServer does not yet support Suspense.
\n

まだサポートされていなかった。
\nもしかして使ってる React のバージョンが古いんじゃないかと思ったものの、バージョンは記事執筆時の最新（16.8.6）だった

\n

React のロードマップを調べる

\n

いつ頃使えるようになるのか調べてみたが、明確にどのバージョンでリリースされるかは明記されていなかった。

\n
\n

Suspense for Server Rendering
\nWe started designing a new server renderer that supports Suspense (including waiting for asynchronous data on the server without double rendering) and progressively loading and hydrating page content in chunks for best user experience. You can watch an overview of its early prototype in this talk. The new server renderer is going to be our major focus in 2019, but it’s too early to say anything about its release schedule. Its development, as always, will happen on GitHub.

\n

— React 16.x Roadmap – React Blog

\n
\n

Gatsby の Issue

\n

Gatsby にすでに Issue が報告されていた。

\n
\n

— Suspense and React.lazy isn’t working · Issue #11960 · gatsbyjs/gatsby

\n
\n

回答によると、まだ Suspense+React.lazy はサポートされていないので、サポートされるまでLoadable componentsというパッケージを使ってねとのこと。

\n
\n

Gatsby is using SSR which Suspense & React.Lazy not yet support. You can move to a full client site to use those features but to have the static generation of pages you sadly can’t. React recommonds to use the Loadable components package until SSR is resolved.

\n

— Suspense and React.lazy isn’t working · Issue #11960 · gatsbyjs/gatsby

\n
\n

work around

\n

React.lazy の公式ドキュメントにでかでかと書いてあった。

\n

\n \n \n \n \n \n \n \n \n

\n

Loadable Components と書かれているリンク先がこのリポジトリ。

\n

smooth-code/loadable-components

\n

使い方は Suspense + React.lazy を一手に担う感じ。大きくコードは変わらない。

\n
import React from 'react'\nimport loadable from '@loadable/component'\n\nconst OtherComponent = loadable(() => import('./OtherComponent'))\n\nfunction MyComponent() {\n  return <OtherComponent />\n}
\n

このコードを Suspense + React.lazy で書くとこうなる。
\nほぼ Suspense+React.lazy と同様の使用感で使える。

\n
import React, { Suspense, lazy } from 'react'\n\nconst OtherComponent = lazy(() => import('./OtherComponent'))\n\nfunction MyComponent() {\n  return (\n    <Suspense fallback={null}>\n      <OtherComponent />\n    </Suspense>\n  )\n}
\n

結果的にコミットされた dynamic import はこうなった。

","timeToRead":4,"frontmatter":{"title":"GatsbyでReactコンポーネントをDynamic importしてCode Splitするwork around","tags":["JavaScript","Gatsby","React"],"date":"May 07, 2019","featuredImage":null}}},"pageContext":{"slug":"/dynamic-import-tips-for-gatsby/","previous":{"fields":{"slug":"/on-site-search-in-gatsby-with-algolia/"},"frontmatter":{"title":"Gatsby製サイトにAlgoliaのサイト内検索を実装する","tags":["Algolia","JavaScript","Node.js","Gatsby","React"]}},"next":{"fields":{"slug":"/convert-any-html-element-to-image/"},"frontmatter":{"title":"シンタックスハイライト済みのソースコードの画像をブラウザだけで作成したい","tags":["JavaScript","Canvas"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}