Hi, I have a problem with getting react ui to work with uibuilder. At first I tried to build my own react app and then add uibuilders functionality to connect to node-red but when I tried to use uibuilder.start() function it threw an error "io is not a function". Then i tried to run the function with params as suggested in documentation but it didnt work as well. I decided to try to run uibuilder-react-example from github but I got the same results.
Here are steps I took:
-installed node-red
-installed node-red-contrib-uibuilder via node-red palette
-installed reactjs in uibuilder's front end lbraries manager
-pulled uibuilder-react-example from GitHub - gaillarddamien/uibuilder-react-example
-installed app dependencies - npm install
-tried to npm run build it but it threw an error "Cannot find module: 'socket.io-client'. Make sure this package is installed. You can install this package by running: npm install socket.io-client."
-installed socket.io-client
-built app
-created uibuilder node in node-red flow, renamed it to uibuilder-react-example, adjusted advanced settings to run ui from dist folder because it didn't work automatickly nor after reseting and redeploing flow
Error in console in app opened through node-red:
TypeError: r is not a function
at Object.e.ioSetup (uibuilderfe.js:315)
at Object.start (uibuilderfe.js:1257)
at new s (UserData.js:17)
at vi (react-dom.production.min.js:135)
at Va (react-dom.production.min.js:181)
at qu (react-dom.production.min.js:269)
at Ol (react-dom.production.min.js:250)
at Cl (react-dom.production.min.js:250)
at _l (react-dom.production.min.js:250)
at gl (react-dom.production.min.js:243)
uu @ react-dom.production.min.js:216
react-dom.production.min.js:260 Uncaught TypeError: r is not a function
at Object.e.ioSetup (uibuilderfe.js:315)
at Object.start (uibuilderfe.js:1257)
at new s (UserData.js:17)
at vi (react-dom.production.min.js:135)
at Va (react-dom.production.min.js:181)
at qu (react-dom.production.min.js:269)
at Ol (react-dom.production.min.js:250)
at Cl (react-dom.production.min.js:250)
at _l (react-dom.production.min.js:250)
at gl (react-dom.production.min.js:243)
Error in console in app opened through reacts developement server:
Uncaught TypeError: io is not a function
at Object.self.ioSetup (:3000/static/js/vendors~main.chunk.js:344)
at Object.start (:3000/static/js/vendors~main.chunk.js:1208)
at new UserData (:3000/static/js/main.chunk.js:625)
at constructClassInstance (:3000/static/js/vendors~main.chunk.js:20992)
at updateClassComponent (:3000/static/js/vendors~main.chunk.js:25617)
at beginWork (:3000/static/js/vendors~main.chunk.js:27212)
at HTMLUnknownElement.callCallback (:3000/static/js/vendors~main.chunk.js:12177)
at Object.invokeGuardedCallbackDev (:3000/static/js/vendors~main.chunk.js:12226)
at invokeGuardedCallback (:3000/static/js/vendors~main.chunk.js:12286)
at beginWork$1 (:3000/static/js/vendors~main.chunk.js:32028)
at performUnitOfWork (:3000/static/js/vendors~main.chunk.js:30864)
at workLoopSync (:3000/static/js/vendors~main.chunk.js:30801)
at renderRootSync (:3000/static/js/vendors~main.chunk.js:30767)
at performSyncWorkOnRoot (:3000/static/js/vendors~main.chunk.js:30384)
at scheduleUpdateOnFiber (:3000/static/js/vendors~main.chunk.js:29972)
at updateContainer (:3000/static/js/vendors~main.chunk.js:33509)
at :3000/static/js/vendors~main.chunk.js:34041
at unbatchedUpdates (:3000/static/js/vendors~main.chunk.js:30524)
at legacyRenderSubtreeIntoContainer (:3000/static/js/vendors~main.chunk.js:34040)
at Object.render (:3000/static/js/vendors~main.chunk.js:34123)
at Module.<anonymous> (:3000/static/js/main.chunk.js:387)
at Module../src/index.js (:3000/static/js/main.chunk.js:476)
at __webpack_require__ (:3000/static/js/bundle.js:857)
at fn (:3000/static/js/bundle.js:151)
at Object.1 (:3000/static/js/main.chunk.js:957)
at __webpack_require__ (:3000/static/js/bundle.js:857)
at checkDeferredModules (:3000/static/js/bundle.js:46)
at Array.webpackJsonpCallback [as push] (:3000/static/js/bundle.js:33)
at :3000/static/js/main.chunk.js:1
index.js:1 The above error occurred in the <UserData> component:
at UserData (http://localhost:3000/static/js/main.chunk.js:618:5)
at div
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
react-dom.development.js:23275 Uncaught TypeError: io is not a function
at Object.self.ioSetup (:3000/static/js/vendors~main.chunk.js:344)
at Object.start (:3000/static/js/vendors~main.chunk.js:1208)
at new UserData (:3000/static/js/main.chunk.js:625)
at constructClassInstance (:3000/static/js/vendors~main.chunk.js:20992)
at updateClassComponent (:3000/static/js/vendors~main.chunk.js:25617)
at beginWork (:3000/static/js/vendors~main.chunk.js:27212)
at HTMLUnknownElement.callCallback (:3000/static/js/vendors~main.chunk.js:12177)
at Object.invokeGuardedCallbackDev (:3000/static/js/vendors~main.chunk.js:12226)
at invokeGuardedCallback (:3000/static/js/vendors~main.chunk.js:12286)
at beginWork$1 (:3000/static/js/vendors~main.chunk.js:32028)
at performUnitOfWork (:3000/static/js/vendors~main.chunk.js:30864)
at workLoopSync (:3000/static/js/vendors~main.chunk.js:30801)
at renderRootSync (:3000/static/js/vendors~main.chunk.js:30767)
at performSyncWorkOnRoot (:3000/static/js/vendors~main.chunk.js:30384)
at scheduleUpdateOnFiber (:3000/static/js/vendors~main.chunk.js:29972)
at updateContainer (:3000/static/js/vendors~main.chunk.js:33509)
at :3000/static/js/vendors~main.chunk.js:34041
at unbatchedUpdates (:3000/static/js/vendors~main.chunk.js:30524)
at legacyRenderSubtreeIntoContainer (:3000/static/js/vendors~main.chunk.js:34040)
at Object.render (:3000/static/js/vendors~main.chunk.js:34123)
at Module.<anonymous> (:3000/static/js/main.chunk.js:387)
at Module../src/index.js (:3000/static/js/main.chunk.js:476)
at __webpack_require__ (:3000/static/js/bundle.js:857)
at fn (:3000/static/js/bundle.js:151)
at Object.1 (:3000/static/js/main.chunk.js:957)
at __webpack_require__ (:3000/static/js/bundle.js:857)
at checkDeferredModules (:3000/static/js/bundle.js:46)
at Array.webpackJsonpCallback [as push] (:3000/static/js/bundle.js:33)
at :3000/static/js/main.chunk.js:1