Error: Webpack Compilation Error ./node_modules/@aws-sdk/client-dynamodb/node_modules/@aws-sdk/signature-v4/dist-es/getCanonicalHeaders.js 10:30 Module parse failed: Unexpected token (10:30)

[rajsudhirn23]

Hi, I'm trying to write unit tests for the handlers, getting the below error while running the test. Any support please?

Error: Webpack Compilation Error
./node_modules/@aws-sdk/client-dynamodb/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/client-dynamodb/node_modules/@aws-sdk/signature-v4/dist-es/index.js 2:0-60 2:0-60
@ ./node_modules/@aws-sdk/client-dynamodb/node_modules/@aws-sdk/middleware-signing/dist-es/configurations.js
@ ./node_modules/@aws-sdk/client-dynamodb/node_modules/@aws-sdk/middleware-signing/dist-es/index.js
@ ./node_modules/@aws-sdk/client-dynamodb/dist-es/DynamoDBClient.js
@ ./node_modules/@aws-sdk/client-dynamodb/dist-es/index.js
@ ./src/handlers/eoi/post_eoi.ts
@ ./src/index.ts
@ ./cypress/e2e/unit-tests/handlers/post_eoi.cy.ts

Test file: post_eoi.cy.ts

import { post_eoi } from '../../../../src'

describe('Unit: post_eoi', function () {
before(() => {
expect(post_eoi).to.be.a('function')
})
})

[lmiller1990]

Do you have webpack installed or are you using the default one we ship with Cypress? I think we are still shipping webpack 4, which doesn't know about the ?. operator.

If you install a more recent version of webpack, it should handle that. It also might depend on your tsconfig.json - similar issue reported here: #16914. If you are using tsconfig.json, can you share that?

If you can provide a minimal reproduction, I could help fix it up, too.

[sikander804]

facing the same issue when importing const s3Client = require('@aws-sdk/client-s3'); in cypress/support/commands.js . does anyone know how to fix this ?

[lmiller1990]

What version of webpack are you using?

I think we don't support ?. out of the box - we should update our internal webpack config. You need to tweak your webpack and/or cypress/webpack-preprocessor setup to consume code using ?..

[sikander804]

@lmiller1990 im using next js v12 which by default uses webpack v5.

okay sure got it , kindly can i get a cypress/webpack-preprocessor setup ?

i made a plugin folder inside cypress , cypress/plugin/index.js and here are the configuration.

const path = require('path');
const webpackPreprocessor = require('@cypress/webpack-preprocessor');

module.exports = (on, config) => {
  const options = webpackPreprocessor.defaultOptions;

  Object.assign(options.webpackOptions, {
    resolve: {
      modules: ['node_modules', path.resolve(__dirname, '../../')],
    },
  });

  on('file:preprocessor', webpackPreprocessor(options));
};

[glamanna-motional]

Hi I am seeing this same issue.
`Error: Webpack Compilation Error
./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)) {`

[glamanna-motional]

"webpack": "^5.75.0"

[sikander804]

@glamanna-motional please install @cypress/webpack-preprocessor with its packages, see here .

[lmiller1990]

@glamanna-motional @sikander804 I reproduced this by making a new project and doing

require('@aws-sdk/client-s3')

in my cypress/e2e/support.js.

It didn't work.

I then followed the instruction here https://www.npmjs.com/package/@cypress/webpack-preprocessor. I installed the dependencies it told me to. yarn add @babel/core @babel/preset-env babel-loader webpack @cypress/webpack-preprocessor.

{
  "name": "aws-cypress",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@aws-sdk/client-s3": "^3.226.0",
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@cypress/webpack-preprocessor": "^5.15.6",
    "babel-loader": "^9.1.0",
    "cypress": "^12.0.2"
  },
  "dependencies": {
    "webpack": "^5.75.0"
  }
}

I added the preprocessor in cypress.config.js

const { defineConfig } = require("cypress");
const preprocessor = require("@cypress/webpack-preprocessor");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on(
        "file:preprocessor",
        preprocessor()
      );
      // implement node event listeners here
    },
  },
});

Now it's working. Please try that. Here's my repo: https://github.com/lmiller1990/cypress-preprocessor-example

[sikander804]

@lmiller1990 thanks , nice to see that.