Gatsby: Problem building 'buffer without document' with Aphrodite

[Gabsii]

First of all, great job on building an maintaining GatsbyJS. Websites run so much faster with static files being rendered.

Description

When trying to build my website to static files i run into an error (see actual result). I read in #544 that the problem comes from aphrodite. However in #544 it was mentioned that running Gatsby v1 would fix this issues. Is there a known workaround for my problem? Tried the tips in the linked issue but it didn't work for me.

Steps to reproduce

gatsby build

affected file: Gabsii/gabsii/blob/master/src/templates/BlogPage.jsx

Expected result

build site to static files

Actual result

success Building CSS — 3.480 s
success Building production JavaScript bundles — 10.126 s

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  815 |         // place without a document), so guard against that.
  816 |         if (typeof document === "undefined") {
> 817 |             throw new Error("Cannot automatically buffer without a document");
      | ^
  818 |         }
  819 |
  820 |         // If we're not already buffering, schedule a call to flush the


  WebpackError: Cannot automatically buffer without a document

  - chunk-ff1dea3c.js:817 injectGeneratedCSSOnce
    ~/aphrodite/lib/chunk-ff1dea3c.js:817:1

  - chunk-ff1dea3c.js:843 injectStyleOnce
    ~/aphrodite/lib/chunk-ff1dea3c.js:843:1

  - chunk-ff1dea3c.js:947 injectAndGetClassName
    ~/aphrodite/lib/chunk-ff1dea3c.js:947:1

  - chunk-ff1dea3c.js:1158 css
    ~/aphrodite/lib/chunk-ff1dea3c.js:1158:1

  - BlogPage.jsx:66 BlogPage.render
    src/templates/BlogPage.jsx:66:33

  - ReactCompositeComponent.js:796 ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
    ~/react-dom/lib/ReactCompositeComponent.js:796:1

  - ReactCompositeComponent.js:819 ReactCompositeComponentWrapper._renderValidatedComponent
    ~/react-dom/lib/ReactCompositeComponent.js:819:1

  - ReactCompositeComponent.js:359 ReactCompositeComponentWrapper.performInitialMount
    ~/react-dom/lib/ReactCompositeComponent.js:359:1

  - ReactCompositeComponent.js:255 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:255:1

  - ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1

Environment

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 10.6.0 - D:\NodeJS\node.EXE
    npm: 6.1.0 - D:\NodeJS\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^1.9.277 => 1.9.277
    gatsby-link: ^1.6.46 => 1.6.46
    gatsby-plugin-manifest: ^1.0.27 => 1.0.27
    gatsby-plugin-nprogress: ^1.0.14 => 1.0.14
    gatsby-plugin-offline: ^1.0.18 => 1.0.18
    gatsby-plugin-page-transitions: ^1.0.7 => 1.0.7
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
    gatsby-source-wordpress: ^2.0.93 => 2.0.93

[KyleAMathews]

You'll need to do something similar to what's documented here: https://github.com/Khan/aphrodite#server-side-rendering

[lumos-gonz]

@KyleAMathews Let's refine the question. What do we need to modify on the plugin's gatsby-ssr for it to work on v2? I cannot spot anything wrong so far https://github.com/biw/gatsby-plugin-aphrodite/blob/master/src/gatsby-ssr.js

[biw]

@lumos-gonz & @Gabsii are you still running into issues? I'd be happy to help debug or fix biw/gatsby-plugin-aphrodite

[alvim54]

Hi @biw, I can't build my gatsby v2 project with aphrodite either. I've added gatsby-plugin-aphrodite and now I've got this error:

info bootstrap finished - 4.248 s

success Building production JavaScript and CSS bundles — 6.537 s

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  662 |     if (styleTag == null) {
  663 |         // Try to find a style tag with the `data-aphrodite` attribute first.
> 664 |         styleTag = document.querySelector("style[data-aphrodite]") /* : any */;
      | ^
  665 | 
  666 |         // If that doesn't work, generate a new style tag.
  667 |         if (styleTag == null) {


  WebpackError: ReferenceError: document is not defined

  - chunk-9cf6448a.js:664 injectStyleTag
    [lib]/[aphrodite]/es/chunk-9cf6448a.js:664:1

  - chunk-9cf6448a.js:874 flushToStyleTag
    [lib]/[aphrodite]/es/chunk-9cf6448a.js:874:1

  - aphroditeInterfaceFactory.js:90 Object.flush
    [lib]/[react-with-styles-interface-aphrodite]/lib/aphroditeInterfaceFactory.js:90:1

  - ThemedStyleSheet.js:80 Object.flush
    [lib]/[react-with-styles]/lib/ThemedStyleSheet.js:80:1

  - withStyles.js:213 WithStyles.render
    [lib]/[react-with-styles]/lib/withStyles.js:213:1

  - bootstrap:19 d
    lib/webpack/bootstrap:19:1

  - bootstrap:19 ua
    lib/webpack/bootstrap:19:1

  - bootstrap:24 a.render
    lib/webpack/bootstrap:24:1



  - gatsby-ssr.js:17 
    [lib]/[gatsby-plugin-aphrodite]/gatsby-ssr.js:17:1

  - chunk-9cf6448a.js:1023 Object.renderStatic
    [lib]/[aphrodite]/es/chunk-9cf6448a.js:1023:1

  - gatsby-ssr.js:16 Object../node_modules/gatsby-plugin-aphrodite/gatsby-ssr.js.exports.replaceRenderer
    [lib]/[gatsby-plugin-aphrodite]/gatsby-ssr.js:16:1

  - api-runner-ssr.js:37 plugins.map.plugin
    lib/.cache/api-runner-ssr.js:37:39


  - api-runner-ssr.js:33 ./.cache/api-runner-ssr.js.module.exports
    lib/.cache/api-runner-ssr.js:33:25

Is there a workaround to make this build?

[biw]

@alvim54 was able to recreate your error, working on a fix now 😄

[biw]

@alvim54 @lumos-gonz @Gabsii In my testing, the issue has been fixed in 2.0.5 😄

Let me know if you have trouble but it should work now!

https://www.npmjs.com/package/gatsby-plugin-aphrodite

[biw]

In the future please file an issue on the project's Github 😃, only saw this out of luck

[alvim54]

@biw thank you very much for the quick reply and fix! I've updated to 2.0.5 and now got the same error than @Gabsii:

success Building production JavaScript and CSS bundles — 16.017 s

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  811 |         // place without a document), so guard against that.
  812 |         if (typeof document === "undefined") {
> 813 |             throw new Error("Cannot automatically buffer without a document");
      | ^
  814 |         }
  815 | 
  816 |         // If we're not already buffering, schedule a call to flush the


  WebpackError: Cannot automatically buffer without a document

  - chunk-9cf6448a.js:813 injectGeneratedCSSOnce
    [lib]/[aphrodite]/es/chunk-9cf6448a.js:813:1

  - chunk-9cf6448a.js:839 injectStyleOnce
    [lib]/[aphrodite]/es/chunk-9cf6448a.js:839:1

  - chunk-9cf6448a.js:943 injectAndGetClassName
    [lib]/[aphrodite]/es/chunk-9cf6448a.js:943:1

  - chunk-9cf6448a.js:1154 css
    [lib]/[aphrodite]/es/chunk-9cf6448a.js:1154:1

  - resolveLTR.js:34 resolveLTR
    [lib]/[react-with-styles-interface-aphrodite]/lib/utils/resolveLTR.js:34:1

  - aphroditeInterfaceFactory.js:71 Object.resolveLTR
    [lib]/[react-with-styles-interface-aphrodite]/lib/aphroditeInterfaceFactory.js:71:1

  - ThemedStyleSheet.js:60 resolveLTR
    [lib]/[react-with-styles]/lib/ThemedStyleSheet.js:60:1

  - Cell.js:106 Cell
    [lib]/[cinnecta-ui]/lib/components/Cell.js:106:1


  - bootstrap:19 ua
    lib/webpack/bootstrap:19:1

  - bootstrap:24 a.render
    lib/webpack/bootstrap:24:1



  - gatsby-ssr.js:32 
    [lib]/[gatsby-plugin-aphrodite]/gatsby-ssr.js:32:1

  - chunk-ff1dea3c.js:1027 Object.renderStatic
    [lib]/[aphrodite]/lib/chunk-ff1dea3c.js:1027:1

  - gatsby-ssr.js:31 renderAphrodite
    [lib]/[gatsby-plugin-aphrodite]/gatsby-ssr.js:31:1

I'll reopen this issue on the gatsby-plugin-aphrodite, ok?

---

EDIT: Issue on gastby-plugin-aphrodite: https://github.com/biw/gatsby-plugin-aphrodite/issues/1

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!