ParserError: [xmldom error] for demo app on Android

[thomas-huegel]

Hi,
I have followed the indications on https://hyperview.org/docs/guide_installation and I am encountering the following error on Android:

ParserError: [xmldom error] element parse error:
ParserWarning: [xmldom warning] unclosed xml attribute
@#[line:4,col:1]
@#[line:4,col:1]

Node v23.8.0
Yarn 1.22.22
The Expo App v52 did not work on my Android phone, and I was asked to install v49 to match the server's version.
I have the same error with the Android emulator for Pixel_3a_API_34_extension_level_7_x86_64.
Thanks for your help!

[flochtililoch]

Hi @thomas-huegel - from the error I suspect the device is not able to reach the server. I assume you're trying from a device, not from an emulator?
If so, you have to set the BASE_URL environment variable when starting the Expo server (docs), by default it's using 0.0.0.0 address, which is local only:

BASE_ENV=http://x.x.x.x:8085 yarn start

where x.x.x.x is the IP of your local host. Your device and your host need to be on the same WIFI network.

Additional notes:

• I see you're using Node 23, which does not work yet with our XML server, you will need to downgrade to Node 22.
• Expo 52 is currently in test but not available yet, hence the need to install v49 for now
• You're likely to run into another issue if you're on the latest master (Unable to resolve "react-native-keyboard-aware-scrollview" ...), see resolution step here.

Let me know if that helps. Thanks!

[flochtililoch]

Hi @thomas-huegel - an update on my previous reply:

• You're likely to run into another issue if you're on the latest master (Unable to resolve "react-native-keyboard-aware-scrollview" ...), see resolution step here.

This is no longer needed now that 0.89.0 is released

[thomas-huegel]

Hi @flochtililoch
Thanks for your reply.
Why not include the required Node version in package.json then?
Now with Node 22 the Android emulator gives me the following error:

(node:5348) [DEP0044] DeprecationWarning: The `util.isArray` API is deprecated. Please use `Array.isArray()` instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Android Bundling failed 7563ms
Unable to resolve "react-native-keyboard-aware-scrollview" from "node_modules/hyperview/src/core/components/keyboard-aware-scroll-view/index.ts"

Thanks for your help.

[flochtililoch]

@thomas-huegel

Why not include the required Node version in package.json then?

Good suggestion, here it is: #1091

Unable to resolve "react-native-keyboard-aware-scrollview"

This error is what I explained in the 3rd bullet point of my first reply, then mentioned after is now fixed (I just retried, the error no longer happens on my end). Make sure you pull latest master and re-install node modules on the demo/ directory.

[flochtililoch]

@thomas-huegel did the last suggestion solved your issue?

[thomas-huegel]

Hi @flochtililoch
It now complains that my system does not have a compatible version of Node.
Wouldn't it possible to specify it in package.json so that it downloads and uses Node 22 for this project instead of my system's Node 23 (like a Python virtual env)?
I don't want to mess up my system's Node installation.
Thanks.

[thomas-huegel]

I get confused by the doc : https://hyperview.org/docs/guide_installation
In the case we use a physical phone, it is said to do

BASE_URL="http://X.X.X.X:8085" yarn start

But then my machine listens on port 8081 (with exp://), not 8085 (with http://).
I get also confused between yarn server and yarn start and when to use which.
I also tried the adb reverse you mention on #1084
But all I get is :

Type Error: Network request failed

[thomas-huegel]

I ended up understanding that we may need both yarn server AND yarn start to run in parallel, and it seems to work then on a physical phone.
Note: after terminating yarn server though, I cannot use the arrows in my shell (zsh) any more.

But it does not work on a tiny «Hello world» app I wrote serving XML files on another port (instead of using yarn server).
Here is the code I tested (extracted from the Hypermedia book):

<doc xmlns="https://hyperview.org/hyperview">
  <screen>
    <styles>
    </styles>
    <body>
      <header>
        <text>My first mobile app</text>
      </header>
      <view>
        <text>Hello, world!</text>
      </view>
    </body>
  </screen>
</doc>

I set the Content-Type header to application/vnd.hyperview+xml.
What I get is:

ParserError: [xmldom error] invalid doc source
@#[line:0,col:undefined]

It could be nice to add such a simple example to the Getting started documentation.
Thanks for your help.

[flochtililoch]

@thomas-huegel

Wouldn't it possible to specify it in package.json so that it downloads and uses Node 22 for this project instead of my system's Node 23 (like a Python virtual env)?
I don't want to mess up my system's Node installation.

Node version is not installable via a dependency listed in the package - I would recommend you to use NVM, which allows you to install several versions of Node while leaving the default/system-installed one untouched. That's what I use in my daily workflow as I'm working in many different node projects. I will add the additional .nvmrc file in our project to help make the version switch more automated.

we may need both yarn server AND yarn start to run in parallel, and it seems to work then on a physical phone even without setting BASE_URL.

Yes, I'll update the doc to make this very clear - you need to have both running at the same time. The command yarn server runs the XML server, the "backend" that serves the files to Hyperview. The command yarn start runs the Expo bundler, basically the dev server that exposes the JS app to Expo.

After terminating yarn server though, I cannot use the arrows in my shell (zsh) any more.

Ok, I've seen this too, there's a glitch in how the process is started, which messes up the prompt after killing the process. Minor annoyance, but I will file it too (EDIT: #1093). My workaround has been to press ctrl + C again, which restores the prompt.

[thomas-huegel]

Hi @flochtililoch
When I launch yarn server and access to localhost:8085, what I get is a directory listing.
I thought it would be an HXML file though. Where does yarn start expect these HXML files to be located once BASE_URL is set?
Thanks.

[flochtililoch]

@thomas-huegel the entry point for the demo app is configured here. The URL that the app hits first is:

http://localhost:8085/hyperview/public/index.xml

[thomas-huegel]

Hi @flochtililoch
Thank you for the information.
I managed to do a «Hello world» screen.
Now I would like to push another screen through a text href, but what I get is the following error:

The 'navigation' object hasn't been initialized yet.

On https://hyperview.org/docs/example_navigation they do not use <navigator> whereas it gets used on https://hyperview.org/docs/guide_navigation so I wonder if it is necessary.
Would you have any idea about that, please?
Thanks.

[flochtililoch]

Hey @thomas-huegel. It looks like the documentation in https://hyperview.org/docs/example_navigation isn't complete: it should mention that as a pre-requisite, you need to need to implement the <navigator> element as described in https://hyperview.org/docs/guide_navigation.

Typical structure for the most basic app is:

• entry endpoint renders the navigation structure (<navigator> element, example)
• additional endpoints render individual screens (<screen> element)

[thomas-huegel]

Ok, thank you, screens now work with a root <navigator>.
But I have a problem with a simple form:

No navigation found for provided target []

Is there something special to do? include the POST route into a navigator?
In the example on https://hyperview.org/docs/reference_form the target is the form's id. Is it always the case? What is the purpose of the target in the submit button?
Thanks!

[thomas-huegel]

I ended up putting action="replace" to my form button, and it worked.
But it was not an obvious step for me, to say the least.
Perhaps lacking in the documentation at https://hyperview.org/docs/reference_form

[flochtililoch]

I ended up putting action="replace" to my form button, and it worked. But it was not an obvious step for me, to say the least. Perhaps lacking in the documentation at https://hyperview.org/docs/reference_form

Thanks, it looks like the markup on that page is also not complete. Fixed in #1103

[flochtililoch]

I think your original issue is fixed, so I'll close this one for now.

[thomas-huegel]

Hi @flochtililoch
All that is related to the doc.
I still have another question please: should header be a son of screen or of body?
Hyperview's website tells the first one, but it does not seem to be displayed, whereas the Hypermedia book tells the second one, and it seems to work.
Thanks again.

[flochtililoch]

Thanks for pointing that out, the doc is incorrect, I will fix that other issue too. If you spot any other inconsistencies, please let me know, and feel free to also submit PRs to fix those! Thank you.
EDIT: fix here