Having difficulty executing the Cypress open command within a Next.js project that uses Typescript

I'm having trouble running cypress open in my Next.js project with Typescript. When I run the command, I encounter the following issues:

% npm run cypress:open         

> [email protected] cypress:open
> cypress open


DevTools listening on ws://127.0.0.1:50474/devtools/browser/067ddcd9-221c-4042-8544-08d3598b88d7
Missing baseUrl in compilerOptions. tsconfig-paths will be skipped
/Users/mohitnayak/Library/Caches/Cypress/12.17.3/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:311
        return new TSError(diagnosticText, diagnosticCodes, diagnostics);
               ^
TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

    at createTSError (/Users/mohitnayak/Library/Caches/Cypress/12.17.3/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:311:16)
    at reportTSError (/Users/mohitnayak/Library/Caches/Cypress/12.17.3/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:314:23)
    at /Users/mohitnayak/Library/Caches/Cypress/12.17.3/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:686:17
    at Object.compile (/Users/mohitnayak/Library/Caches/Cypress/12.17.3/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:743:35)
    at Module.m._compile (/Users/mohitnayak/Library/Caches/Cypress/12.17.3/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:856:36)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Object.require.extensions.<computed> [as .js] (/Users/mohitnayak/Library/Caches/Cypress/12.17.3/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:859:16)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Function.Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  diagnosticCodes: [ 5095 ]
}

My project is a simple todo app. You can find the code on this GitHub repository. I would greatly appreciate any help and guidance on how to get Cypress running smoothly for this project.

javascripttypescripttestingnext.jscypress

Answer №1

To make changes to your tsconfig.json file, locate the moduleResolution property and update its value.
For example:

"moduleResolution": "node"

You need to replace the current value of "bundler" with "node".

I have tested this change and it works perfectly.

After making the update, the result will look like this:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing multiple lists in Angular 2 can be achieved through a simple process

I am looking to create a functionality where, upon clicking on multiple lists, the color changes from grey to pink. Clicking again will revert the color back to grey. How can I achieve this using class binding? Below is the code snippet I have tried with ...

javascriptangulartypescript

Unique calculation for rotational movement

I am currently developing a unique compass application. Although the project is progressing well, I am facing a significant challenge with one aspect: My code calculates degree angles within the range of -360 and 360: -318°, -29°, 223°, -163°, ... ...

javascripthtmlmathrotationcompass

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

<div class="tabs-wrap left relative nomargin" id="tabs"> <ul class="nav ultab" id="fram"> <li class="active"><a href="#history" data-toggle="tab" id="history1" >History< ...

javascripthtmlcsstwitter-bootstrapscrollbar

Issue with AngularJs: $http post only posting single item to collection inside a for loop

I have a collection that requires me to post multiple items in a for loop. Below is the code snippet: for(i = 0; i < 28; i++) { var request = $http({ method: "post", url: "/students", ...

javascriptangularjshttppost

Enhance your workflow with Visual Studio Code by incorporating multiple commands

Embarking on my journey to create my first VSC extension by following this tutorial. Within the "extension.ts" file resides a simple hello world command. My ambition is to introduce another command called git_open_modified_files, however, the tutorial la ...

typescriptvisual-studio-codevscode-extensions

Utilize $.get AJAX to extract data from a multidimensional JSON array

Struggling to make two functions work on my form that uses AJAX and jQuery to look up an array. One function is functional while the other seems to be causing confusion with over-analysis and extensive troubleshooting. Any insights into what may be missing ...

javascriptjqueryarraysajax

The useEffect function continues to fire twice even when the dependency array is empty

I found a helpful example at https://github.com/vercel/next.js/blob/canary/examples/with-firebase-authentication/utils/auth/useUser.js Although the effect is working fine and firing once, the functions inside are being called twice for some reason. us ...

reactjsnext.js

Is it possible for Typescript to automatically infer object keys based on the value of a previous argument?

Currently, my goal is to create a translation service that includes type checking for both tags and their corresponding placeholders. I have a TagList object that outlines the available tags along with a list of required placeholders for each translated st ...

typescripttypescript-typingstypescript-generics

Excessive use of the findMany method in Next.js with Prisma can lead to an overflow

I am currently facing an issue where my website is loading slowly because I am fetching all items from a table and displaying them inside a carousel. The table has too many entries, and I need to find a solution to only fetch a few items, display them in a ...

sqlnext.jsprisma

The integration of NextAuth Credential Provider with Prisma Adapter in the latest version of Next12 does not

I've configured my Nextjs (Next12) project with NextAuth CredentialsProvider and I'm using the Prisma Adapter to store user sessions in the database. I followed the guidelines from the NextAuth team's documentation, but when I click on the ...

databasenext.jsadapterprismanext-auth

Discover the process of utilizing Cypress to mock the useSession and getSession functions in Next.js when working with next-auth

My current challenge involves stubbing both frontend and backend calls to useSession() and getSession() using Cypress. Despite my efforts, the stubbed functions are not replacing the original functions or being called: This is how I have attempted to ach ...

reactjsnext.jscypresssinonstub

Understanding the separation and communication techniques in Vue.js components

I recently developed a small vuejs application and I find myself getting confused with the functioning of components. Here is the code snippet that I have been working on: <div id="app"> <div v-if="loggedIn"> <nav> <r ...

javascripthtmlvue.jsvue-component

react-i18next: issues with translating strings

I encountered a frustrating issue with the react-i18next library. Despite my efforts, I was unable to successfully translate the strings in my application. The relevant code looked like this: App.tsx: import i18n from 'i18next'; import { initR ...

reactjstypescripti18nextreact-i18next

Securing a JWT token post login

I am new to NodeJS and despite trying numerous solutions, I am facing a challenge. My project involves NodeJS, MongoDB, Express, and Vanilla JS rendered through Pug with an MVC structure. Issue Current Status: I can successfully log in a user and recei ...

javascriptnode.jsauthenticationjwt

The global declaration of Typescript is only accessible within the node_modules/@types directory

Scenario As I develop an npm package using Typescript, I include types that are shipped alongside the library in the following structure: my-package |- index.js |- index.d.ts |- package.json The index.d.ts file includes global declarations like: declare ...

typescriptnpmglobaltypescript-typingsdefinitelytyped

Proceed to the next request after the initial request has finished executing in node

Imagine there is an endpoint called /print. Each time a request is sent to this endpoint, it triggers the function printSomething(). If another user hits this endpoint while printSomething() is still processing, it will run the function again simultaneousl ...

javascriptnode.jsexpress

Incorporating Data from a Dictionary into a Highcharts Series

Utilizing flask allows me to organize all my data in a dictionary for use with highcharts. my_data = { 'dataset1': {'x_values': [1, 2, 3, 4, 5, 6], 'y_values': [7, 8, 9, 10, 11, 12]}, ...

javascriptpythonflaskhighcharts

Incorrect configuration file for karma

To simplify the configuration of the karma config file, I have utilized variables to store specific parts of the path. var publicfolder = "public" var mypath = "packages/vendor/package/"; files: [ publicfolder+'/assets/libs/jquery/dist/jquery.js&a ...

javascriptunit-testingkarma-runner

Using the Sequelize query string prefix to find data that starts with a specific value

I'm currently working on an autofill feature that takes a string input and provides a list of string suggestions. While using Sequelize's iLike:query, it retrieves all strings in which the queried string is present. However, my goal is to priori ...

javascriptpostgresqlsequelize.js

Troubleshooting the issue of browser prefix injections not functioning properly in Vue when using the

I've spent an entire afternoon on this issue and I'm completely stuck. After realizing that IE11 doesn't support grid-template, I learned that I need to use -ms-grid-columns and -ms-grid-rows instead. I am attempting to generate CSS and inje ...

javascriptcssvue.jsinternet-explorer-11