Next.js Discord

Discord Forum

Cypress with Typescript

Unanswered
ttalgi posted this in #help-forum
Open in Discord
Hi, can anyone help?

As the title suggests, I got an issue when running an end-to-end test for my NextJS 13 app (using the app directory):

Error: Webpack Compilation Error
Module parse failed: Unexpected token (10:12)
File was processed with these loaders:
 * ../../../../../AppData/Local/Cypress/Cache/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| exports.categories = ["household supplies", "accessories"];
| function CategoriesPage() {
>     return (<div>
|       <h1>Categories</h1>
|       <ul>


I haven't really found any solution online for the past few hours and counting...

Here's my cypress/tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}


cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: "http://localhost:3000",
  },
});


I'd like to emphasize that the error only occurs when running Cypress; otherwise, my app works normally in development mode.

1 Reply

Resolved it after some experimenting. Turns out i cannot import variables from the app dir tsx files.