v3.4.0 brings an error on SSR/SGR (e.g. Next.js)

[Cyril Bonnet]

I just updated to v3.4.0 and sadly, this release seems to bring a new error:

error - ReferenceError: document is not defined
    at VerticalTimeline (/project-path/node_modules/react-vertical-timeline-component/dist-modules/VerticalTimeline.js:22:3)
    at processChild (/project-path/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/project-path/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/project-path/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/project-path/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/project-path/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/project-path/node_modules/next/dist/server/render.js:596:45)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:194:19)
    at Object.loadGetInitialProps (/project-path/node_modules/next/dist/shared/lib/utils.js:69:29)
    at renderDocument (/project-path/node_modules/next/dist/server/render.js:609:48) {
  page: '/'
}

It seems to be caused by the usage of document that may break SSR/SGR usage in NextJS:

// react-vertical-timeline-component/dist-modules/VerticalTimeline.js:22:3)

var VerticalTimeline = function VerticalTimeline(_ref) {
  var animate = _ref.animate,
      className = _ref.className,
      layout = _ref.layout,
      lineColor = _ref.lineColor,
      children = _ref.children;
  // This:
  document.documentElement.style.setProperty('--line-color', lineColor);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(className, 'vertical-timeline', {
      'vertical-timeline--animate': animate,
      'vertical-timeline--two-columns': layout === '2-columns',
      'vertical-timeline--one-column-left': layout === '1-column' || layout === '1-column-left',
      'vertical-timeline--one-column-right': layout === '1-column-right'
    })
  }, children);
};

I didn't encounter this error until this version,.
Is that the first document usage in this package (that's the only occurence I can find in this file)? 🤔

I think the solution would be to use the following bulletproof test:

if (typeof window === "object") {
  // document-related code...
}

Updating the node_module code did the job:

var VerticalTimeline = function VerticalTimeline(_ref) {
  var animate = _ref.animate,
      className = _ref.className,
      layout = _ref.layout,
      lineColor = _ref.lineColor,
      children = _ref.children;

++   if (typeof window === "object") {
    document.documentElement.style.setProperty('--line-color', lineColor);
++   }

  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(className, 'vertical-timeline', {
      'vertical-timeline--animate': animate,
      'vertical-timeline--two-columns': layout === '2-columns',
      'vertical-timeline--one-column-left': layout === '1-column' || layout === '1-column-left',
      'vertical-timeline--one-column-right': layout === '1-column-right'
    })
  }, children);
};

Would it be possible to release this fix?

CC @stephane-monnot

[Stéphane Monnot]

New release v3.5.2 with your fix (thanks) and all dependencies up to date. 🤞

[Cyril Bonnet]

@stephane-monnot v3.5.2 is working fine, thanks!