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.
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 react pdf to render my component as PDF & allow user to download that PDF on button the PDF was working well after applying pollyfills changes but for my lead (who is using MAC) the PDF was not rendering and giving the
Error: react_devtools_backend.js:4026 TypeError: zlibWEBPACK_IMPORTED_MODULE_3.createDeflate is not a function
On deployment it's even works well on his system but locally he can't render it, does anyone have idea what issue that would which causing this things?
I tried to clone the repo in another folder & installed all the dependencies again but nothing works yet
Here's the screenshot of console error: https://cdn.discordapp.com/attachments/990645691531534370/1012846396296138833/Screen_Shot_2022-08-26_at_3.09.51_PM.png
I found the similar issue opened as well source: https://github.com/diegomura/react-pdf/issues/1935
But it's closed without any proper explanation
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'm developing a site that will be ran inside Kiosk Pro and as such, it will need to be ran without a server.
I've added homepage to my package.json file and started using HashRouter, but after running the build and accessing the index.html file, I get this error in the browser: react-dom.production.min.js:4636 TypeError: Cannot read property 'pathname' of undefined
Is there something else I need to add to my configuration?
The solution:
I was getting TypeError: Cannot read property 'pathname' of undefined due to one of the navigation components relying on stateOpts, which don't work with HashRouter, and not setting the pathname of the NavLink. I moved this logic into the component itself (which makes more sense anyway) and it worked!
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.