[Bug]: Cannot import @microsoft/teams.client into webpack 5 javascript react project: Module has no exports.

[Jesperholmbergmsft]

This PR addresses bug 542. by adding an onSuccess handler to the tsup.config.js to rewrite .mjs import paths to be compliant with the ESM specification.

Webpack 5 strictly requires that ESM code follows specification and includes a file extension on import paths. Other bundlers - Webpack 4, RSPack, Vite/Rollup - are more forgiving, but benefit from code following specification.

Tsup that we're using in these libraries doesn't automatically produce compliant import statements, but we can take care of that with an onSuccess handler to call a script and update the import paths. This was already done for the graph-endpoints package that doesn't use tsup at all, and makes sense to do for the tsupped code also.

Before the change in this PR, a React app using these libraries and relying on Webpack 5 would fail during build with e.g.:

building with released bits, webpack 5:
WARNING in ./src/Tab/App.tsx 35:28-41
export 'ConsoleLogger' (imported as 'ConsoleLogger') was not found in '@microsoft/teams.common' (module has no exports)
 @ ./src/Tab/client.tsx 4:0-24 5:85-88

ERROR in ./node_modules/@microsoft/teams.client/dist/index.mjs 1:0-28
Module not found: Error: Can't resolve './app' in 'C:\git\TeamsApps\webpack5app\node_modules\@microsoft\teams.client\dist'
Did you mean 'app.js'?
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.
 @ ./src/Tab/App.tsx 4:0-64 34:35-49
 @ ./src/Tab/client.tsx 4:0-24 5:85-88

Before the change, after building these libraries, import paths in .e.g packages/common/dist/index.mjs would look like:

export * from './events';
export * from './http';
export * from './logging';
export * from './storage';

After, they're correctly

export * from './events/index.mjs';
export * from './http/index.mjs';
export * from './logging/index.mjs';
export * from './storage/index.mjs';

Similarly, before the change, packages/common/dist/http/client.mjs contained:

import { ConsoleLogger } from '../logging';

And now it's correctly:

import { ConsoleLogger } from '../logging/index.mjs';

How tested:

• Built from the project root as well as within an individual package and verified that the import paths are correctly rewritten in the dist folder.
• Built on both Mac and WIndows and looked at the dist folder.
• Set up a simple Teamss tab app using these libraries to use teams-js context / msal / graph.
• Before the change: verified that I can build the app with vite/rollup, rspack, and webpack 4; but webpack 5 fails as above
• After the change, verified that I can build using all four and that the app still runs
• After the change, also verified that the app tree-shakes properly on all four. Vite gives best results; webpack 4 the worst, but they all do their level best

[Copilot]

Pull request overview

This PR fixes Webpack 5 “fully specified ESM” build failures for the published packages by rewriting extension-less relative imports/exports in generated .mjs files to include .mjs (or /index.mjs) after tsup finishes.

Changes:

• Add a tsup onSuccess hook to post-process dist/**/*.mjs output.
• Introduce a Node script that walks dist and rewrites relative ESM specifiers to be fully specified.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/config/tsup.config.js	Runs a post-build step to rewrite .mjs import/export specifiers under dist.
packages/config/rewrite-esm-imports.js	Implements filesystem-based rewriting of relative ESM specifiers to include .mjs/index.mjs.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[corinagum]

I pulled and ran to test out; confirm that these changes the same bug on main builds cleanly here. .mjs files went down to 0 extensionless relative imports. This was on mac.

LGTM! Thanks so much @Jesperholmbergmsft!