Gatsby: React lazy+suspense error

Created on 7 Jan 2019 · 4Comments · Source: gatsbyjs/gatsby

Description

Got error while building html

Steps to reproduce

Use and lazy in template.

For example this is my code from blog-post.js:

  renderContent(html) {
    if (typeof window === 'undefined') {
      return <div dangerouslySetInnerHTML={{__html: html}}/>
    }

    let Component, left

    const match = html.match(/<([\w-]+?)\/>/i)
    if (match) {
      Component = React.lazy(() => import('../play/' + match[1]))

      const [head, ...tail] = html.split(`<${match[1]}/>`)
      html = head
      left = tail.join('')
    }

    return <>
      <div dangerouslySetInnerHTML={{__html: html}}/>
      {Component && <Suspense fallback={<span/>}><Component/></Suspense>}
      {left && this.renderContent(left)}
    </>
  }

Expected result

Build page.

Actual result

Got error:


error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://gatsby.app/debug-html

  70 |              function getModuleExports() { return module; };
  71 |          __webpack_require__.d(getter, 'a', getter);
> 72 |          return getter;
     | ^
  73 |      };
  74 |
  75 |      // Object.prototype.hasOwnProperty.call


  WebpackError: /Users/anton/Projects/medv.io/public/render-page.js:3  009

  - bootstrap:72 new Script
    lib/webpack/bootstrap:72:1



  - static-entry.js:40 Module._compile
    lib/.cache/static-entry.js:40:12

Environment


  System:
    OS: macOS 10.14.2
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 4.4.23 - /usr/local/bin/bash
  Binaries:
    Node: 11.3.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.85 => 2.0.85 
    gatsby-plugin-feed: next => 2.0.0-rc.2 
    gatsby-plugin-google-analytics: next => 2.0.0-rc.2 
    gatsby-plugin-google-fonts: 0.0.4 => 0.0.4 
    gatsby-plugin-manifest: next => 2.0.2-rc.1 
    gatsby-plugin-offline: ^2.0.21 => 2.0.21 
    gatsby-plugin-react-helmet: next => 3.0.0-rc.1 
    gatsby-plugin-sass: next => 2.0.0-rc.2 
    gatsby-plugin-sharp: ^2.0.17 => 2.0.17 
    gatsby-remark-copy-linked-files: ^2.0.8 => 2.0.8 
    gatsby-remark-images: ^3.0.1 => 3.0.1 
    gatsby-remark-prismjs: next => 3.0.0-rc.2 
    gatsby-remark-reading-time: ^1.0.1 => 1.0.1 
    gatsby-remark-responsive-iframe: ^2.0.8 => 2.0.8 
    gatsby-remark-smartypants: next => 2.0.0-rc.1 
    gatsby-source-filesystem: ^2.0.12 => 2.0.12 
    gatsby-source-github-api: 0.0.3 => 0.0.3 
    gatsby-source-google-analytics-reporting-api: ^1.0.2 => 1.0.2 
    gatsby-transformer-remark: ^2.1.19 => 2.1.19 
    gatsby-transformer-sharp: next => 2.1.1-rc.3 
  npmGlobalPackages:
    gatsby-cli: 2.4.6

stale? question or discussion

Source

antonmedv

👍1

Most helpful comment

Hey @antonmedv

Just tried to reproduce this and stripped down your example to a minimal version necessary to test lazy and Suspense.

const SecondPage = () => {
  const html = ``
  if (typeof window === 'undefined') {
    return <div dangerouslySetInnerHTML={{ __html: html }} />
  } else {
    const Component = lazy(() => import('../components/image'))
    return (
      <>
        <div dangerouslySetInnerHTML={{ __html: html }} />
        <Suspense fallback={<span />}>
          <Component />
        </Suspense>
      </>
    )
  }
}

This works fine and as expected:

renders /public/page-2/index.html as an empty div
lazily fetches and renders ../components/image on the client

sidharthachatterjee on 7 Jan 2019

👍3

All 4 comments

Hey @antonmedv

Just tried to reproduce this and stripped down your example to a minimal version necessary to test lazy and Suspense.

const SecondPage = () => {
  const html = ``
  if (typeof window === 'undefined') {
    return <div dangerouslySetInnerHTML={{ __html: html }} />
  } else {
    const Component = lazy(() => import('../components/image'))
    return (
      <>
        <div dangerouslySetInnerHTML={{ __html: html }} />
        <Suspense fallback={<span />}>
          <Component />
        </Suspense>
      </>
    )
  }
}

This works fine and as expected: