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

bdogaru · 2020-06-20T11:13:00Z

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(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

The text was updated successfully, but these errors were encountered:

piotr-s-brainhub · 2020-06-20T11:56:03Z

@bughishor

Thanks for reporting this.

Could you also post:

the entire file which causes this error
stacktrace

zkwentz · 2020-06-20T15:43:24Z

I can confirm two things:

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

Getting stack trace, will add in separate comment.

zkwentz · 2020-06-20T15:45:57Z

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 · 2020-06-20T15:46:17Z

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

piotr-s-brainhub · 2020-06-21T18:25:27Z

@zkwentz

Thanks but I still miss example code causing this error.

zkwentz · 2020-06-21T22:37:54Z

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 · 2020-06-21T23:07:09Z

@zkwentz

thank you very much

Romcol · 2020-06-24T09:26:52Z

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 · 2020-06-24T17:08:18Z

Thanks @Romcol

moussaab-moulim · 2020-06-24T18:56:49Z

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 · 2020-06-24T18:58:56Z

thanks @moussaab-moulim

piotr-s-brainhub · 2020-07-03T09:54:37Z

@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 · 2020-07-03T11:03:12Z

it works for me

KishokanthJeganathan · 2020-07-09T14:23:05Z

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

RobertHebel · 2020-07-10T11:13:03Z

@KishokanthJeganathan could you post:

the entire file which causes this error
stacktrace

rodriguezmarting · 2020-07-10T19:55:11Z

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 · 2020-07-14T11:09:47Z

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 · 2020-07-18T23:06:33Z

@pdugan20

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

zkwentz · 2020-07-19T02:45:00Z

@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 · 2020-07-20T11:19:56Z

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

Works for me in 1.19.22

pdugan20 · 2020-07-20T11:40:26Z

@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 · 2020-07-20T13:00:09Z

<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 · 2020-07-22T12:43:19Z

@pdugan20 does v1.19.24 work for you?

pdugan20 · 2020-07-22T13:18:50Z

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

RobertHebel · 2020-07-23T09:56:11Z

@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

brainhub-devops added the answering: not answered label Jun 20, 2020

piotr-s-brainhub added type: bug no reproduction details labels Jun 20, 2020

brainhub-devops added answering: answered and removed answering: not answered labels Jun 20, 2020

brainhub-devops added answering: not answered and removed answering: answered labels Jun 20, 2020

brainhub-devops added answering: answered and removed answering: not answered labels Jun 21, 2020

brainhub-devops added answering: not answered and removed answering: answered labels Jun 21, 2020

brainhub-devops added answering: answered and removed answering: not answered labels Jun 21, 2020

brainhub-devops added answering: not answered and removed answering: answered labels Jun 24, 2020

codeWebZhang mentioned this issue Jun 24, 2020

@zkwentz #553

Closed

brainhub-devops added answering: answered and removed answering: not answered labels Jun 24, 2020

brainhub-devops removed the answering: answered label Jun 24, 2020

brainhub-devops added the answering: not answered label Jul 1, 2020

RobertHebel mentioned this issue Jul 2, 2020

Fix error: Failed to execute 'observe' on 'ResizeObserver': parameter… #584

Merged

RobertHebel closed this as completed in #584 Jul 3, 2020

piotr-s-brainhub reopened this Jul 14, 2020

piotr-s-brainhub removed the no reproduction details label Jul 16, 2020

brainhub-devops added the missing severity label Jul 16, 2020

brainhub-devops added answering: answered and removed answering: not answered labels Jul 18, 2020

brainhub-devops added answering: not answered and removed answering: answered labels Jul 19, 2020

RobertHebel mentioned this issue Jul 20, 2020

Fix rendering carousel when one of the carousel children is an array of react elements #611

Merged

brainhub-devops added answering: answered and removed answering: not answered labels Jul 20, 2020

RobertHebel mentioned this issue Jul 20, 2020

Fix rendering carousel when one of the carousel children is an array of react elements #612

Merged

RobertHebel closed this as completed Jul 23, 2020

RobertHebel mentioned this issue Jul 27, 2020

Does not support Gatsby Image <Img /> Jsx Element #585

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

bdogaru commented Jun 20, 2020 •

edited

Loading

piotr-s-brainhub commented Jun 20, 2020

zkwentz commented Jun 20, 2020

zkwentz commented Jun 20, 2020

zkwentz commented Jun 20, 2020

piotr-s-brainhub commented Jun 21, 2020

zkwentz commented Jun 21, 2020 •

edited

Loading

piotr-s-brainhub commented Jun 21, 2020

Romcol commented Jun 24, 2020

piotr-s-brainhub commented Jun 24, 2020

moussaab-moulim commented Jun 24, 2020 •

edited

Loading

piotr-s-brainhub commented Jun 24, 2020

piotr-s-brainhub commented Jul 3, 2020

pecoram commented Jul 3, 2020

KishokanthJeganathan commented Jul 9, 2020

RobertHebel commented Jul 10, 2020

rodriguezmarting commented Jul 10, 2020 •

edited

Loading

pdugan20 commented Jul 14, 2020 •

edited

Loading

piotr-s-brainhub commented Jul 18, 2020

zkwentz commented Jul 19, 2020

AtoZdevelopment commented Jul 20, 2020

pdugan20 commented Jul 20, 2020

RobertHebel commented Jul 20, 2020

RobertHebel commented Jul 22, 2020 •

edited

Loading

pdugan20 commented Jul 22, 2020

RobertHebel commented Jul 23, 2020

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

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

Comments

bdogaru commented Jun 20, 2020 • edited Loading

piotr-s-brainhub commented Jun 20, 2020

zkwentz commented Jun 20, 2020

zkwentz commented Jun 20, 2020

zkwentz commented Jun 20, 2020

piotr-s-brainhub commented Jun 21, 2020

zkwentz commented Jun 21, 2020 • edited Loading

piotr-s-brainhub commented Jun 21, 2020

Romcol commented Jun 24, 2020

piotr-s-brainhub commented Jun 24, 2020

moussaab-moulim commented Jun 24, 2020 • edited Loading

piotr-s-brainhub commented Jun 24, 2020

piotr-s-brainhub commented Jul 3, 2020

pecoram commented Jul 3, 2020

KishokanthJeganathan commented Jul 9, 2020

RobertHebel commented Jul 10, 2020

rodriguezmarting commented Jul 10, 2020 • edited Loading

pdugan20 commented Jul 14, 2020 • edited Loading

piotr-s-brainhub commented Jul 18, 2020

zkwentz commented Jul 19, 2020

AtoZdevelopment commented Jul 20, 2020

pdugan20 commented Jul 20, 2020

RobertHebel commented Jul 20, 2020

RobertHebel commented Jul 22, 2020 • edited Loading

pdugan20 commented Jul 22, 2020

RobertHebel commented Jul 23, 2020

bdogaru commented Jun 20, 2020 •

edited

Loading

zkwentz commented Jun 21, 2020 •

edited

Loading

moussaab-moulim commented Jun 24, 2020 •

edited

Loading

rodriguezmarting commented Jul 10, 2020 •

edited

Loading

pdugan20 commented Jul 14, 2020 •

edited

Loading

RobertHebel commented Jul 22, 2020 •

edited

Loading