Webpack编译出现意外Token错误：模块解析失败

Question

我正在 Cypress 中运行一些测试，其中一个步骤是我必须完成注册过程，然后它要求我扫描二维码。为此，我执行以下代码行来扫描 QR 码并生成 OTP。

这就是我正在尝试的：

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);
      })

我收到此错误：

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

您的网址有误或图片错误。

这里有一些 OTP 的 QRCode 示例 kcramer/OTPTTestCodes.md.

此测试从第一个示例开始进行。

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

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

  const url =
    'https://gist.githubusercontent.com/kcramer/c6148fb906e116d84e4bde7b2ab56992/raw/f8e9708ba72625c1fe404f5eb1388d6ed6d443d6/[email protected]'

  const expectedDecode = 'otpauth://totp/ACME%20Co:[email protected]?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)
    })
})