I am trying to integrate miro in my react app. And I am currently facing these errors,
“SDK Loaded” message is being printed on the console, but miro.onReady() function is not getting called. And if I try to call miro.isAuthorized() or miro.requestAuthorization(), then it’s showing me error (“is not a funtion” for both), even if “miro” as a variable is defined.
From one conversation in the community, I found that we can put the ReactDOM.render function inside the miro.onReady function, but now even “SDK Loaded” is not being printed, and React app is also not being rendered.
Page 1 / 1
@Pranav Patel
Happy to try to help.
Not sure if you’ve seen it yet or not… but, Here’s a react-Miro boiler plate from MIro’s sample apps. Maybe there’s sdk loading-structure insight there.
Thanks for the reply @Max Harper , I tried to execute the react boiler-plate code and even that is giving me the SSL error.
Do you have any solution for this?
@Pranav Patel
- are you serving the react app with something other than using the create-react-app dev server? - Are you trying to serve this into the Miro plugin iFrame UI endpoint by serving it from localhost port 9000? This can’t be done - you must use ngrok—
- Are you using ngrok?
- Is ngrok tunneling also to your localhost port 9000?
- Are you using the https address that ngrok gives you at the CLI as the address for your app in the Miro app admin page? - is that https address now working and serving up your content — example: /index html if you type it directly into the browser?
@Max Harper
- We are using create-react-app dev server.
- No we are not directly serving on localhost, we tried both local tunnel and ngrok for serving. For both it’s showing the same error mentioned in previous post.
- Yes we tried ngrok.
- Yes it’s tunneling.
- Yeah we are using the same address.
- Yes it is working and react-app is getting served, but SSL error is showing up there.
This is what we have followed,
We cloned the boiler-plate code.
There were some syntax errors in webpack.config, so we did some minor changes and we wrote class in ES5 syntax.
We ran the server and got the local-tunnel domain address, added it in the miro app. We got the same SSL error.
Alternatively, we tried ngrok also and got the same SSL error.
@Pranav Patel
can you confirm that
- is the ngrok-given https address of your app is working and serving up your content — example: /index html if you type it directly into the browser?
It’s not clear if you’ve even got a successful react app webpage running
(note: you can comment out any code that requires the SDK to run — so that it doesn’t throw an error when loaded outside of Miro).
—
And to be clear- Miro will not run the app from local host- you must tunnel to localhost with ngrok and point the app admin WebPlugin URL to the https URL
From Miro.
—
also:
Miro says to point the app WebPlugin URL to the root directory… but sometimes I find it actually needs the entry point file
Try pointing to your index html...
https://…..ngrok.com/index.html
@Max Harper
- Yes, ngrock is serving react app and also /index.html.
We tried commenting the all miro specific code and then also it’s showing the same error. So I guess that error is not because of miro.
But then again miro.onReady() function should execute if the error is not because of miro, as the code above and below of miro.onReady() is getting executed.
@Pranav Patel
It’s hard to help without seeing the code you’re using. Loading order of scripts and libraries can be tricky inside Miro so seeing how you’ve set it up is important.
@Max Harper
We are using the react boiler-plate code only and haven’t made any changes except we just wrote class in ES5 syntax in webpack.config.js file.
