Apexcharts causes gatsby builds to fail

Hi guys! First of all, thank you for the amazing library. I’ve only been using it for a few hours but I already love it.

So react-apexcharts works amazingly on a gatsby dev server, but when I try to build to a static page for deployment (npm run build / gatsby build), I get the below:

Any idea what might be causing this? Is it an issue with SSR possibly? Removing react-apexcharts and apexcharts fixes the issue.

success Building production JavaScript and CSS bundles — 17.788 s

error Building static HTML failed

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

  19048 |     });
  19049 |   } else if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === 'object') {
> 19050 |     module.exports = root.document ? factory(root, root.document) : function (w) {
        | ^
  19051 |       return factory(w, w.document);
  19052 |     };
  19053 |   } else {


  WebpackError: TypeError: Cannot read property 'document' of u  ndefined
  
  - apexcharts.esm.js:19050 
    [lib]/[apexcharts]/dist/apexcharts.esm.js:19050:1
  
  - apexcharts.esm.js:19056 Module.<anonymous>
    [lib]/[apexcharts]/dist/apexcharts.esm.js:19056:2
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - react-apexcharts.min.js:1 Object../node_modules/react-apexc    harts/dist/react-apexcharts.min.js
    [lib]/[react-apexcharts]/dist/react-apexcharts.min.js:1:722  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - sync-requires.js:9 Object../.cache/sync-requires.js
    lib/.cache/sync-requires.js:9:56
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - static-entry.js:9 Module../.cache/static-entry.js
    lib/.cache/static-entry.js:9:22
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - bootstrap:83 
    lib/webpack/bootstrap:83:1
  
  

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-homepage@0.1.2 build: `gatsby build`
npm ERR! Exit status 1

[areljannC]

@vik-borisov, @gxwheel152, @cameronblandford

Hi guys!

I recently came across this exact same issue but with different errors. I’ll cut straight to what worked for me.

https://www.gatsbyjs.org/docs/using-client-side-only-packages/#workaround-3-load-client-side-dependent-components-with-react-loadable

According to GatsbyJS’ docs, they recommend a workaround of using a library called Loadable Components.

Here’s how structure my components imports a Chart from react-apexcharts:

import React from "react"
import Loadable from '@loadable/component'

const ComponentWithChart = ({ options, series }) => (
  <>
    <LoadableChart  
        options={options} 
        series={series} 
        type="bar"
        height="350"
    />
  </>
)

export default ComponentWithChart

// import react-apexcharts here
const LoadableChart = Loadable(() => import(../pathToNodeModules/node_modules/react-apexcharts/src/react-apexcharts))

The takeaway here is, instead using Chart directly, use Loadable Components as a wrapper to import react-apexcharts and use the wrapped chart in your component.

I think this is a hacky solution but I have searched everywhere for a solution and this is the only one that has worked for me so far.

I hope it works for you, otherwise, please let me know other different solutions.

[ar000n]

You can skip the particular component from building html by adding below configuration. Its basically returns a null for mentioned component on build-html stage.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

reference https://www.gatsbyjs.org/docs/debugging-html-builds/