cerbos import causing module parse error in cypress test

Question

Currently running tests in cypress and am trying to mock a function that wraps cerbos calls. Getting the following error, and not really sure how to fix it. Anyone know how to modify the loader to handle this?

Error: Webpack Compilation Error
./node_modules/@cerbos/http/lib/index.js 177:56
Module parse failed: Unexpected token (177:56)
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 headers = ({ headers: optionalHeaders, playgroundInstance }, adminCredentials) => {
|     const headers = new Headers(typeof optionalHeaders === "function" ? optionalHeaders() : optionalHeaders);
>     headers.set("User-Agent", headers.get("User-Agent")?.concat(" ", defaultUserAgent) ?? defaultUserAgent);
|     if (adminCredentials) {
|         headers.set("Authorization", `Basic ${(0, abab_1.btoa)(`${adminCredentials.username}:${adminCredentials.password}`) ?? ""}`);
 @ ./src/shared/cerbos/cerbos.tsx 1:0-36 16:23-27
 @ ./cypress/e2e/reviewPage.cy.ts
    at Watching.handle [as handler] (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at /Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:99:9
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Watching._done (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Watching.js:54:20
    at /Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at writeOut (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:452:16)
    at /Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:476:7
    at arrayIterator (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3467:9)
    at timesSync (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3463:5)
    at emitFiles (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:358:13)
    at /Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/node_modules/mkdirp/index.js:49:26
    at callback (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/polyfills.js:299:20)
    at callback (/Users/thomasheill/Library/Caches/Cypress/12.16.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/graceful-fs/polyfills.js:299:20)
    at FSReqCallback.oncomplete (node:fs:200:5)

Answer 1

So we are using vite as our build tool, and to fix this i hade to update the preprocessor in cypress.

had to install vite-plugin-ngmi-polyfill and then update the cypress.config.ts file like so

import { defineConfig } from 'cypress'
import vitePreprocessor from 'cypress-vite'

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor())
    },
  },
})