Unexpected Token Error in Webpack Compilation: Module Parsing Failed

Question

I am running some tests in Cypress where, in one of the steps, I have to go through the sign-up process, and then it asks me to scan a QR code. For that, I execute the following lines of code to scan the QR code and generate the OTP.

This is what I am trying:

import OTPAuth from 'otpauth';
const qrcode =new Decoder();

cy.get('img[alt="QR Code"]').then(image => {
        const src = image.prop('src');
        const decoded = qrcode.scan(src);
        const totp = OTPAuth.URI.parse(decoded.data);
        const generateOTP = totp.generate();
        cy.get('input#code').type(generateOTP);
      })

I am getting this error:

Error: Webpack Compilation Error
./node_modules/otpauth/dist/otpauth.esm.js 970:28
Module parse failed: Unexpected token (970:28)

Module parse failed: Unexpected token (970:28)
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 randomBytes = size => {
|   {
>     if (!globalScope.crypto?.getRandomValues) {
|       throw new Error("Cryptography API not available");
|     }
 @ ./cypress/e2e/tests/invitation-portal-invitation.cy.js 18:38-56
    at handle (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at finalCallback (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:257:39)
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:306:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:304:22
    at Compiler.emitRecords (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:298:10
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at /Users/pedro/Library/Caches/Cypress/12.13.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:198:23)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Answer 1

You made mistake with url or it's wrong image.

Here some sample QRCode for OTP kcramer/OTPTestCodes.md.

This test works from first example.

import { Decoder } from '@nuintun/qrcode'
const qrcode = new Decoder()

it('test otp qr code', () => {

  const url =
    'https://gist.githubusercontent.com/kcramer/c6148fb906e116d84e4bde7b2ab56992/raw/f8e9708ba72625c1fe404f5eb1388d6ed6d443d6/TOTP-AcmeCo-jdoe@example.com.png'

  const expectedDecode = 'otpauth://totp/ACME%20Co:jdoe@example.com?secret=AUSJD7LZ5H27TAC7NW2IJMATDMVDUPUG&issuer=ACME%20Co&algorithm=SHA1&digits=6&period=30'

  qrcode
    .scan(url)
    .then(result => {
      expect(result.data).to.eq(expectedDecode)  // passing
    })
    .catch(error => {
      console.error(error)
    })
})