Bug Description

I try to import @microsoft/teams.client into webpack 5 javascript react-scripts project. Webpack 5 fails to compile in strict mode (the default in webpack 5) because @microsoft/teams.client does not export the App class in a way webpack 5 expects it.

Steps to Reproduce

package.json:

    "dependencies": {
        "@microsoft/teams-js": "^2.22.0",
        "@microsoft/teams.client": "2.0.8",
        "@microsoft/teams.graph-endpoints": "2.0.8",
   }
    "devDependencies": {
        "react-scripts": "5.0.1"
     },

Then run:
react-scripts start

Webpack complains:

Failed to compile.

Attempted import error: 'App' is not exported from '@microsoft/teams.client' (imported as 'teamsClient').
ERROR in ./src/App.jsx 136:22-37
export 'App' (imported as 'teamsClient') was not found in '@microsoft/teams.client' (module has no exports)

ERROR in ./node_modules/@microsoft/teams.client/dist/index.mjs 1:0-28
Module not found: Error: Can't resolve './app' in 'C:\Users\Oliver\Downloads\ms-identity-javascript-react-spa-main\node_modules\@microsoft\teams.client\dist'
Did you mean 'app.mjs'?
BREAKING CHANGE: The request './app' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

webpack compiled with 2 errors

Expected Behavior

I expected import {App} from '@microsoft/teams.client'; to import App class from teams.client, but Webpack 5 stumples over the import.

Actual Behavior

Right now Webpack 5 javascript project cannot import '@microsoft/teams.client' as the npm available package does not provide *.mjs-files which are compatible with webpack 5 strict mode.

SDK Version

2.0.8

Node.js Version

22.16.0

Additional Context

I am not Webpack and JS compiler expert. Please be kind.

Webpack 5 parses javascript modules in strict mode so the file extension (like *.mjs) HAS TO match EXACTLY.
@microsoft/teams.client ./dist/index.mjs line 1: export { App } from './app'; fails. Imo it should be export { App } from './app.mjs';

I tried a workaround in the webpack.config.js so that webpack 5 is more forgiving:

module.exports = {
  // ... other config
  module: {
    rules: [
      // ... other rules
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false, // Disables the requirement for extensions
        },
      },
    ],
  },
};

Now webpack compiles but webpack cannot resolve the import at runtime. Interestingly when I look into browser variables & memory I do find teamsClient.App class (containing the expected function names) when I import * as teamsClient from '@microsoft/teams.client'. It seems in principle it should work.

My guess is webpack 5 workaround mixes up the files (app.js, app.mjs) of the imports thus failing during runtime. When the files in dist-folder are generated the js / mjs file extensions should be named explcitly in the import statements so that webpack uses the right one.