search

loba-b / react-equal-height

Compares element heights and sets the highest
MIT License
18 stars 9 forks source link

Does not work in Gatsby / SSR #1

Closed jdahdah closed 3 years ago

jdahdah commented 4 years ago

First of all, thanks for this nice little library. I really like the simple API.

One issue: it breaks builds for SSR, such as Gatsby. Builds crash with the following error:

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

It would be amazing to be able to use this for static site generators. Is there anything I can do on my side to get this running or will an update to the library be necessary (e.g. to check we're in a browser environment before running the script)?

loba-b commented 4 years ago

@jdahdah thanks for using it and congrats for report the first issue ;) I will check it. In theoretic I checking it in the main component

const browser: boolean = typeof window !== "undefined" && typeof window.document !== "undefined";

but maybe it is not enought.

Try set on EqualHeightElement attribute disable when document is not available (this is only lucky shot for now), something like this:

<EqualHeightElement disable={typeof window === "undefined" || typeof document === "undefined"}>...</EqualHeightElement>
jdahdah commented 4 years ago

@loba-b Thanks for the quick response. Unfortunately, the error remains.

Here's the full log, in case it helps:

failed Building static HTML for pages - 4.338s

 ERROR #95312

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

> 1 | module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t){e.exports=require("react")},function(e,t,n){"use strict";var r=function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},i=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var o=i(n(0)),a=n(2),u=r({setTemporarySizes:function(){},setOriginalChildrenCount:function(){},setChildrenCount:function(){},setForceUpdate:function(){}},a.defaults),c=o.default.createContext({sizes:u&&u.sizes,temporarySizes:u&&u.temporarySizes,update:u&&u.update,animationSpeed:u&&u.animationSpeed,forceUpdate:u&&u.forceUpdate,originalChildrenCount:u&&u.originalChildrenCount,childrenCount:u&&u.childrenCount,setTemporarySizes:u&&u.setTemporarySizes,setOriginalChildrenCount:u&&u.setOriginalChildrenCount,setChildrenCount:u&&u.setChildrenCount,setForceUpdate:u&&u.setForceUpdate});t.EqualHeightContext=c;var l=c.Provider;t.EqualHeightProvider=l;var s=c.Consumer;t.EqualHeightConsumer=s},function(e,t,n){"use strict";var r=function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,u=o.length;a<u;a++,i++)r[i]=o[a];return r},i=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t};Object.defineProperty(t,"__esModule",{value:!0});var o=i(n(0)),a=n(1);t.defaults={sizes:[],temporarySizes:[],update:!1,forceUpdate:!1,originalChildrenCount:0,childrenCount:0,animationSpeed:.25,timeout:200};var u=o.memo((function(e){var n=e.children,i=e.timeout,u=void 0===i?t.defaults.timeout:i,c=e.animationSpeed,l=void 0===c?t.defaults.animationSpeed:c,s=o.useState(t.defaults.sizes),f=s[0],d=s[1],p=o.useState(t.defaults.temporarySizes),h=p[0],v=p[1],m=o.useState(t.defaults.update),g=m[0],y=m[1],C=o.useState(t.defaults.forceUpdate),b=C[0],S=C[1],w=o.useState(t.defaults.originalChildrenCount),E=w[0],O=w[1],j=o.useState(t.defaults.childrenCount),x=j[0],M=j[1],_=o.useCallback((function(){return y((function(e){return!e}))}),[]);return o.useEffect((function(){var e,t;if("undefined"!=typeof window&&void 0!==window.document)return window.addEventListener("resize",u?function(){clearTimeout(e),e=window.setTimeout(_,u)}:_),window.addEventListener("orientationchange",u?function(){clearTimeout(t),t=window.setTimeout(_,u)}:_),function(){window.removeEventListener("resize",_),window.removeEventListener("orientationchange",_)}}),[]),o.useMemo((function(){_()}),[b,E]),o.useMemo((function(){if(E<=x){var e=[];h.map((function(t){var n=t.name,i=t.height,o=e.findIndex((function(e){return e.name===n}));o>-1?e[o].height<i&&(e[o].height=i):e=r(e,[{name:n,height:i}])})),d(e),v([]),M(0)}}),[x]),o.default.createElement(a.EqualHeightProvider,{value:{sizes:f,temporarySizes:h,update:g,animationSpeed:l,forceUpdate:b,originalChildrenCount:E,childrenCount:x,setTemporarySizes:v,setOriginalChildrenCount:O,setChildrenCount:M,setForceUpdate:S}},n)}));t.default=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2);t.EqualHeight=r.default;var i=n(4);t.EqualHeightElement=i.default;var o=n(1);t.EqualHeightContext=o.EqualHeightContext,t.EqualHeightProvider=o.EqualHeightProvider,t.EqualHeightConsumer=o.EqualHeightConsumer},function(e,t,n){"use strict";var r=function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),i=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,u=o.length;a<u;a++,i++)r[i]=o[a];return r},i=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t},o=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var a=i(n(0)),u=n(1),c=o(n(5)),l=a.memo((function(e){var t=e.children,n=void 0===t?"":t,i=e.name,o=e.tag,l=void 0===o?"div":o,s=e.placeholder,f=void 0!==s&&s,d=e.disable,p=void 0!==d&&d,h=a.useContext(u.EqualHeightContext),v=h.sizes,m=h.update,g=h.setTemporarySizes,y=h.setOriginalChildrenCount,C=h.setChildrenCount,b=h.animationSpeed,S=a.useState(),w=S[0],E=S[1],O=a.useRef(null);a.useEffect((function(){if(!p)return y((function(e){return e+1})),function(){y((function(e){return e-1}))}}),[p,f]),a.useEffect((function(){p||function(){if(O.current&&!p){var e=O.current.style.getPropertyValue("height");O.current.style.removeProperty("height");var t=O.current.offsetHeight;O.current.style.setProperty("height",e),g((function(e){return r(e,[{name:i,height:t}])})),p||C((function(e){return e+1}))}}()}),[m,p,f]),a.useMemo((function(){if(!p){var e=v.findIndex((function(e){return e.name===i}));v&&v[e]&&v[e].height&&E(v[e].height)}}),[v]);var j={height:w+"px",transitionDuration:0===b?"":b+"s"};return f||n?a.default.createElement(a.default.Fragment,null,p?n:a.default.createElement(l,{ref:O,className:c.default.wrapper,style:j},!f&&n)):null}));t.default=l},function(e,t,n){var r=n(6),i=n(7);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[e.i,i,""]]);var o={insert:"head",singleton:!1},a=(r(i,o),i.locals?i.locals:{});e.exports=a},function(e,t,n){"use strict";var r,i=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},o=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function u(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function c(e,t){for(var n={},r=[],i=0;i<e.length;i++){var o=e[i],c=t.base?o[0]+t.base:o[0],l=n[c]||0,s="".concat(c," ").concat(l);n[c]=l+1;var f=u(s),d={css:o[1],media:o[2],sourceMap:o[3]};-1!==f?(a[f].references++,a[f].updater(d)):a.push({identifier:s,updater:m(d,t),references:1}),r.push(s)}return r}function l(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var i=n.nc;i&&(r.nonce=i)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var s,f=(s=[],function(e,t){return s[e]=t,s.filter(Boolean).join("\n")});function d(e,t,n,r){var i=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=f(t,i);else{var o=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function p(e,t,n){var r=n.css,i=n.media,o=n.sourceMap;if(i?e.setAttribute("media",i):e.removeAttribute("media"),o&&btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var h=null,v=0;function m(e,t){var n,r,i;if(t.singleton){var o=v++;n=h||(h=l(t)),r=d.bind(null,n,o,!1),i=d.bind(null,n,o,!0)}else n=l(t),r=p.bind(null,n,t),i=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else i()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=i());var n=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var i=u(n[r]);a[i].references--}for(var o=c(e,t),l=0;l<n.length;l++){var s=u(n[l]);0===a[s].references&&(a[s].updater(),a.splice(s,1))}n=o}}}},function(e,t,n){(t=n(8)(!1)).push([e.i,".equal-height-wrapper-35rnL {\n    overflow: hidden;\n    transition-property: height;\n    display: block;\n}\n",""]),t.locals={wrapper:"equal-height-wrapper-35rnL"},e.exports=t},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var i=(a=r,u=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(u),"/*# ".concat(c," */")),o=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[n].concat(o).concat([i]).join("\n")}var a,u,c;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(r)for(var o=0;o<this.length;o++){var a=this[o][0];null!=a&&(i[a]=!0)}for(var u=0;u<e.length;u++){var c=[].concat(e[u]);r&&i[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),t.push(c))}},t}}]);

  WebpackError: ReferenceError: document is not defined

  - index.js:1 l
    node_modules/react-equal-height/dist/index.js:1:6874

  - index.js:1 m
    node_modules/react-equal-height/dist/index.js:1:8114

  - index.js:1 c
    node_modules/react-equal-height/dist/index.js:1:6798

  - index.js:1 e.exports
    node_modules/react-equal-height/dist/index.js:1:8447

  - index.js:1 Object../node_modules/react-equal-height/dist/index.js
    node_modules/react-equal-height/dist/index.js:1:6064

  - index.js:1 n
    node_modules/react-equal-height/dist/index.js:1:112

  - index.js:1 Object../node_modules/react-equal-height/dist/index.js
    node_modules/react-equal-height/dist/index.js:1:4779

  - index.js:1 n
    node_modules/react-equal-height/dist/index.js:1:112

  - index.js:1 Object../node_modules/react-equal-height/dist/index.js
    node_modules/react-equal-height/dist/index.js:1:4133

  - index.js:1 n
    node_modules/react-equal-height/dist/index.js:1:112

  - index.js:1 ./node_modules/react-equal-height/dist/index.js
    node_modules/react-equal-height/dist/index.js:1:915

  - index.js:1 Object../node_modules/react-equal-height/dist/index.js
    node_modules/react-equal-height/dist/index.js:1:932

  - SettlementAccountSolution.js:1 Module../src/components/services/SetAccSolution.js
    src/components/services/SetAccSolution.js:1:1

  - settlement-account.js:1 Module../src/pages/services/set-acc.js
    src/pages/services/set-acc.js:1:1
tobiasfrei commented 3 years ago

@jdahdah Check the docs and how to fix third-party modules. You can replace it with a dummy module on SSR. https://www.gatsbyjs.com/docs/debugging-html-builds/

// gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-equal-height/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}
peterchibunna commented 3 years ago

Hi, I get the same error in NextJs. I have tried to tinker with the next.config.js file:

const withTM = require("next-transpile-modules")([
    "react-equal-height",
    // pass the modules you would like to see transpiled
]);

module.exports = withTM();

I still get the same error after restarting the server.

However, the import style that works is the dynamic imports of NextJs (not sure of the Gatsby equivalent):

import dynamic from 'next/dynamic';
//import {EqualHeight, EqualHeightElement} from 'react-equal-height';
const EqualHeight = dynamic(
    () => import('react-equal-height').then(mod=>mod.EqualHeight),
    { ssr: false }
);
const EqualHeightElement = dynamic(
    () =>  import('react-equal-height').then(mod=>mod.EqualHeightElement),
    { ssr: false }
);
ndeviant commented 3 years ago

Still occurs in nextjs. Will this be fixed?

loba-b commented 3 years ago

Hi @jdahdah @ndeviant @peterchibunna First of all I want to sorry for such long response.

It's look like the problem was with css which I including to script. So script in SSR mode was starting and was trying put styles in DOM and because document wasn't exist the error was showing.

I just update the library to version 1.2.2 where I extracted package /clean in which the css are as a separate file.

Please check: how to import library without included styles. I hope it will help.

I will appreciate for feedback if it fixed the problem.

quangthien27 commented 3 years ago

@loba-b It works with SSR 🙏🏻