Unexpected token import.meta.env when running Cypress with Vite

[kcubero27]

Hello 👋🏼
I'm trying to set up Cypress on a Vite project (together). However, I am not able to run Cypress e2e tests with the app: either using the output of the build neither the dev mode. The error is the following one:

Error: Webpack Compilation Error
./src/api/routes.ts 5:63
Module parse failed: Unexpected token (5:63)
File was processed with these loaders:
 * ../../Library/Caches/Cypress/12.6.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| exports.API_ROUTES = void 0;
| exports.API_ROUTES = {
>     API_ROUTE_GET_PEOPLE: function () { return "".concat(import.meta.env.VITE_STAR_WARS_API_URL, "/people"); },
| };
| 
 @ ./cypress/e2e/people.cy.ts 5:15-46

Does anyone know how to fix this? I would really appreciate it.

In order to reproduce it, you can go to https://github.com/kcubero27/react-code-challenge-template/tree/feat/configure-e2e-tests-%2316 and run npm run dev as well as npm run test:e2e:open. As soon as you try to run the people.cy.ts test, you'll start seeing the error.