fix(build): Enable esModuleInterop for improved compatibility

[Ankcorn]

Which problem is this PR solving?

I ran into issues instrumenting code with the import-in-the-middle package whilst using the bundler esbuild (to bundle my telemetry code - not modules I wanted to trace). I noticed that the import looked like

import * as ImportInTheMiddle from 'import-in-the-middle'

As flagged in issue #3954 this relies on some incorrect assumptions typescript makes about module bundling.

A detailed description of these wrong assumptions can be found here: https://www.typescriptlang.org/tsconfig#esModuleInterop.

The tldr is import * as moment from "moment" is not the same as const moment = require("moment")

Turning on esModuleInterop fixes these problems but required a few updates across the codebase that I believe will not change the behavior of the packages
Fixes #3954

Short description of the changes

Turned on esModuleInterop in the base tsconfig.

Fixed the imports so that where the default import is desired we import Mod from 'mod' and when the module doesn't have a default import we stick with import * as Mod from 'mod'

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

I have ran the tests and tscompiler to check that things still work. I still would like to import this into an existing project using opentelemetry and check there are no issues. I'm not familiar with doing this on a project so large - guidance welcome here 😄

Checklist:

• Followed the style guidelines of this project
• Unit tests have been added
• Documentation has been updated

[Ankcorn]

@pichlermarc @dyladan Would you be able to take a look at this 😁 Sorry to nag! Been speaking to lots of people who have been burnt by this issue of the last few weeks

[dyladan]

This has come up in the past a couple times. If I remember correctly, if we enable esModuleInterop it also requires our downstream consumers to enable it, which we do not consider acceptable. You can actually see other projects have disabled esModuleInterop for exactly this reason https://github.com/react-native-modal/react-native-modal/pull/371/files

Looking at this linked issue, i think this is actually a better solution:

I solved the problem for my local environment by editing the import deep in down in node_modules. I found import * as ImportInTheMiddle from 'import-in-the-middle'; and changed it to import ImportInTheMiddle from 'import-in-the-middle';.

[Ankcorn]

Thanks that totally makes sense, I was not aware it would break downstream packages because opentelemetry-js ships the bundled code.

Your solution avoids this, thanks for figuring this out ❤️

[github-actions]

This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions]

This PR was closed because it has been stale for 14 days with no activity.