ReferenceError: Can't find variable: DOMParser

Problem:
https://stackoverflow.com/questions/62768740/referenceerror-cant-find-variable-domparser
I’m parsing a fetched html string into DOM object for cross-platform React Native app.

I’m using Javascript’s built-in native DOMParser(ex. new DOMParser()). I don’t get this reference error when I run expo in web browser mode on Chrome. However, when I scan the qr code and view it on my android galaxy phone, I get the above error message.

I’ve tried storing global’s DOMParser into a variable to force reference pointing. But this attempt gives me another error: TypeError: undefined is not a constructor. This made me think that expo does not support DOMParser.
I cannot seem to find the same error that I am experiencing even after long hours of googling.
Please help! :slight_smile:

Partial Solution:
I tried importing @expo/browser-polyfill and I was no longer getting DOMParser undefined error. However, as the documentation for the polyfill mentions that it has a low browser support, I had faced other issues where I could not select and manipulate the dom as on Chrome webbrowser. Since this produced new issues, if anyone have other approaches please do reply!

Hi

It might help if you explain what you’re trying to accomplish on a higher level. i.e. why do you want to parse an HTML string into a DOM object? How does that help you achieve your real goal? What is your real goal?

I suspect DOMParser is one of those APIs that is generally available in Web browser implementations of JavaScript, but not in e.g. nodejs or React Native (or Expo).

If you absolutely need DOMParser then you might be able to make use of a WebView. Otherwise, maybe you can find a pure JavaScript library that will work for you. I have my doubts about the latter, but would probably start with libraries that work on nodejs, e.g. javascript - Trying to use the DOMParser with node js - Stack Overflow
Otherwise search for “DOMParser react-native” or something like that and see if you find anything useful.

1 Like

Thanks @wodin for replying!

To give you a bigger picture, I am trying to build a dictionary/reader app by crawling and customizing entry data from different organizations. Before going with current approach, I considered Webview but it seemed to me that Webview requires using Visual Studio 2019 for manual linking (solutions, projects stuff), where I got lost in the way, and has limitations as to customization of fetched data (might be wrong…hmm…).

And, what a coincidence, as I was waiting for someone to reply, I went ahead to try JSDOM but then Expo specifically warns staying away from packages utilizing Node standard library with this warning, just to share with you:

The package at “node_modules/tough-cookie/lib/cookie.js” attempted to import the Node standard library module “url”. It failed because the native React runtime does not include the Node standard library. Read more at Common questions - Expo Documentation

I kept stripping away unneeded modules to leave only dom parser module. But then, it seemed like it wasn’t worth my time and so I decided to utilize this html render library called react-native-render-html
. If you or others that read this post have used this library, please feel free to share how the experience was.

Hi

You definitely don’t need Visual Studio to use a WebView. You can use it just like other components available in Expo. See these tiny examples.

In terms of the Node standard library, yes, for the same sort of reason that DOMParser is not available in Expo (Expo is not a web browser), certain things available in Node are not available in Expo (Expo is not node and runs on a phone instead of a desktop/server OS.) When I suggested looking at libraries that work on nodejs I just meant that maybe there was one that did not rely one something that is not available in Expo.

I haven’t used react-native-render-html.