[BUG] ReactNativeManualDevicePlugin - Cannot find module @microsoft/applicationinsights-react-native/dist-esm/manualIndex

[yoannHertienne]

Description/Screenshot

Following your documentation, I'm using Expo, so I import ReactNativeManualDevicePlugin using
import { ReactNativeManualDevicePlugin } from "@microsoft/applicationinsights-react-native/dist-esm/manualIndex"

but then I'm getting the following Typescript error

Steps to Reproduce

• OS/Browser: MacOS
• React-Native Version: 0.73.6
• SDK Version [e.g. 22]:
  "@microsoft/applicationinsights-react-native": "^4.1.1",
  "@microsoft/applicationinsights-web": "^3.2.0",
• How you initialized the SDK:
  `import { ApplicationInsights, IApplicationInsights } from "@microsoft/applicationinsights-web"
  import { ReactNativeManualDevicePlugin } from "@microsoft/applicationinsights-react-native/dist-esm/manualIndex"
  import { myDeviceInfoModule } from "../../config/appInsight-device.ts"

// MS ApplicationInsights
const RNMPlugin = new ReactNativeManualDevicePlugin()
RNMPlugin.setDeviceInfoModule(myDeviceInfoModule)
const appInsight = new ApplicationInsights({
config: {
connectionString: Config.APPINSIGHT_CONNECTION_STRING,
extensions: [RNMPlugin],
},
})
appInsight.loadAppInsights()`

Expected behavior

Typescript should detect the module. I have the same issue with my Unit Test using Jest

Additional context
Add any other context about the problem here.

[MSNev]

I have seen this at times, and documented as is a hack because not all build environment support the new entry points.

I suspect that if you throw a ".js" onto the end of the import that it (should) work as the file exists but the version of TypeScript you are using (or the mode its running in) doesn't like / infer the import type.

[yoannHertienne]

@MSNev Adding ".js" didn't fix the issue.

When I'm trying to use ReactNativePlugin, for a non-expo app, I'm getting quite similar issue:

Are you sure of your package.json or typing ?

[Karlie-777]

maybe try:

1. add a new declaration file example.d.ts with declare module 'reactNativePlugin';
   add your example.d.ts to tsconfig.json

  {
    "compilerOptions": {
...
      },
      "include": [
        ...
        "example.d.ts"
      ],
   
    }

2. maybe try set allowJs: true in your tsconfig.json

[luanlcampos]

I am getting the same issue as @yoannHertienne described. Any news on that?

[yoannHertienne]

@Karlie-777 I tried your solution, but I was not able to fix it, still typescript error to import your module.

[Karlie-777]

@siyuniu-ms it seems that all manual device interfaces

applicationinsights-react-native/applicationinsights-react-native/src/manualIndex.ts

Line 9 in aa2b586

export { ReactNativeManualDevicePlugin, INativeDevice, IReactNativePluginConfig, IDeviceInfoModule };

are not exported from index.ts https://github.com/microsoft/applicationinsights-react-native/blob/main/applicationinsights-react-native/src/index.ts

[siyuniu-ms]

Hi, @yoannHertienne @luanlcampos Could you check whether the provided sample app https://github.com/microsoft/applicationinsights-react-native/tree/main/sample works for you?
I changed the app locally to match the version as yours
"@microsoft/applicationinsights-react-native": "^4.1.1", "@microsoft/applicationinsights-web": "^3.2.0",
and also added
var RNPlugin = new ReactNativeManualDevicePlugin(); RNPlugin.setDeviceInfoModule(myDeviceInfoModule);
It works good on my windows machine.

[siyuniu-ms]

Could you also check the typescript version in the node_modules folder? Based on the conversation in https://stackoverflow.com/questions/70296652/how-can-i-use-exports-in-package-json-for-nested-submodules-and-typescript, typescript that has version lower than 4.7 didn't support export (which may cause the issue of not finding the right type files.)

[yoannHertienne]

Could you also check the typescript version in the node_modules folder? Based on the conversation in https://stackoverflow.com/questions/70296652/how-can-i-use-exports-in-package-json-for-nested-submodules-and-typescript, typescript that has version lower than 4.7 didn't support export (which may cause the issue of not finding the right type files.)

I'm using "typescript": "5.4.5".

[yoannHertienne]

Hi, @yoannHertienne @luanlcampos Could you check whether the provided sample app https://github.com/microsoft/applicationinsights-react-native/tree/main/sample works for you? I changed the app locally to match the version as yours "@microsoft/applicationinsights-react-native": "^4.1.1", "@microsoft/applicationinsights-web": "^3.2.0", and also added var RNPlugin = new ReactNativeManualDevicePlugin(); RNPlugin.setDeviceInfoModule(myDeviceInfoModule); It works good on my windows machine.

I tried your sample, and after installing Eslint and typescript, import is not giving any error.

I will create new project from scratch and import your library.

[yoannHertienne]

@Karlie-777 @siyuniu-ms I tested the sample project again and with typescript, it's not working and give me the same error.
Step to reproduce

1. Clone the sample project
2. Install typescript for React Native following guide https://reactnative.dev/docs/typescript
   a.npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript
   b. Create tsconfig.json file at the root of the project and add the following inside it:
   { "extends": "@tsconfig/react-native/tsconfig.json" }

Then I'm getting

So it's working with Javascript, but not with Typescript

[augusthjerrild]

Hi!

Is there any news about this? :-)

I get the same issue in my Expo app. It seems like the type definition (manualIndex.d.ts) is not working when importing since it's implicitly has an 'any' type.

I'm importing with import {ReactNativeManualDevicePlugin} from '@microsoft/applicationinsights-react-native/dist-esm/manualIndex';

[SomniumDigital]

We've experienced this exact same problem when running our tests using Jest 29 simply importing the below:

import { ReactNativePlugin } from '@microsoft/applicationinsights-react-native';

const RNPlugin = new ReactNativePlugin();

After lots of trial and error I found that the last working version was the combination below:

"@microsoft/applicationinsights-react-native": "4.2.0",
"@microsoft/applicationinsights-web": "3.2.0",

Clearly something was introduced after this (4.2.0?) that has likely caused the issues we've been experiencing.

Update:
I believe it's the changes in this PR which have caused the issue.