-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
uibuilder url too long + other issues #2
Comments
Incidentally, I tried updating the react dependencies to the latest version but webpack and babel now recognise that the module and esm versions are actually ESM's and refuses to load them correctly unless you switch to ESM throughout. |
What works for me is using a standard typescript react app and then having a file with this content: declare var uibuilder: {
start: (a?: any, b?: any) => void;
get: (key: string) => any;
send: (msg: any) => void;
onChange: (key: string, callback: (newVal: any) => void) => void;
};
And then adding the following line in the index.html: <script defer src="../uibuilder/uibuilder.iife.min.js"></script> Thus not having the need to add uibuilder as dependency at all. Just 2 quick notes on that: You have to enter the homepage key in the package.json & the proxy settings like this: {
...
"homepage": "your-app",
"proxy": "http://localhost:1880"
} Also note that in order for the socket io client to connect correctly to your Node-RED instance you now need to enter the following url: http://localhost:3000/your-app The |
Thanks for the updates - I'm thinking it might be great to have a new WIKI entry that demonstrates your approach? I don't use TS or REACT so I can't really write anything but if you were willing, you should be able to create a new page. If you do, please just give me a ping and I will highlight it in the Node-RED forum. |
Hi, the name
uibuilder-react-example
is too long for newer versions of uibuilder which limit the url to 20 chars max.Also, there is now a much better way to incorporate this repo into Node-RED.
index.html
file in thesrc
folder can be deleted.gaillarddamien/uibuilder-react-example
as the template. It will import this repo to the correct folder.npm install
.There are also a couple of things that don't quite work correctly in your repo depending on how node-red and uibuilder are installed:
You should change the
dependencies
in your repo todevDependencies
to avoid future issues.In package.json,
"node-red-contrib-uibuilder": "file:../../node_modules/node-red-contrib-uibuilder",
will not always work. You should use the live package"node-red-contrib-uibuilder": "*",
. Even then npm can really screw things up! So if the build can't find the package, you might have to do some tweaking of yournode_modules
folder.In
src/scenes/UserData.js
, the path to the old client is wrong. It should be../../node_modules/node-red-contrib-uibuilder/front-end/uibuilderfe
.Because you are using the "old" front-end client, you need to add the the Socket.IO client to package.json and
import
it before you import the client.ALTERNATIVELY, you can use the new client by changing the import to
import uibuilder from '../../node_modules/node-red-contrib-uibuilder/src/front-end-module/uibuilder.module'
- however, in that case, although your build works, your dev server fails because I use more modern javascript that Babel cannot understand.You could also import the ESM version of the library:
import uibuilder from '../../node_modules/node-red-contrib-uibuilder/front-end/uibuilder.esm'
. That also works with your build but though it doesn't give an error when starting the dev server, it fails to load Socket.IO correctly.So either of the new client builds work fine for node-red itself, they just don't work for the REACT dev server for some reason. It is possible that adding a better JS parser that understands more modern JavaScript might help.
The text was updated successfully, but these errors were encountered: