Search code examples
buildgatsbynetlifyemotion

Gatsby Build Error on Netlify - page-data.json failed paged “/”

when I try to build a gatsby app on netlify, I'm having this error that is generated by a 3rd party module called react-water-wave. This is the error

Netlify Deploy log

I've already implemented a null loader on gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {


if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-water-wave/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

This is how is coded the gatsby-plugin-emotion on gatsby-config.js

plugins: [

{resolve: `gatsby-plugin-emotion`,
  options: {
    // Accepts the following options, all of which are defined by `@emotion/babel-plugin` plugin.
    // The values for each key in this example are the defaults the plugin uses.
    sourceMap: true,
    autoLabel: "always",
    labelFormat: `[local]`,
    cssPropOptimization: true,
  }
}]
Solution

  • react-water-wave seems to be discontinued, the last commit is from 3 years ago and it has been reported with some incompatibilities during SSR and React version as it is inferred from https://github.com/homerchen19/react-water-wave/issues/14 and https://github.com/homerchen19/react-water-wave/issues/27.

    It seems to don't work with React versions greater than 17.

    That said, try playing (downgrading) with React-core versions (which can potentially lead to other errors) or try finding another alternative.