How we made Elm and Google Translate work together

Just published: “How we made Elm and Google Translate work together”


What does this do when the UI changes? Does Chrome continue to translate new text when Elm makes changes?

1 Like

Yes! The way Google Translate seems to work is that it listens for new text nodes added to the page and translates them as it finds them (you can see a quick flash of the original language as new stuff appears on the page). I suspect they use the <font> tags partly to keep track of what has already been translated.

Double like, fantastic!

Unfortunately this doesn’t seem to work without errors. When I use this and start scrolling on a long page I get:

TypeError: Cannot read property 'childNodes' of undefined
  3658 | // tag must be 1 or 2 at this point
  3659 | 
  3660 | var vKids = vNode.e;
> 3661 | var childNodes = domNode.childNodes;
  3662 | for (var j = 0; j < vKids.length; j++)
  3663 | {
  3664 | 	low++;

Anyone else seeing this?

How I use Google Translate: it’s installed as a browser extension, so open it, then click “translate page”.

1 Like

I have only tested the built-in Google Translate. That’s a different error. My guess is that something has been inserted into <body> that throws Elm’s patches off. Can you link to the extension you use?

Have not taken a deep dive into this solution but since I added translate=no and the other “fixes” just the other day I am very interested. :slight_smile:

First look at it makes me wonder. Could this not be added to the compiler output? Why not?

1 Like

The extension is offered by Google itself.

I’m running this in Incognito, just to avoid any other extension running.

That’s a way of not breaking the page too, yes. For us, we wanted to still allow customers to use Google Translate if possible, since it helps them understand our page.

I would be surprised if Elm modified global objects. But instead of domNode.replaceData() it could do something like if (domNode instanceof Text) { domNode.replaceData() } else { domNode.parentNode.replaceChild(document.createTextNode(), domNode) }, I guess. But my guess is that Evan would like to solve it in a completely general way – this is not the only problematic DOM update.


That extension works a little bit differently compared to the built-in Google Translate. It adds a bar at the top (inserted at the beginning of <body>), and it can also add a little popup when you select text (inserted at the end of <body> it seems like). For this case, you need something like jinjor’s patch.

It seems like very few of our customers use that extension compared to the built-in Google Translate, judging from the big drop in “replaceData” errors in our error reporting service.

1 Like

Yeah, haven’t been able to integrate that with my create-elm-app stack, especially during the hot loading phase.

I actually struggled with exactly that the other day, and came up with an alternate patch that works even with hot loading, and doesn’t require an extra wrapper <div>. I don’t have it in a shareable form yet, though.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.