Unable to use Chime JS SDK as common JS module

[chandruchiku]

What are you trying to do?

Trying to use Chime JS SDK in a Lit Element Project with Rollup and CommonJS plugin.

I'm getting error The requested module './../../../node_modules/amazon-chime-sdk-js/build/index.js' does not provide an export named 'TargetDisplaySize'

How can the documentation be improved to help your use case?

Provide documentation on how to use SDK in a ES6 environment apart from webpack

What documentation have you looked at so far?

Searched all the Chime JS SDK Documentation

[simmkyu]

I did not have an issue importing the Chime SDK for JavaScript in the Rollup and CommonJS plugin environment. For testing, I did the following steps:

1. Check out the rollup-starter-lib repository that uses the Rollup CommonJS plugin to convert the CommonJS modules to ES6 modules.
2. Install the Chime SDK for JavaScript.

   npm i -S amazon-chime-sdk-js
   

3. In the entry file (e.g., src/main.js in this starter repo), import a few components for quick sanity testing.

   import { ConsoleLogger, LogLevel, TargetDisplaySize } from 'amazon-chime-sdk-js';
   const logger = new ConsoleLogger('TestLogger', LogLevel.INFO);
   logger.info(`Print TargetDisplaySize: ${TargetDisplaySize.High}`);
   

4. Run npm run build to generate a UMD build and embed it in index.html. Ensure that this UMD file outputs a log message to the browser console.

---

Could you compare your Rollup config with the rollup-starter-lib repository's config? https://github.com/rollup/rollup-starter-lib/blob/master/rollup.config.js

[chandruchiku]

@simmkyu I have an web component project with Lit Element and Web Dev Server. I tried the rollup configuration on the web-dev-server configuration but it does not seem to work.

  plugins: [
    commonjs({
      include: ['node_modules/amazon-chime-sdk-js/**'],
    })
  ],

In the file OpenWcAppProj.ts I included the logger to simulate what we are trying.

Link to My Code: Github Lit WebComponent

Web Dev Server common JS plugin documentation :

[simmkyu]

It seems that you modified the Web Dev Server's configuration. Could you try the following steps?

1. Delete the plugins field from the web-dev-server.config.mjs.

    // Delete this field.
    plugins: [
      /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
      // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
      commonjs({
        include: ['node_modules/amazon-chime-sdk-js/**'],
        transformMixedEsModules: true,
        // esmExternals: true,
        // dynamicRequireTargets: ['node_modules/amazon-chime-sdk-js/**'],
      })
    ],
   

2. Use the Rollup CommonJS plugin in the rollup.config.js.

   import rollupCommonjs from '@rollup/plugin-commonjs';
   

    plugins: [
      ...
      babel(...),
      generateSW(...),
      rollupCommonjs({
        include: ['node_modules/amazon-chime-sdk-js/**'],
      }),
    ]
   

3. Ensure that the following commands work okay.

   npm run build
   npm run start
   npm run start:build
   

All three commands succeeded in my local environment (npm 7.20.3, node 16.6.1). The local web app also outputs the sample message via the Chime SDK ConsoleLogger.

https://user-images.githubusercontent.com/36240708/145905058-388f1a3e-fae1-4364-8e44-b1ba2b90f41f.mov

[chandruchiku]

@simmkyu Thank you. But here is the actual issue, when you do a 'npm run start:build' it works fine as it serves the built files. If we do a 'npm run start', it wont run and throws the error.

The requested module './../../node_modules/amazon-chime-sdk-js/build/logger/ConsoleLogger.js' does not provide an export named 'default'

You may need to do a hard refresh to see this as browser caches the earlier prod build files.