Broken react frontend library

[ramezrafla]

Hello, I followed the exact steps in https://neutralino.js.org/docs/getting-started/using-frontend-libraries#react

And get these errors

http://localhost:3000/__neutralino_globals.js:1: CONSOLE JS ERROR SyntaxError: Unexpected token '<'
http://localhost:3000/static/js/bundle.js:278:20: CONSOLE JS ERROR Invalid url for WebSocket ws://localhost:undefined?connectToken=undefined
http://localhost:3000/static/js/bundle.js:41067:20: CONSOLE JS ERROR SyntaxError: The string did not match the expected pattern.

Even the react setup after fails (another issue will be opened)

[ramezrafla]

I believe I identified the issue. When using hot-reload with react (i.e. react runs a server on port 3000), the URL of globals is specified as:

 <script src="%PUBLIC_URL%/__neutralino_globals.js"></script>

which is attempting to load from react's dev server (port 3000). It needs to load from neu's dev server. How do we do that?

[benjammin4dayz]

Hi @ramezrafla,

The underlying issue is that the Neutralino dev tools extension is failing to connect due to a lack of permissions. This was a quirk introduced in the latest release (v5.4.0) and I'm unsure whether or not it was intentional.

For now, add these top-level keys to neutralino.config.json:

"enableExtensions": true,
"extensions": [{ "id": "js.neutralino.devtools" }]

This will allow the dev tools to connect in order to automatically update the URL in your example to point to the neu dev server.

[ramezrafla]

Dear @benjammin4dayz
Thanks for your reply

When I add this extension the token (NL_TOKEN) becomes empty ('') string, and everything breaks

The instructions say to add:

<script src="%PUBLIC_URL%/__neutralino_globals.js"></script>

which is technically wrong as that file does not really exist, it's called through websocket. This is the root of the issue, we need a way to specify where to get the globals from.

[benjammin4dayz]

@ramezrafla,

When I add this extension the token (NL_TOKEN) becomes empty ('') string, and everything breaks

Admittedly, I'm not sure what could result in an empty string here. If the globals script cannot be fetched, all window.NL_* global values are typically undefined.

we need a way to specify where to get the globals from

When a Neutralino app is started with neu run, the Neu CLI should automatically modify the script tag for the globals, pointing the placeholder URL to the Neutralino app server's resources¹. A websocket connection between the Neutralino app and the Neu CLI devtools is necessary for this behavior to occur ²; this was my intent behind sharing the configuration values.

If you don't mind, please try my fork of codezri/neutralinojs-react as mentioned in the guide you've linked. I've only included the extension's config values. This would be helpful to determine if the issue is specific to your setup.

I've included a guide below for the sake of reproducibility.

Quick Setup

After reviewing the code, copy this block of commands into your terminal:

git clone https://github.com/benjammin4dayz/neutralinojs-react.git
cd neutralinojs-react
npx @neutralinojs/neu update
cd react-src
npm install
npm run build
cd ..
npx @neutralinojs/neu run

Have a coffee while it installs ☕ (create-react-app is so slow)

You should see something like this:

• The script tag for the globals is being managed by the Neu CLI.
• If the app shuts down cleanly, the URL will revert to the previous value.
• If the app is killed by signal interrupt or other means, you may need to reset the URL manually.

If you're seeing Uncaught SyntaxError: Unexpected token '<' (at __neutralino_globals.js:1:1) after the app initially starts, refresh the app via the context menu, CTRL-R, or enter window.location.reload() in the devtools window to update React's state and ensure that it's referencing the newly-updated HTML file.

Version Info

--- System ---
OS: Win11 x64
Node: v20
npm: v10.7.0

--- Global ---
neu CLI: v11.3.0 (latest)

--- Project: myapp (js.neutralino.zero) ---
Neutralinojs binaries: v5.4.0 (latest)
Neutralinojs client: v5.4.0 (latest)
Project version: v1.0.0

Footnotes

1. https://github.com/neutralinojs/neutralinojs-cli/blob/a9f23d4fa469fb5ff04f02f942a4175a5c284c61/src/modules/frontendlib.js#L71-L72 ↩

2. https://github.com/neutralinojs/neutralinojs-cli/blob/a9f23d4fa469fb5ff04f02f942a4175a5c284c61/src/modules/websocket.js#L28-L33 ↩

[benjammin4dayz]

After a bit more digging, I've discovered that the empty string in NL_TOKEN is a result of a failed call to extensions.getStats since it's not allow-listed. With all of these keys together, your existing app should work and have its NL_TOKEN properly defined.

neutralino.config.json

  "nativeAllowList": [
    // ...
    "extensions.getStats"
  ],
  "enableExtensions": true,
  "extensions": [{"id": "js.neutralino.devtools" }],

[ramezrafla]

@benjammin4dayz,

Thanks so much! Indeed, adding "extensions.getStats" to "nativeAllowList" does indeed make it work in dev. Well done!

Except ... now when we build, the patched src is still in index.html and build fails. If we revert to the form "%PUBLIC_URL%/__neutralino_globals.js", vite build fails.

The point is, there is quite a bit of knowledge required to get this working. Granted, we have to deal with a third-party framework so challenges will always remain, we should smooth them out somehow.

For now, I can't foresee a clean way of building without a fixed port, with the risk of collision with used ports when deployed.

[shalithasuranga]

Closing this since the issue is resolved by the above discussion. Thanks everyone 🎉