Build Error: WebpackError

[gilesbutler]

Hi Guys,

I'm getting a error with my build but struggling to tell whether it's a common one to do with the window/document issue or something else. Any ideas...

❯ gatsby build
success delete html files from previous builds — 0.016 s
success open and validate gatsby-config.js — 0.010 s
success copy gatsby files — 0.024 s
success onPreBootstrap — 0.008 s
success source and transform nodes — 0.026 s
success building schema — 0.142 s
success createLayouts — 0.028 s
success createPages — 0.002 s
success createPagesStatefully — 0.023 s
success onPreExtractQueries — 0.002 s
success update schema — 0.074 s
success extract queries from components — 0.096 s
success run graphql queries — 0.019 s
success write out page data — 0.015 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 2.097 s

success Building CSS — 5.108 s
success Building production JavaScript bundles — 18.614 s

error Building static HTML for pages failed

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


  Error: WebpackError

  - build-html.js:48 _callee$
    [Gatsby]/[gatsby]/dist/commands/build-html.js:48:46

  - next_tick.js:67 _combinedTickCallback
    internal/process/next_tick.js:67:7

  - next_tick.js:98 process._tickCallback
    internal/process/next_tick.js:98:9

I have the following folder structure...

src
- components
- layouts
- pages
- utils

And my pages folder just contains index.jsx and 404.jsx, no other files.

Any ideas where I'm going wrong or is it the window/document issue coming from a third party module?

Really appreciate any help, thanks.

[gilesbutler]

Looks like I've fixed it but it was hard to track down. There were a couple of issues encase it helps anybody for future reference.

I'm using Auth0's js SDK which was throwing some errors, disabling that lead me down the path to finding a few modules that needed the window and document available.

scroll-to-element needed the window object available so I fixed that by adding the following to gatsby-node.js...

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === "build-html") {
    config.loader("null", {
      test: /scroll-to-element/,
      loader: "null-loader"
    });
  }

  return config;
};

We're using fullpage-react as well which requires document. I couldn't figure out how to add an additional loader test in the above config and when I added it by itself and disabled scroll-to-element in my code it still didn't fix the build error anyway. So I ended up wrapping the Slider component that calls fullpage-react with the following typeof document !== undefined && <Slider />}. Would love a bit of feedback from any of the contributors if that's the right way of doing things? Sorry first time Gatsby user haha 👋

[Chuloo]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues as many of them have already been resolved with the latest updates or explained in a previous issue.

Feel free to open a new one if you still experience this problem or a similar one! 👍