The TypeScript, NextJS project is encountering an issue where it is unable to read the property 'cwd' due to a TypeError

I've noticed this particular error popping up frequently online, but it's not quite matching the issue I'm facing.

Every time I execute yarn dev, I encounter the following error:

next-dev.js?53bc:89 Error was not caught TypeError: Cannot read property 'cwd' of undefined
    at Module.eval (parsers.js?f09d:27)
    at eval (parsers.js:252)
    at Module../node_modules/@sentry/node/esm/parsers.js (_app.js?ts=1619702971940:3455)
    at __webpack_require__ (webpack.js?ts=1619702971940:873)
    at fn (webpack.js?ts=1619702971940:151)
    at eval (backend.js?5e1f:1)
    at Module../node_modules/@sentry/node/esm/backend.js (_app.js?ts=1619702971940:3299)
    at __webpack_require__ (webpack.js?ts=1619702971940:873)
    at fn (webpack.js?ts=1619702971940:151)
    at eval (index.js?54d7:1)
    at Module../node_modules/@sentry/node/esm/index.js (_app.js?ts=1619702971940:3335)
    at __webpack_require__ (webpack.js?ts=1619702971940:873)
    at fn (webpack.js?ts=1619702971940:151)
    at Module.eval (_app.tsx:16)
    at eval (_app.tsx?8548:93)
    at Module../src/pages/_app.tsx (_app.js?ts=1619702971940:11957)
    at __webpack_require__ (webpack.js?ts=1619702971940:873)
    at fn (webpack.js?ts=1619702971940:151)
    at eval (next-client-pages-loader.js?7ae7:5)
    at eval (route-loader.ts?8a46:294)
    enter code here

This error occurs whether I'm in development or production mode. I'm working on a project using nextjs, typescript, jest, and babel.

It seems to be related to a babel compatibility issue, but all my packages are updated and should be compatible as per my package.json:

"@types/testing-library__jest-dom": "5.9.5",
"@babel/core": "7.13.1",
"@types/jest": "26.0.23",
"babel-jest": "26.6.3",
"jest": "26.6.3",
"ts-jest": "26.5.5",

I'm puzzled by this situation as all suggested solutions point towards package compatibility issues that don't seem to address my problem... If you need more information, feel free to ask.

javascripttypescriptjestjsbabeljsnext.js

Answer №1

For those in need of the solution, it turned out to be a mistake in the tsconfig file:

{
    // configuration details here
    "paths": {
      "*": ["node_modules/*"],
      "~/*": ["src/*"]
    }
}

Deleting the line 

"*": ["node_modules/*"],
resolved the issue.

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

The text cycling component in Next.js remains stagnant and never refreshes

I've encountered a challenge while working on a component that I initially thought would be straightforward: it's supposed to take an array of strings and update the text inside the div of the component every three seconds with the next item in t ...

reactjsnext.jssetintervaluse-effectuse-state

Is it possible to convert the useMemo function into a useReducer hook implementation?

While I've figured out how to switch from using useState to useReducer, I'm now curious if there's a similar approach for transitioning from useMemo? I've been troubleshooting some code that's causing unnecessary renders because o ...

javascriptreactjsreact-native

The dependencies of Nest are unable to be resolved by the system

Attempting to implement AuthService within UsersService and UsersService within AuthService results in a "circular dependency" issue. The error message states that "Nest can't resolve dependencies of the AuthService (UserModel, JwtService, ?). Please ...

node.jsangulartypescriptdependency-injectionnestjs

I encountered an error while trying to load the resource from http://premieroptie.nl/wp-content/themes/theme51771/favicon.ico: net::ERR_NAME_NOT_RESOLVED

Upon opening my website URL, computertechnet.nl, I noticed an error when inspecting and checking the console tab. The specific error message is: Failed to load resource: net::ERR_NAME_NOT_RESOLVED for . In addition, a second warning was displayed: G ...

javascriptphpjavaquery

Discover content within nested arrays - angularJS

I have a function written in angularJS that utilizes find to verify the presence of an item in an array; function checkCartItem(item) { return $scope.cart[0].cart_items.find(function(itm) { return itm.item_id === item.item_id }); } The fu ...

javascriptarraysangularjs

Error in AngularJS - filterProvider not recognized

When the two script statements below are combined, they cause an error: "Error: [$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilter." Can someone explain why this happens? 1st segment Find Person: <input type="text" ng-m ...

javascriptangularjs

Analyzing the original data form versus the modified data

I'm dealing with a form in React that utilizes react-hook-form and the useFieldArray method for adding dynamic steps. The challenge I'm facing is how to compare the original data passed to the form with the edited data, in order to make correspon ...

javascriptreactjsjavascript-objectscrudreact-hook-form

Efficient Error Handling in Next.JS with Apollo GraphQL Client

Although the component successfully renders the error state, an uncaught exception is displayed in the console and a dialogue box appears in the browser. How can expected errors be handled to prevent this behavior? import { useMutation, gql } from "@a ...

javascriptreactjsnext.jsapollo-clientreact-apollo

What is the best way to bring in the original files of a JavaScript library?

Currently I am utilizing a library called selection.js. Within my application, I am importing from node_modules with the following code: import * as Selection from '@simonwep/selection-js' However, what I am interested in doing is modifying the ...

javascriptnpmimportecmascript-6

Exploring Vue.js3: Simplifying Nested Array Filtering

Currently, I am in the process of sifting through an Array that contains nested arrays. To handle this task, I utilized computed and crafted a function called filteredEgg(). However, I seem to be overlooking something, as I'm only returning the main ...

javascriptarraysvue.jsfilter

How to Retrieve Correct JSON Data from Mongoose Query in Node.js

I am currently working on an express application that utilizes mongoDB as the database and handlebars as my server-side templating engine. Unlike many applications, I have chosen not to incorporate AngularJS or Ajax into my project. One of the challenges ...

javascriptjsonnode.jsmongodbmongoose

Is it possible to transfer a Mongo connection to JQuery code using socket.io?

I'm currently working on setting up a global MongoDB connection in my node.js web app. Here is what I have so far: var MongoClient = require('mongodb').MongoClient; var mconn = null; MongoClient.connect('mongodb://myHost:27017/users&a ...

javascriptjquerynode.jsmongodbsockets

The error message in Nextjs is indicating that the Swiper scss package path could not be

Encountered an issue while integrating swiper in Next.js. "next": "^11.1.2", "swiper": "^7.0.5" Despite using the specified versions, unable to access swiper.scss. Seeking guidance on resolving this problem. Error ...

reactjsnext.jsswiper.js

Spontaneously generating models

Explaining this concept can be a bit complex. I am tasked with creating an object that contains properties from dynamic HTML code. To illustrate, let's use an example: Firstly, here is my data object: var myObject = {Field1: 'Value1', Fiel ...

javascriptvue.js

JavaScript throws an error when attempting to access an object's methods and attributes

Within my Angular.js module, I have defined an object like this: $scope.Stack = function () { this.top = null; this.size = 0; }; However, when I try to use the push method of this object, I encounter an error stating undefined: ...

javascriptangularjs

When using Sequelize, I encountered an error message from SQLite stating that the table does not exist despite having created

I am struggling to grasp the concept of how Sequelize operates and I can't figure out why I am encountering the SQLITE_ERROR: no such table: Users error even though I have created the table using sequelize.define. Here is my code: const { Sequelize, D ...

javascriptnode.jsdatabasesqlitesequelize.js

Discover the data type without using the extends keyword within an interface in Typescript

I'm struggling with making my code declarative enough. I want to infer a type inside an interface scope and then use that same type as an argument for a method within the interface. Here is a simple example: interface Prop { x: infer U, // ^^ ...

typescriptgenericstype-inference

Determining the Next Available Date from JSON Data

I have a task of using a JSON response from the Eventbrite API to showcase the upcoming event tour date. The goal is to automatically calculate this date based on the current time, identifying the next event after the current moment. Below is the JSON res ...

javascriptjsoneventbrite

What is the best way to receive the information that was transmitted to me through a callback function?

While web development is not my strong suit, I have a question that might sound silly, so bear with me as I explain. Once the user selects their desired purchase, an API call is made to generate a trans_id and redirects them to the bank's payment pag ...

javascriptnext.js

Are there any alternative methods for clearing form fields following a successful thunk dispatch in React?

When implementing a Post API call in Thunk, I dispatch a boolean success key for successful requests and an error message for errors. Now the goal is to clear form data upon success and display the error message upon an error. To achieve this, I utilize ...

javascriptreactjsreduxreact-reduxredux-thunk