JorrinKievit/react-ts-tradingview-widgets

Ticker Tape console errors

Closed this issue · 13 comments

pkhlopiachyi commented

Hello!

I updated package to latest version, after what I faced some error in console

Screenshot 2023-02-24 at 11 04 07

Could you help to resolve them, please?

Here is my implementation

Screenshot 2023-02-24 at 11 09 33

JorrinKievit commented

Hey, going on vacation today, so I'm not sure I can find the time today to fix it. If not, the earliest I can look at it is next Sunday. You are open to investigate the issue yourself and open a pull request, If you are able to fix it I will merge it when I'm on vacation

moritzjacobs commented

I'm encountering the same problem and I believe it is on tradingview's end:

Bildschirm­foto 2023-02-27 um 17 11 34

JorrinKievit commented

Yup, seems to happen on every widget. Not sure how to fix this yet since it does not happen on the TradingView site itself -> https://www.tradingview.com/widget/ticker-tape/

JorrinKievit commented

Reworked the structure a bit, does have the same HTML structure as on the TradingView site now but unfortunately still not working. You can track the progress/try yourself in the following branch: https://github.com/JorrinKievit/react-ts-tradingview-widgets/tree/fix/%2328

  • 👍1
moritzjacobs commented

Thanks for your time!
If I can be of any help, just tell me :)

JorrinKievit commented

Ye i don't know the widgets seem to work but still log the error 🤔

JorrinKievit commented

Nvm, the widgets work on initial render, but not the second react render

mdkberry commented

I have this problem with latest reactjs 18.2.0 and it makes it unusable. My web browser shows: "Compiled with problems:
ERROR Script error. ./node_modules/webpack-dev-server/client/overlay.js/createOverlay/<@http://localhost:3000/static/js/bundle.js:84149:56
"

and I have the "Uncaught TypeError: c is null" in the console inspector. I can refresh the browser over and over and then it works occasionally but then next time goes back to the error. Shame because this looked great when it worked.

I can also sometimes stop the browser refresh before it finishes, and that allows it to work. but that's not useable in production.

not sure if it relates but I am also seeing these two messages at the bottom of console when I manage to get past by canceling the browser refresh:

"2023-03-15T08:05:51.784Z:WidgetSheriff.Widget:ancestorOrigin is undefined 16705.600def6b0b8f2387a496.js:7:1864
Loading failed for the <script> with source “https://www.googletagmanager.com/gtag/js?id=UA-96861365-1”. "

JorrinKievit commented

Sorry, been busy/sick the last few days so haven't had the time to look at it. TradingView has updated their scripts so it takes a bit of time to investigate the exact problem.

  • 👍2
JorrinKievit commented

Hi yall, I think I tracked down the issue, but I don't know how to fix it yet.

The TradingView script tries to access various DOM elements to detect the copyright attribute and other various things. It did not do this before hence it has been working until they updated their scripts. The following is happening:

  1. First the script is added to the DOM
  2. Then the script replaces itself with the iframe.
  3. After this happened, the script is executed again? probably because of the react rerender?
  4. Since the script is already replaced and no longer on the dom, it is not able to access other DOM elements using .parentNode and .parentElement since it does not exist.
  5. This is why it crashes, but the widgets still seem to work -> https://tradingview-widgets.jorrinkievit.xyz/docs/components/SymbolOverview

If there are any React wizards out here, I'm open to suggestions. If I'm not able to find a fix I might reach out to TradingView 🤔

  • 👍1
mdkberry commented

I was trying a few work arounds and getting ChatGPT to tweak idea but nothing worked in the way I needed it. I had problems with market overview using other methods giving that same "c is null" error in inspector, so I think there are likely a few other people impacted.

but for now what I got to work was i-frames, if anyone needs a work around while waiting, adapt this (works in ReactJS):

<iframe title="market-overview" scrolling="yes" allowtransparency="true" style={{ boxSizing: "border-box", display: "block", height: "640px", width: "50%" }} src="https://s.tradingview.com/embed-widget/market-overview/?locale=en#%7B%22colorTheme%22%3A%22dark%22%2C%22dateRange%22%3A%223M%22%2C%22showChart%22%3Atrue%2C%22largeChartUrl%22%3A%22%22%2C%22isTransparent%22%3Afalse%2C%22showSymbolLogo%22%3Atrue%2C%22symbol%22%3A%22AMEX%3ASPY%22%2C%22width%22%3A%22100%25%22%7D" frameborder="0"></iframe>
Gagafeee commented

Hi, still no update for this bug since ?

JorrinKievit commented

Should be fixed in 1.1.0. Let me know if any issues occur

  • 👍1