Build fails with v3.8.0+ - Module parse failed: Unexpected token

[everscending]

What happened and what did you expect to happen?

Build works fine with v3.7.0 but after upgrading to v3.8.0 or v3.9.0, I get the following error:

react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/@aws-sdk/util-endpoints/dist-es/lib/index.js 1:9
Module parse failed: Unexpected token (1:9)
File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.

export * as aws from "./aws";
| export * from "./booleanEquals";
| export * from "./getAttr";

Have you reviewed our existing documentation?

• GitHub issues
• FAQs page
• README page
• Feature-specific guides

Reproduction steps

npm i amazon-chime-sdk-js@3.8.0
npm run build

relevant packages in use:

webpack@4.42.0
babel-loader@8.1.0

Amazon Chime SDK for JavaScript version

3.8.0

What browsers are you seeing the problem on?

This is in CLI

Browser version

n/a

Meeting and Attendee ID Information.

n/a

Browser console logs

n/a

[LeviSklaroff]

I'm having some trouble replicating this issue, but this seems to be a bug that was recently reported to aws-sdk aws/aws-sdk-js-v3#4146 when you updated the sdk it might have pulled a new version of @aws-sdk/util-endpoints

• Could you provide your webpack config for debugging purposes?
• Could you try installing an older version of @aws-sdk/util-endpoints such as 3.200.0 to see if that fixes your issue?

[justinIs]

I am reproducing this issue using a Nuxt 2 project. Webpack is unable to load the aws-chime-sdk-js library due to its dependency of @aws-sdk having the issue.

This issue occurs for me in both 3.8.0 and 3.7.0, I have to pin to 3.6.0 to keep my build working.

[devalevenkatesh]

@justinIs sorry for the delay, but I think I have reproduced and root caused the issue. I will also provide a solution for you so that the build succeeds. Will require confirmation on your side whether this helps and mitigates your issue to unblock upgrading to latest v3 version for amazon-chime-sdk-js (JS SDK).

Issue reproduction

I created a sample app using Nuxt2 following your linked installation guide. These are the only changes I made to the app to test importing something from JS SDK and I reproduced the issue:

// Tutorial.vue
<!-- Please remove this file from your project -->
<template>
  <div>
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching response</p>
    <code v-else>
      {{ response }}
    </code>
    <button @click="$fetch">Create Meeting and Attendee</button>
  </div>
</template>

<script>
import { 
  DefaultMeetingSession, 
  LogLevel,
  ConsoleLogger,
  DefaultDeviceController,
  MeetingSessionConfiguration
} from 'amazon-chime-sdk-js';

export default {
    data() {
      return {
        response: {}
      }
    },
    async fetch() {
      this.response = await fetch(
        'http://127.0.0.1:8080/join?meetingName=hello&attendeeName=Vneky',{method: 'POST'}).then(res => res.json());
      const logger = new ConsoleLogger('MeetingLogs', LogLevel.INFO);
      const deviceController = new DefaultDeviceController(logger);
      const configuration = new MeetingSessionConfiguration(this.response.meeting.Meeting, this.response.attendee.Attendee);
      const meetingSession = new DefaultMeetingSession(configuration, logger, deviceController);
      meetingSession.audioVideo.start();
    },
  }
</script>

This is the nuxt.config.js before the fix:

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'test-app',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

Then I tried to just bundle the app using npm run build and I got below issue:

ERROR in ./node_modules/@aws-sdk/signature-v4/dist-es/getCanonicalHeaders.js 10:30
Module parse failed: Unexpected token (10:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         const canonicalHeaderName = headerName.toLowerCase();
|         if (canonicalHeaderName in ALWAYS_UNSIGNABLE_HEADERS ||
>             unsignableHeaders?.has(canonicalHeaderName) ||
|             PROXY_HEADER_PATTERN.test(canonicalHeaderName) ||
|             SEC_HEADER_PATTERN.test(canonicalHeaderName)) {
 @ ./node_modules/@aws-sdk/signature-v4/dist-es/index.js 2:0-60 2:0-60

Nuxt2 issue root cause analysis

The error mentioned above is basically due to optional chaining operator (?.) usage in underlying aws-sdk dependencies and Nuxt2 is unable to transpile this ?. operator when bundling the code. The aws-sdk dependencies are installed due to Amazon Chime SDK for JavaScript depending on the @aws-sdk/client-chime-sdk-messaging

That meant the underlying bundling is not able to convert or bundle the optional chaining operator usage. Based on this further checked that Nuxt2 framework is using Webpack 4 under the hood for bundling. Upon going through Webpack and Nuxt2 issues, found that Webpack4 depends on acorn which does not support optional chaining operator. It started supporting the ?. in v7+ for which Webpack5 has already added the support. Thus, Webpack4 still cannot transpile ?.. [GitHub issues for source: #1, #2]

To mitigate, tried adding transpile option in nuxt.config.js and included aws-sdk dependency. This transpiles the non-supported operator using babel. Thus, added a override in nuxt.config.js build option like below:

// In nuxt.config.js file
// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ["aws-sdk"]
  }

And this got the npm run build to succeed. I am able to create meeting and an attendee, create the JS SDK DefaultMeetingSession successfully.

Next steps:

Could you please confirm whether above provided solution helps your case? Not sure whether you got the same error, but I am able to successfully build the JS SDK into a Nuxt2 app as expected now.

[justinIs]

@devalevenkatesh yes adding the aws-sdk to the transpile config has resolved the issue for me. Thank you for your thorough investigation and explanation, very appreciated.

[devalevenkatesh]

Glad it worked, resolving this issue now. Request you to open a new issue if you face any issue or have other questions.

[everscending]

Upgrading from Webpack v4 to v5 solved the issue for me.

[dragos-boisteanu]

webpack: 4.46.0
nuxt: 2.17.1
amazon-chime-sdk-js: 3.15.0
pnpm: 8.6.1
node: 20.3.0
transpile: ["vuetify/lib", "aws-sdk"] added under build property of nuxt.config.js

I am getting this error:

in ./node_modules/@smithy/signature-v4/dist-es/getCanonicalHeaders.js 10:30
Module parse failed: Unexpected token (10:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         const canonicalHeaderName = headerName.toLowerCase();
|         if (canonicalHeaderName in ALWAYS_UNSIGNABLE_HEADERS ||
>             unsignableHeaders?.has(canonicalHeaderName) ||
|             PROXY_HEADER_PATTERN.test(canonicalHeaderName) ||
|             SEC_HEADER_PATTERN.test(canonicalHeaderName)) {

[justinIs]

The issue has returned for me as well, same info as @dragos-boisteanu

[AndrewFeeney]

I was able to resolve this with the following nuxt build config:

(Note the addition of the @ prefix, and the @smithy package namespace which seems to be where AWS have been keeping some of their core shared js dependencies.

// In nuxt.config.js file
// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [
      "@aws-sdk",
      "@smithy",
    ]
  }