I'm using Scrollmagic and GSAP in my create-react-app and pinning a section while child elements are animated on scroll. I've achieved this HOWEVER anytime I click on my nav links (using Reach Router) it goes to an empty/white page.
When inspecting elements in Chrome, the <div id="root"></div> is not fed any data which explains the empty/white page. If I refresh that page, it renders all content as expected. Additionally, it will also render if I comment out .setPin('#scrollStarts') line.
The empty/white page also throws the following errors:
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Has anyone experiencing similar behavior and able to find solution?
I added a parent/wrapping <div> and it solved the issue.
Related
When I was learning Remix, I followed the tutorial to initialize a project, but when I opened Devtools, I saw several errors reported on the console.
Warning: Did not expect server HTML to contain a <div> in <html>.
Error: Hydration failed because the initial UI does not match what was rendered on the server.*n
The most ridiculous thing is that I opened the index page of Remix and its home page reported the same error, so I was especially curious about whether the hydration was successful and why this error happened
This is a well known React issue caused by browser extensions modifying the DOM.
It's more pronounced in Remix because it hydrates the entire <html />, not just a <div id="root" />.
You can confirm whether it's caused by a browser extension by testing with a browser profile which has no extensions installed (or incognito mode).
Kiliman has a workaround demonstrated here https://github.com/kiliman/remix-hydration-fix which involves rendering the head and the app separately.
I'm using functional components and I'm in development mode.
Whenever there is an error, it shows the error in the browser console normally. However, the UI only shows a white screen. I'd like to show errors just like in the image below:
Does anyone know a solution to this problem? The idea is not to fix the error, but just to render the error in the UI.
I already tried to remove StrictMode and installed redbox-react. I did research on the topic and couldn't find the solution specific to this problem. I'm having this problem with other apps, so I don't think reinstalling will solve the problem.
I created this error on purpose in order to test (the onClick is empty):
EDIT:
<a href="#create"onClick={() => {}} className="add-contact">
Add contact
</a>
Also it would be the same if this array below were empty:
emptyArray.map(arr => <div>{arr}</div>)
I'm using a bootstrap theme into ReactJS app. Everything works except the NavBar transition/animation effect on scrolling isn't working. I have noticed in the projects GitHub they are using a script. They are referring this script in the index.html page (the last line within the body tag).
Now, I'm trying to get it working in my ReactJS app but without luck so far. I've created a navbar component and imported into App.JS. I've used same id, "mainNav" for the tag with in my navbar component, but I've noticed that an error in the script. It says "undefined is not an object(evaluating '$("#mainNav").offset().top > 100)' in the browser.
Could you please point me what I'm doing wrong? How can I get the same effect using ReactJS?
I added Engagespot SDK code to my index.html page. But, I get this error on the login page.
Uncaught (in promise) TypeError: Cannot read property 'classList' of null
at t._showNotificationCenter (EngagespotSDK.2.0.js:1)
at EngagespotSDK.2.0.js:1
Installing Engagespot on a SPA (Like React, Vue, etc) is a bit different as mentioned in this article - https://docs.engagespot.co/how-to-install-engagespot/how-to-set-up-engagespot-in-single-page-applications
The above error occurs when the script is unable to find an HTML element (Placeholder element) that you've configured in your account.
Usually, this happens in apps that have a login screen. The element may not exist on the login page, but only on the page that comes after the login screen.
To solve this, you need to make that the Engagespot.init() function is executed only on the page that has your placeholder element. So, you can remove this function from the main Engagespot SDK code that you have in your index.html. And, place it the mount life cycle of your placeholder element.
I've create an ErrorBoundry component which is wrapped around all child components of App. I've added a throw error function to one of the child components to test. When the component renders it seems the ErrorBoundry is catching the error but then the error appears after it. What am I doing wrong.
Here's my sandbox https://codesandbox.io/s/n0qjwjvrnm
I noticed this please take a look in the error overlay.
This error overlay is powered by react-error-overlay used in
create-react-app.
I tested in my app and it show the correct behavior because I'm not using create-react-app so this is the feature powered by it.
This is not a bug. Cheers.