TypeScript Library Import Not Working

[Boggs_Daniel]

I’m attempting to utilize the JavaScript SDK, namely version 114 of the NPM package purecloud-platform-client-v2, in the context of a Create-React-App TypeScript application.

I’m importing like so…
import platformClient from "purecloud-platform-client-v2";

then getting the client like so…
const client = platformClient.ApiClient.instance;

which compiles OK, but throws an error at runtime…
Cannot read property 'instance' of undefined

I’m wondering if it has something to do with the library’s typings (index.d.ts) which causes CRA to generate incorrect javascript.

I notice at the top of the typings file…
import platformClient = require('purecloud-platform-client-v2');
import Configuration from './src/purecloud-platform-client-v2/configuration';

that platformClient is imported but not exported. ApiClient is exported but it’s a class and not an object instance.

I’ve tried some other ways of importing, to no avail.

My typescript compiler options are like so:
"compilerOptions": {
"outDir": "./dist",
"target": "ES2020",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"skipLibCheck": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"noImplicitAny": true, //  changed to false to work around issue (see below)
"removeComments": true,
"declaration": true,
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true,
"emitBOM": false
}

And I'm using typescript 4.3.2.

PS: Some other issues (minor):
• Configuration is imported in the typings but itself has no typings, which fails if noImplicitAny=true
• PureCloudRegionHosts isn’t included in the typings

[anon11147534]

Hi,

To use the JavaScript SDK in a React application you need to configure webpack to consume the es6 sources, not the pre-transpiled CJS library. See the React example in this project.

I'll create a ticket so we can look into fixing the typings issues.

[Boggs_Daniel]

Thanks!

Is there any way to simply do an ES6 import of the library (w/ typescript) without having to eject/rewire/fork CreateReactApp? Seems like a very basic function of a modern library. We're not planning on ejecting/rewiring/forking, as it really shouldn't be necessary and will add unnecessary technical debt to our already complex software. As this would be a very helpful basic feature, would you guys be able to put in a ticket with regard to that as well (if there's not some way to do it that I'm not aware of)? Thanks much!

Daniel

[tim.smith]

Ultimately, webpack needs to know where to find the ES6 entry point. I'm not an expert on webpack, but if you can figure out a way to configure webpack without ejecting the react app, that's all it should need. Here's two workarounds in lieu of that:

Fork https://github.com/MyPureCloud/platform-client-sdk-javascript to your own account and modify the package.json file's default entry point to point to the es6 code (and/or whatever you need to do to get it working with your react app). Then you can install the package into the project directly from your fork without publishing it. You can pull from the mypurecloud repo to get updates to the SDK as they're published.

Like the above but with less infrastructure, simply copy/paste the code from the repo directly into your react project so the code is webpacked as your project's code, not as a dependency. Update the local code as needed when the SDK is updated.

FWIW, we're currently in the process of revisiting the SDKs, the JS one in particular. The next iteration will be written and tested with react and angular as the primary use cases and backported to CJS and other module types, which is the opposite of how it's being done today.