'executeDeepLink()' fails on file URL with "Cannot read property 'baseUrl' of undefined"

[andylwelch]

When I use executeDeepLink(url) in either web or desktop apps, the following error is logged in the Teams console "

"Cannot read property 'baseUrl' of undefined"

I am attempting to use this URL which I have validated to work fine in the browser. If I use an anchor tag instead it opens the webUrl which then triggers the desktop app. Not a very pleasant experience.

[ghost]

Hi andylwelch! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out. Best regards, Teams Platform

[Nikitha-MSFT]

we are not able to repro the issue at our end. Could you please share the code you are trying?

[andylwelch]

Hi @Nikitha-MSFT

Here is an extract of the React app I am running in a tab inside teams:

import { executeDeepLink } from '@microsoft/teams-js';

...

   return (
              <IconButton onClick={() => executeDeepLink(link.detailsUrl)}>
                <OpenInNewIcon />
              </IconButton>
   );
<

where link.detailsUrl is this URL

Both the desktop app and the web view produce the error about baseUrl. I suspect the https://teams.microsoft.com/l/file/... url has not been tested with the executeDeepLink function

[ydogandjiev]

@andylwelch, how are you constructing the deep link URL for your scenario? I don't believe the file deep link is one of our publicly documented Teams deep links which might explain why it doesn't work with our executeDeepLink API: https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-links

[andylwelch]

@ydogandjiev as per https://github.com/MicrosoftDocs/msteams-docs/issues/1174 "... just not documented. Here is a sample format for deeplink to files."

[Nikitha-MSFT]

We are not able to repro it at our end. I have tried the same URL provided by you it is working fine. Here is the code I have tried

<input type="button" name="tabType" value="Join Team" onclick="onClick()">
        <div class="date">
            <p>date and time:</p>
            <div id="demo"></div>
            <script type="text/javascript">
                microsoftTeams.initialize();
                function onClick() {
                    microsoftTeams.executeDeepLink('https://teams.microsoft.com/dl/launcher/launcher.html?url=%2F_%23%2Fl%2Ffile%2Fe1a40c88-aede-4641-9fc8-06c8332a3a47%3FchannelId%3D19%253Aa971080e0db24090884f31e5d0942575%2540thread.skype%26entityId%3De1a40c88-aede-4641-9fc8-06c8332a3a47%26fileType%3Dxml%26groupId%3D5188151c-09fe-4817-b60f-d06881f85fb5%26objectUrl%3Dhttps%253A%252F%252Fredacted.sharepoint.com%252Fsites%252FWelchy%252FShared%2520Documents%252FGeneral%252Fadd-in-local.xml%26serviceName%3Dteams%26tenantId%3D190ca712-ff6d-4092-931e-5e1c17257795%26title%3Dadd-in-local.xml&type=file&deeplinkId=66ceebf1-6183-442b-9e06-b4331c25bb25&directDl=true&msLaunch=true&enableMobilePage=true&suppressPrompt=true')
                }

            </script>
            <script>
                var d = new Date();
                document.getElementById("demo").innerHTML = d;
            </script>

        </div>

Deeplink is working fine and the issue is with the code. Could you please check the code?

[andylwelch]

Thanks for that code. I have never seen that URL format with /dl/launcher/launcher.html?url=...&type=file&deeplinkId=...&directDl=true&msLaunch=true&enableMobilePage=true&suppressPrompt=true.

If I use that format instead I can see that it does open the link in the browser. Unfortunately it always opens a new tab in the web browser even if I am in the desktop app. This is a poor user experience which I thought was meant to be avoided by calling the javascript function executeDeepLink. In fact, opening a browser page is the same experience that I could already achieve by making a basic clickable link to the https://teams.microsoft.com/l/file/... without using the Teams SDK!

Re: your question of how I generated my file link, here is an extract showing how I parse a file uploaded (or retrieved) from the MSGraph API. group is my object which had all the identity parameters.

   const {
      name,
      webUrl,
      // uploaded files have this as download
      '@content.downloadUrl': content,
      // listing files returns this value
      '@microsoft.graph.downloadUrl': download,
      file: { mimeType } = {},
    } = file;

    const fileType = mime.extension(mimeType);
    const { id: groupId, channelId, tenantId } = group;
    const { UniqueId: entityId } = queryString.parse(new URL(download || content).search);

    const params = {
      objectUrl: decodeURI(webUrl),
      fileType,
      title: name,
      serviceName: 'teams',
      groupId,
      channelId,
      entityId,
      tenantId,
    };
    const detailsUrl = `https://teams.microsoft.com/l/file/${entityId}?${queryString.stringify(
      params
    )}`;
  }

this was later triggered by the UI:

import { executeDeepLink } from '@microsoft/teams-js';

...
   return (
              <IconButton onClick={() => executeDeepLink(detailsUrl)}>
                <OpenInNewIcon />
              </IconButton>
   );

Is there any supported way for 3rd party apps to allow the user to open their file in the desktop app, without leaving the desktop desktop app and opening a browser?

[Nikitha-MSFT]

@andylwelch Could you please share your manifest and repro steps?

[andylwelch]

package.json

  "name": "our.product.webfront",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.8.3",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/lab": "^4.0.0-alpha.39",
    "@microsoft/teams-js": "^1.7.0"
  },
  "scripts": {
    "dev": "react-scripts start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test -- --config jest.config.js",
    "eject": "react-scripts eject"
  }
}

Steps:

1. Generate a url using the code shared above
2. Trigger it to open with executeDeepLink(url)

Expected output: In Teams app, opens the teams files tab without opening the browser first (like a normal clickable URL)

Actual output: Using url https://teams.microsoft.com/dl/launcher/launcher.html?...: the browser opens

Using url https://teams.microsoft.com/l/file/${entityId}...: error is thrown in console Cannot read property 'baseUrl' of undefined

[Nikitha-MSFT]

The file that you are uploading in teams. Could you please share that file?

[andylwelch]

The file is irrelevant. It happens with every file I upload. The test case I was describing above was a generic xml file I had on my system but it happens with every file I have tried ie .csv .txt etc

[Nikitha-MSFT]

How you are testing the deeplink inside the teams?

[andylwelch]

The executeDeepLink() command is being run inside a tab loading our webpage inside a Team.

[Nikitha-MSFT]

Could you please share manifest?

[andylwelch]

Here is our Teams app manifest.json with all guids and company info redacted manifest.json.txt

[Nikitha-MSFT]

@andylwelch We need the Bot id as well to test this issue you can reachout to microsoftteamsdev@microsoft.com alias with your actual manifest & close the issue here.

[swsvindland]

I have run into this bug a lot. The problem is your import statement, you cannot import it as a module. It must be `import * as microsoftTeams from '@microsoft/teams-js';

const someFunction = () => { executeDeepLink('put link here') } `

[andylwelch]

Thank you for the reply @swsvindland. Sorry for the delay, I will try that out when I get the chance!

[vman]

Thanks @swsvindland! Just bumped into this one and your fix solved it for me.