NextJS 14.2.4: SyntaxError: Unexpected token '<'

[PabloGracia]

Current behavior

I'm following the step by step guide on how to use Cypress and NextJS from Vercel's documentation. As recommended, I run Cypress against production code, so I run bun run build && bun run start before running bun run cypress:open. These scrips are defined in package.json as:

"scripts": {
    "build": "next build",
    "start": "next start",
    "cypress:open": "cypress open"
  },

The issue is that when I run the Cypress test, they fail with the error in the title, and I'm at loss at why that might be. In some similar threads I've seen that this could be due to the fact I'm running Cypress tests against .tsx code, but as I'm running them against production code, this shouldn't be the case.

Checking the browser console I see the following, but it doesn't help me much to understand why this "plug-and-play" test is failing:

Has anybody run on this in the past and/or know how to troubleshoot it?

Desired behavior

Ideally, this test should work right out of the box, as I'm not testing anything complex, but rather a very simple example.

Test code to reproduce

I'm running the same code as provided in the NextJS example I linked above:

// app/page.tsx

import Link from "next/link";

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  );
}

// app/about/page.tsx
import Link from "next/link";

export default function Page() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  );
}

// cypress/e2e/app.cy.js
describe("Navigation", () => {
  it("should navigate to the about page", () => {
    // Start from the index page
    cy.visit("http://localhost:3000/");

    // Find a link with an href attribute containing "about" and click it
    cy.get('a[href="about"]').click();

    // The new url should include "/about"
    cy.url().should("include", "/about");

    // The new page should contain an h1 with "About"
    cy.get("h1").contains("About");
  });
});

Cypress Version

13.11.0

Node version

20.10.0

Operating System

macOS 14.1.1

Debug Logs

No response

Other

No response

[MikeMcC399]

@PabloGracia

I checked with https://nextjs.org/docs/app/building-your-application/testing/cypress#quickstart and I didn't see any problem running the simple Cypress test spec. I am however not running under macOS.

I noticed that you are using Bun. I don't think this is the cause of your issue, however Cypress doesn't support Bun as package manager. Like for Vercel: npm, Yarn and pnpm are the package managers listed by Cypress in its documentation.

Bun as a replacement for Node.js does not work. Cypress specifies Node.js as prerequisite.

If you believe that you have found a bug in Cypress when it is running in a supported configuration, then, if you can provide a full reproducible example, for instance by forking https://github.com/cypress-io/cypress-test-tiny, somebody can take a look.

You might also like to join the Cypress technical community on Discord

(click on button)