react-carousel: TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.

Getting this TypeError when trying to use a React component as a slide My carousel code: <Carousel> <SponsorBox title="Sponsor1" image={sponsor1} /> </Carousel>

My React component: const SponsorBox = ({ title, image }) => { return ( <div className="box-wrapper"> <Box> <Heading tag="h4">{title}</Heading> <Image src={image} /> </Box> </div> ) }

Environment System: OS: Windows 10 10.0.17763 CPU: (4) x64 Intel® Core™ i7-7700HQ CPU @ 2.80GHz Memory: 4.15 GB / 15.86 GB Binaries: Node: 12.17.0 - C:\Program Files\nodejs\node.EXE npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.17763.831.0 Internet Explorer: 11.0.17763.771 npmPackages: @brainhubeu/react-carousel: ^1.18.10 => 1.18.10 @fortawesome/fontawesome-svg-core: ^1.2.28 => 1.2.28 @fortawesome/free-brands-svg-icons: ^5.13.0 => 5.13.0 @fortawesome/free-solid-svg-icons: ^5.13.0 => 5.13.0 @fortawesome/react-fontawesome: ^0.1.11 => 0.1.11 bloomer: ^0.6.5 => 0.6.5 bulma: ^0.9.0 => 0.9.0 gatsby: ^2.22.15 => 2.22.15 gatsby-image: ^2.4.5 => 2.4.5 gatsby-plugin-manifest: ^2.4.9 => 2.4.9 gatsby-plugin-offline: ^3.2.7 => 3.2.7 gatsby-plugin-react-helmet: ^3.3.2 => 3.3.2 gatsby-plugin-sass: ^2.3.4 => 2.3.4 gatsby-plugin-sass-resources: ^2.0.0 => 2.0.0 gatsby-plugin-sharp: ^2.6.9 => 2.6.9 gatsby-source-filesystem: ^2.3.8 => 2.3.8 gatsby-transformer-sharp: ^2.5.3 => 2.5.3 node-sass: ^4.14.1 => 4.14.1 prettier: 2.0.5 => 2.0.5 prop-types: ^15.7.2 => 15.7.2 react: ^16.12.0 => 16.13.1 react-bulma-components: ^3.3.0 => 3.3.0 react-dom: ^16.12.0 => 16.13.1 react-helmet: ^6.0.0 => 6.0.0

All browsers/devices

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 12
Comments: 29 (13 by maintainers)

Most upvoted comments

@bughishor @zkwentz @Romcol @moussaab-moulim @guiaramos @pecoram @rares-lupascu @thinkdomake @Alex-TLA @jefyelin @glarivie

Could you confirm that it’s fixed now (in 1.19.14)?

piotr-s-brainhub on Jul 3, 2020

it works for me

pecoram on Jul 3, 2020

@RobertHebel yeah! looks like it’s working again. thanks for your help! what ended up being the root cause?

@pdugan20 This code has caused the problem

  const getChildren = () => React.cloneElement(children, { ref: childrenRef });

It has cloned element when childrenRef had null value

after changing this code to

 const getChildren = () =>
    childrenRef.current
      ? React.cloneElement(children, { ref: childrenRef })
      : children;

it works

RobertHebel on Jul 23, 2020

it seems to only work if you wrap the component with <div> or with a pure html element waiting for a fix to be able to use it on react component the error invoked in the obesve function here { key: "observeWidth", value: function () { var e = this, t = new m.a(function () { e.resizeChildren(), t.unobserve(e.childrenRef.current); }); t.observe(this.childrenRef.current); }, },

moussaab-moulim on Jun 26, 2020

@bughishor

Thanks for reporting this.

Could you also post:

the entire file which causes this error
stacktrace

piotr-s-brainhub on Jun 20, 2020