Local Debug with Visual Studio Code fails for Teams App with Localization in Manifest

jensker commented 1 year ago

Describe the bug I added localizationInfo to manifest.json of my teams app. When I try to locally debug the app, teams denies to load the package with error message: "Fehler beim Lesen von manifest.json: The file could not be parsed as a JSON object.

When I try to upload the local package manually, everything works as expected.

To Reproduce Steps to reproduce the behavior:

Local debug teams app with manifest and localization -> Error
Validate local package in Teams Developer Tools -> Success
Manually upload local app package to Teams and install app -> Success
Zip metadata to the cloud -> Success
Deploy to cloud -> Success
Remote debug teams app with manifest and localization -> Success

Expected behavior

I want to be able to locally debug the app package with localization without having to manully install the app package.

Screenshots

Manifest.template.json: "localizationInfo": { "defaultLanguageTag": "en", "additionalLanguages": [ { "languageTag": "de", "file": "resources/de.json" } ] },

de.json: { "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.12/MicrosoftTeams.Localization.schema.json", "name.short": "Name App", "name.full": "Name App", "description.short": "Description Short Deutsch", "description.full": "Description Long Deutsch", "staticTabs[0].name": "Home" }

Loading app locally to Teams:

Error message: Fehler beim Lesen von manifest.json: The file could not be parsed as a JSON object.

Networking analysis:

Checking the same package with teams developer tools:

Manually uploading the local package with localization is fine:

The localization json is available in local zip package. Also local manifest look fine.

VS Code Extension Information (please complete the following information):

Teams Toolkit v4.0.5
Windows 10

CLI Information (please complete the following information):

OS: [e.g. iOS8.1]
Version [e.g. 22]

Additional context Add any other context about the problem here.

ghost commented 1 year ago

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.

nliu-ms commented 1 year ago

Hey @jensker , thanks for your useful information. I will take a look and get back to you.

nliu-ms commented 1 year ago

Hey @jensker , sorry for the late reply. With some investigation I believe it might be a bug from server side. There are 2 options as the workaround: 1) You can use Teams Toolkit v4.0.2 (it uses different APIs so the localization file will be uploaded correctly) 2) You can still use Teams Toolkit v4.0.5, but please define more than one language in your manifest.template.json file.

"localizationInfo": {
        "defaultLanguageTag": "en",
        "additionalLanguages": [
            {
                "languageTag": "de",
                "file": "resources/de.json"
            },
            {
                "languageTag": "en",
                "file": "resources/en.json"
            }
        ]
    }

Please let me know if it works for you, thanks!

ghost commented 1 year ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

ghost commented 1 year ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. As it is labeled with bug, it will be manually handled

jensker commented 1 year ago

@nliu-ms : Sorry for the late reply. I was busy with deploying of the app in the AppSource store. Nevertheless, the workaround works pretty well. Thank you very much! This makes development much easier again.

Steffi3rd commented 1 year ago

Hi,

I have the same problem, even with Teams Toolkit v4.0.2 or 4.0.5. ❌ Erreur lors de la lecture du manifest.json: The file could not be parsed as a JSON object.

I have 2 lang (en and fr)

I just update to the latest v4.1.1, but same problem.

Here is my manifest.template.json.

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.14/MicrosoftTeams.schema.json",
  "manifestVersion": "1.14",
  "version": "1.3.4",
  "id": "{{state.fx-resource-appstudio.teamsAppId}}",
  "packageName": "com.microsoft.teams.extension",
  "localizationInfo": {
    "defaultLanguageTag": "fr",
    "additionalLanguages": [
      {
        "languageTag": "en",
        "file": "resources/en.json"
      },
      {
        "languageTag": "fr",
        "file": "resources/fr.json"
      }
    ]
  },
  ...
}

And each i18n file :

resources/fr.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.14/MicrosoftTeams.Localization.schema.json",
  "name.short": "FR",
  "name.full": "FR",
  "description.short": "FR",
  "description.full": "FR",
  "staticTabs[0].name": "FR"
}

resources/en.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.14/MicrosoftTeams.Localization.schema.json",
  "name.short": "EN",
  "name.full": "EN",
  "description.short": "EN",
  "description.full": "EN",
  "staticTabs[0].name": "EN"
}

Is there another fix for this bug?

jensker commented 1 year ago

@Steffi3rd: Hey! The workaround is still working for me (I just double-checked a few minutes ago).

Teams Toolkit v.4.0.5 In the manifest, I am using v1.12:

manifest.template.json: "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.12/MicrosoftTeams.schema.json", "manifestVersion": "1.12",

en.json: "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.12/MicrosoftTeams.Localization.schema.json",

In manifest.template.json, I also use name and description:

"name": {
    "short": "{{config.manifest.appName.short}}",
    "full": "{{config.manifest.appName.full}}"
},
"description": {
    "short": "BLA",
    "full": "BLA BLA"
},

Do you also have name and description in your manifest.template.json? The values will be overwritten, but still, they need to exist.

Did you double check that after start of debugging manifest.dev.json is generated correctly? You find these in your project under build\appPackage.

Hope that helps.

Best regards,

Jens

jensker commented 1 year ago

@Steffi3rd : One addition:

In resource json, I don't have a comma at the end! Maybe the parser is confused by the comma?

{ "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.14/MicrosoftTeams.Localization.schema.json", "name.short": "EN", "name.full": "EN", "description.short": "EN", "description.full": "EN", "staticTabs[0].name": "EN", <- I mean this comma }

Steffi3rd commented 1 year ago

@jensker Yes, i have all that.

I just check with : https://dev.teams.microsoft.com/appvalidation.html

And it seems that my localization en.json and fr.json is missing inside the zip appPackage.production.zip... Only icons are uploaded to the zip

jensker commented 1 year ago

@Steffi3rd : Maybe deleting everything in this folder helps?

This way, you force Teams Toolkit to actively rebuild manifest json for local, production etc.

jensker commented 1 year ago

@Steffi3rd : Also my template folder looks like this:

I did not do anything special. Files in resources folders are zipped automatically by Teams Toolkit.

Steffi3rd commented 1 year ago

Structure is same as you. but [localization].json is not zipped... only icons 🤔

Steffi3rd commented 1 year ago

We see a lot of differences in the Microsoft documentation from one page to another... (Example: Use v1.8 here, use v.1.12 there, 1.13 overthere etc) It's quite complicated to find your way around when you have a bug. Fortunately StackOverflow or people like @jensker are there to help us here.

About additionalLanguages, some indicates resources/en.json instead en.json Do you have to add the defaultLanguage in additionalLanguages? If not where TeamsTooltik found the file himself?

Anyway, thanks @jensker, it works now!!! 🎉

Below the complete solution (for me):

Downgrade to : Teams Toolkit v4.0.5

Use v1.12 in manifest.template.json

{
"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.12/MicrosoftTeams.schema.json",
"manifestVersion": "1.12",
...
}

Use v1.12 in en.json and fr.json

{
"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.12/MicrosoftTeams.Localization.schema.json",
...
}

Put localization files in folder appPackage/resources not directly in appPackage.

Finally add additionalLanguages with all languages in localizationInfo

{
...
"localizationInfo": {
"defaultLanguageTag": "fr",
"additionalLanguages": [
  {
    "languageTag": "fr",
    "file": "resources/fr.json"
  },
  {
    "languageTag": "en",
    "file": "resources/en.json"
  }
]
},
...
}

Hope that bug will fix in the last version of TeamToolkit 🤞

nliu-ms commented 1 year ago

Thank you so much @jensker and @Steffi3rd, I'm so glad that you finally made it!

Sorry for the inconvenience brought to you. With information you provided, that is a bug of Teams Toolkit. During some code migration, the logic of zipping localization file has been removed. So when you downgrade to previous version it works.

Sorry again! I will fix it ASAP.

nliu-ms commented 1 year ago

Hey @jensker , this issue has been fixed and deployed to PROD, there is no need to define at least 2 languages anymore. I will close this issue. Please let me know if you still meet the bug, thanks!

OfficeDev / TeamsFx

Local Debug with Visual Studio Code fails for Teams App with Localization in Manifest #5940