Support named imports

Currently, the Amazon Connect Streams package cannot be imported as a named module, i.e. these do not work:

import { connect } from 'amazon-connect-streams'

TypeError: Cannot read property ‘core’ of undefined

import { core } from 'amazon-connect-streams'

TypeError: Cannot read property ‘initCCP’ of undefined

import * as connect from 'amazon-connect-streams'

TypeError: Cannot read property ‘initCCP’ of undefined

import connect from 'amazon-connect-streams'

TypeError: Cannot read property ‘initCCP’ of undefined

Instead, the only option that we have is to import the package to the global namespace:

import 'amazon-connect-streams';

where it will define a global variable connect.

This inflexibility leads to a conflict (and possible confusion) with other packages that are named connect, for example the Redux connect. But more importantly, it prevents importing only certain parts of the Streams package in various parts of the web app - for example, importing only ContactEvents to use in tests.

I’d add the enhancement tag to this request, but it doesn’t seem as though I can

[ChenYangMei]

I tried to use const connect = require('amazon-connect-streams') inside a if (typeof window !== undefined) block, due to navigator is not defined for SSR in gatsby. However connect turned out to be an empty object.

[tomsabin]

@tomsabin That worked for you? I still get the same error navigator is not defined This doesn’t prevent the code from being read server side. Are you using Next.js?

Yes, we’re using Next.js and imported the component as follows from a page component:

import dynamic from 'next/dynamic';

const AmazonConnectChat = dynamic(() => import('../components/AmazonConnectChat'), {
  ssr: false,
});

...

(where the path ../components/AmazonConnectChat leads to the Example component above in my earlier example)