Skip to main content
Answered

Miro Web SDK 2.0 Error - Miro Not Defined and Missing _sdk parameter

  • 30 July 2024
  • 9 replies
  • 120 views

For the past week, I have been having an issue with the Miro Web SDK :(

First a little background! -

I have created an plain TS/JS app for my organization following the Miro Developer documentation (great docs btw). We are leveraging the Azure environment to host our app through Azure Static Web Apps pulling from Azure Dev Ops. The app is leveraging the Miro Web SDK to enable app icon click (miro.board.ui.openPanel method), modals (miro.board.ui.openModal method), a drag-and-drop feature (miro.board.ui.on method), and it also gets the current user (miro.board.getUserInfo method). 

Until 1 week ago, the app was working perfectly, however since last Wednesday (07/24/24) certain features of the app have not. After checking the logs, I realized the code hung up when instantiating the miro sdk using the openModal method and ui.on methods. I was also getting the following error in the Miro Developer console. 

 The first and third lines are expected and codified. So, here we have two errors. One stating that the _sdk parameter is missing and another being a reference error to miro. I’m assuming the issue is stemming from the first warning, but I am not sure what is causing that. I dived into the miro.js file and I logged my app url to the console - I did not see the _sdk parameter appended. Below is the code to initialize the modal and drag-in-drop:  

miro.js - I added some error handling
modal
drag-in-drop

As a test, I commented out the entire block of code (for drag-in-drop) above. Now passing this, the application works as expected with the caveat that images dropped no longer have a default 100px width.

Based on this, I’m assuming its an issue with the SDK as my code did not change. 

Problems: 

  1. _sdk in application url is missing 
  2. causes miro.js to not load methods properly

Hope this makes sense. Just a bit confused given it was working great before. Please let me know if I can provide any more info! 

Looking forward to your response 🙂 Thanks! 

9 replies

Horea Porutiu
Rank
Userlevel 4
Badge +1

Hi @Neil Mehta 

In general, miro.js should not load methods, it even does not have them now… it is a proxy that can accept any method name. 

Could you please answer a few questions to help us find the root cause of this? 

  1. How did you add miro.js file to his app?
  2. Is the app running inside the miro? is it possible that you are running the app on localhost:3000 or something similar? 
  3. It will be helpful to see the network requests from the dev console, to check what is going on. Could you please provide a screenshot of this? 
N
Badge +1

Hi Horea, 

Thanks for adjusting my understanding of miro.js.. yep looking at the code that makes more sense.

1.

Initially, miro.js script was reference in html. 

<script src="https://miro.com/app/static/sdk/v2/miro.js"></script>

For testing purposes, miro.js was downloaded and referenced locally (as miro.js within in the app itself). This was the code snippet with new console logging added. To test, I recently reverted back to referencing using the script tag. However, in either case, I get a similar error message. 

Error when referencing miro.js from script tag

I do see the app within all specified miro board’s. What is strange is that I do get an error at the bottom of my board that my app has failed to load (sometimes). Am I loading miro incorrectly within my code? Difficult to say given it was working previously. 

2. The app runs within miro. I can interact with it along with other users in the organization. 

3. The first image is the network request on first app load: 

app network sequence on first load

Below, this is where the error occurs. In my app, I have my main.html redirect to icon-tab.html. The red line indicates where the redirect occurs based on button click in main.html. 

after red line separate html loads 

I’ll be available on standby all day to assist. 

Thanks, @Horea Porutiu !   

Horea Porutiu
Rank
Userlevel 4
Badge +1

Hi @Neil Mehta 

Could you please share the whole URL (domain can be excluded)? from the main.html file which I showed below in red?

 

 

Horea Porutiu
Rank
Userlevel 4
Badge +1

Hi @Neil Mehta 

Our engineers were able to reproduce the issue. They said that one possible cause may be the order in which the scripts are loaded. For example, in the first screenshot with red circle, the order of the scripts doesn’t work. 

 



The 2nd screenshot, with the script loaded first, seems to solve the issue. Can you try to reorder the scripts and ensure the Miro script is loaded first, as shown below?

 


Our engineers will try to also fix the issue on our side, but it will take some time. 

 

N
Badge +1

Hey @Horea Porutiu! 

Thanks for the follow up. 

Ok here is the main.html url: 

/main.html?_miro=1.65906.0&_sdk=https%3A%2F%2Fmiro.com%2Fapp%2Fstatic%2Fe1cd36147fcd553f.js%3Ffile

Note: The placement of the script from intial to new did not change the main.html. This seemed to always work for the main.html page. 

initial placement of miro.js script

 

new placement

I am still getting the same error: 

same error when on iconGrid.html or modal.html

 

Theory: 

@Horea Porutiu I have a theory.. if we can confirm the below with the engineers.. 

Ok! So, the flow of the app is as follows: The main.html page is the main page of the app. Here the user is presented with the ability to click a button which opens up a modal (using miro’s sdk) which allows users to upload images - modal.html.. OR they can click a list of items (containers) that route to iconGrid.html.. which uses Miro sdk’s drag-and-drop method to allow the user to drop in images from our DB… 

I have noticed that when the user clicks on the button to open up the modal when initially on main.html ... the modal pops up as expected with the following url.. 

/modal.html?_miro=1.65906.0&_sdk=https%3A%2F%2Fmiro.com%2Fapp%2Fstatic%2Fe1cd36147fcd553f.js%3Ffile

However, when the user clicks into a container (routes to iconGrid.html), then clicks back to go to the main page (routes back to main.html) then clicks on the modal again.. the _miro and _sdk parameters are dropped from the url. 

No matter the sequence of clicks, here is the iconGrid.html (initially routes from main.html) 

/iconGrid.html?container=”container-name-added-here”

Main difference being the _miro and _sdk params do not carry over.

I added them manually from the initial main.html url and appended them to the below route

Manually Added _miro and _sdk params

After doing this, it worked! The modal still does not work since the parameters are still missing there. I could parse the params from the initial main.html url and append them to each route. However, this is a stop gap solution. Need to figure out why the miro environment and miro.js are not creating the _miro and _sdk parameters now.. as this was working before. Hoping my theory makes sense to the engineers. 

Will be available any time of the day - I’m open to a video call as well to figure this out. 

Horea Porutiu
Rank
Userlevel 4
Badge +1

Hi @Neil Mehta, 

Thanks so much for your messages and screenshots. It helped a lot! Our engineers have identified the bug and are working on the fix. 

It should be out / deployed within a few days. I’ll keep you updated here. 

Sorry for this inconvenience it has caused.  

N
Badge +1

No, thank you @Horea Porutiu!

Glad we figured this out! and sounds good will keep an eye out for your update. 

Thanks man 🤙

Horea Porutiu
Rank
Userlevel 4
Badge +1

Hi @Neil Mehta 

The fix should now be deployed. Could you try it again with the original code to see if you are still seeing an error? 

Let me know!

N
Badge +1

Hi @Horea Porutiu 

It looks like its 99.99% working! :) Everything relating to the SDK usage loads now. I am not sure if this is related, but I do see a CORS error when dragging an image from the app to the board. (The image is still added) - Just curious on that. 

app image to board CORS error - image still loads
network request 

Thanks! 

Reply


Terms & Conditions