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

[bdogaru]

Getting this TypeError when trying to use a React component as a slide My carousel code: `

`

My React component: ` const SponsorBox = ({ title, image }) => { return (

{title}

)

} `

Environment System: OS: Windows 10 10.0.17763 CPU: (4) x64 Intel(R) Core(TM) 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

[piotr-s-brainhub]

@bughishor

Thanks for reporting this.

Could you also post:

• the entire file which causes this error
• stacktrace

[zkwentz]

I can confirm two things:

1. I have this issue as well, confirmed on 1.18.10
2. It works without a code change on 1.18.9

Getting stack trace, will add in separate comment.

[zkwentz]

Stack trace:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `i`.
    in AnswerForm (at [teamId].tsx:345)
    in li (created by i)
    in i
    in ul
    in div
    in Unknown (created by i)
    in o (created by i)
    in i (created by i)
    in div (created by i)
    in div (created by i)
    in i (created by i)
    in i (at [teamId].tsx:342)
    in div (at [teamId].tsx:322)
    in section (at [teamId].tsx:313)
    in div (at [teamId].tsx:277)
    in TeamViewer (at _app.tsx:45)
    in div (at PlayerLayout.tsx:80)
    in ToastProvider (at PlayerLayout.tsx:74)
    in PlayerLayout (at _app.tsx:43)
    in ApolloProvider (at _app.tsx:26)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
printWarning @ react-dom.development.js:88
react-carousel.js?53fe:27 Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
    at i.value (react-carousel.js?53fe:27)
    at i.value (react-carousel.js?53fe:27)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at dispatchAction (react-dom.development.js:15660)
react-dom.development.js:19527 The above error occurred in the <i> component:
    in i
    in ul
    in div
    in Unknown (created by i)
    in o (created by i)
    in i (created by i)
    in div (created by i)
    in div (created by i)
    in i (created by i)
    in i (at [teamId].tsx:342)
    in div (at [teamId].tsx:322)
    in section (at [teamId].tsx:313)
    in div (at [teamId].tsx:277)
    in TeamViewer (at _app.tsx:45)
    in div (at PlayerLayout.tsx:80)
    in ToastProvider (at PlayerLayout.tsx:74)
    in PlayerLayout (at _app.tsx:43)
    in ApolloProvider (at _app.tsx:26)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

[zkwentz]

Sidebar, thank you for looking at this on a Saturday, much appreciated! ❤️

[piotr-s-brainhub]

@zkwentz

Thanks but I still miss example code causing this error.

[zkwentz]

Apologies, I missed that request.

I've created a repo, where you can see it happen live, here.

Relevant snippets:

import React from 'react';
import Carousel from "@brainhubeu/react-carousel";
import Component from './Component';
import './App.css';
import "@brainhubeu/react-carousel/lib/style.css";

function App() {
  return (
    <div className="App">
      <Carousel>
        {['a','b','c'].map((property, index) => {
          return <Component property={property} key={index} />;
        })}
      </Carousel>
    </div>
  );
}

export default App;

import React from 'react';

type Props = {
  property: string;
};

const Component = ({property}: Props) => {
  return(
    <>
      <p>{property}</p>
    </>
  );
};

export default Component;

[piotr-s-brainhub]

@zkwentz

thank you very much

[Romcol]

Hi,

I have the same error after upgrading my codesandbox, see https://codesandbox.io/s/react-playground-znh66 .

Hope it can help!

[piotr-s-brainhub]

Thanks @Romcol

[moussaab-moulim]

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); }, },

[piotr-s-brainhub]

thanks @moussaab-moulim

[guiaramos]

Pin the dep to version 1.16.3 seems to work fine:

"@brainhubeu/react-carousel": "1.16.3"

then: rm -rf package-lock.json && rm -rf node_modules && npm install

[pecoram]

version 1.18.9 also works well

[piotr-s-brainhub]

Thanks @guiaramos @pecoram

[rares-lupascu]

same here ... downgraded to 1.18.9

[piotr-s-brainhub]

@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)?

[pecoram]

it works for me

[KishokanthJeganathan]

@piotr-s-brainhub I had this issue as well and upgraded to 1.19.14 but the issue is still there :/

[RobertHebel]

@KishokanthJeganathan could you post:

• the entire file which causes this error
• stacktrace

[rodriguezmarting]

I had the same issue using Fluent UI framework. If the root element of my component is a <Card> I cannot use it in the carousel. After changing it to <div> it works fine.

Update: Even changing everything to use <div> it now has a different error.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

That happens when I tried to render something like

`
<Carousel>
   <div> Hi </div>
   {data.map(e => <Greeting name={e.name}/>}
</Carousel>
`

[pdugan20]

Here's what I'm getting:

Unhandled Runtime Error

TypeError: ResizeObserver.observe: Argument 1 does not implement interface Element.
Call Stack
value
node_modules/@brainhubeu/react-carousel/lib/react-carousel.js (27:22547)
value
node_modules/@brainhubeu/react-carousel/lib/react-carousel.js (27:22279)
commitLifeCycles
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (20066:22)
commitLayoutEffects
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (23055:23)
callCallback
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (440:14)
invokeGuardedCallbackDev
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (489:16)
invokeGuardedCallback
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (544:31)
commitRootImpl
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (22793:30)
unstable_runWithPriority
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (26338:12)
runWithPriority$1
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (11291:10)
commitRoot
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (22633:20)
finishSyncRender
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (22059:13)
performSyncWorkOnRoot
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (22045:23)
flushSyncCallbackQueueImpl/<
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (11341:24)
unstable_runWithPriority
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (26338:12)
runWithPriority$1
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (11291:10)
flushSyncCallbackQueueImpl
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (11336:24)
flushSyncCallbackQueue
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (11324:3)
scheduleUpdateOnFiber
file:/Users/patdugan/Github/hikearound-web/.next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (21451:9)
dispatchAction
/_next/static/development/dll/dll_49dc72f77c9be8a30d1a.js (15912:17)
checkForUpdates
node_modules/use-subscription/cjs/use-subscription.development.js (87:0)
_update/<
../../../next-server/lib/loadable.js (271:42)
_update
../../../next-server/lib/loadable.js (271:4)
retry/<
../../../next-server/lib/loadable.js (252:8)

Error started appearing in any version after 1.18.8. The stack trace above is from 1.19.16.

[piotr-s-brainhub]

@pdugan20

thanks but could you also post the entire file causing this error?

[zkwentz]

@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)?

Can confirm.

[AtoZdevelopment]

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

Works for me in 1.19.22

[pdugan20]

@piotr-s-brainhub sure!

I'm importing into next as follows:

import dynamic from 'next/dynamic';

const Carousel = dynamic(() => import('@brainhubeu/react-carousel'), {
    ssr: false,
});

export default Carousel;

and then the actual carousel component looks like:

import React from 'react';
import { Section } from '../../../styles/landing';
import TextSection from '../Text';
import { hikeData } from '../../../constants/data';
import { carousel } from '../../../constants/carousel';
import Card from '../../carousel/Card';
import Carousel from '../../carousel/Carousel';

class CarouselSection extends React.PureComponent {
    renderCarousel = () => {
        return (
            <Carousel
                arrows
                slidesPerPage={carousel.desktop.slidesPerPage}
                infinite
                centered
                itemWidth={carousel.desktop.itemWidth}
                breakpoints={{
                    768: {
                        slidesPerPage: carousel.mobile.slidesPerPage,
                        itemWidth: carousel.mobile.itemWidth,
                    },
                }}
            >
                {hikeData.map(({ name, city, map, id }, index) => (
                    <Card
                        name={name}
                        city={city}
                        map={map}
                        id={id}
                        key={index}
                    />
                ))}
            </Carousel>
        );
    };

    render() {
        return (
            <Section marginTop offset='true'>
                <TextSection
                    centered
                    title='The path is yours to choose.'
                    description="No matter your skill level or experience, you'll find hikes that you and your friends will love."
                />
                {this.renderCarousel()}
            </Section>
        );
    }
}

export default CarouselSection;

Still getting the same error on 1.19.22.

[RobertHebel]

<Carousel>
   <div> Hi </div>
   {data.map(e => <Greeting name={e.name}/>}
</Carousel>

@rodriguezmarting I prepared a fix which should fix the problem with divs which you have described. I'll let you know when it will be available to download via npm

[RobertHebel]

@pdugan20 does v1.19.24 work for you?

[pdugan20]

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

[RobertHebel]

@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