Encountered an error stating "Cannot find module node:fs" while using eslint-typescript-import, eslint-import-resolver-typescript,

Challenge

My attempt to configure path alias in my TypeScript project was met with failure. Two errors arose during the execution of npm start:

  • Module not found: Error: Can't resolve '~/App' in 'D:\work\workbench\templates\template-fe-pure\src'
    (despite Visual Studio Code being able to locate imported files without any warnings)
  • Resolve error: Cannot find module 'node:fs'

Here is how I attempted to import using path alias:

import App from "./App";
-> 
import App from "~/App";

In my tsconfig.json: 
"baseUrl": ".","paths": {"~/*": ["./src/*"]},
(full file provided below)

System Details

  • Create React App with TypeScript template
  • <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49187989d9a80d9849881939d9ad99d99849b8680b4c6dac6c2dac4">[email protected]</a>
  • <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7114021d181f055c181c011e03055c0314021e1d0714035c0508011402120318010531425f435f44">[email protected]</a>
    : inclusion made for path alias purposes as described above

Configuration Files

.eslintrc.json

{
  // Configuration details go here ...
}

tsconfig.json

{
  // Compiler options and configurations listed here ...
}

Error Breakdown

ERROR

[eslint] 
src\index.tsx
  Line 1:1:   Resolve error: Cannot find module 'node:fs'
Require stack:
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-import-resolver-typescript\lib\index.cjs
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-module-utils\resolve.js
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-plugin-import\lib\rules\no-unresolved.js
- D:\work\workbench\templates\template-fe-pure\node_modules\eslint-plugin-import\lib\index.js
- D:\work\workbench\templates\template-fe-pure\node_modules\@eslint\eslintrc\dist\eslintrc.cjs
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    // Additional stack trace information ...

Search for more insights on each encountered error.
typescriptcreate-react-appeslint-plugin-import

Answer №1

Support for the latest node: protocol has been integrated into the TypeScript definitions found in @types/[email protected]. Feel free to give that a try. In case you encounter any issues, consider reverting back to an older version like 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f0e6f9fcfbe1b8fcf8e5fae7e1b8e7f0e6faf9e3f0e7b8e1ece5f0e6f6e7fce5e1d5a7bba2bba4">[email protected]</a>
, which does not utilize the new node: protocol syntax.

Overall, your setup seems to be functioning correctly.

Answer №2

Dealing with a similar issue, I dedicated numerous hours to finding a solution. Eventually, the root cause was traced back to an outdated node version. To resolve this, consider elevating it to version 16 using these steps.

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

Automated tasks running on Firebase Cloud Functions with cron scheduling

There are two cloud functions in use: The first cloud function is used to set or update an existing scheduled job The second one is for canceling an existing scheduled job The management of scheduling jobs is done using import * as schedule from &ap ...

javascriptnode.jstypescriptfirebasegoogle-cloud-functions

Angular searchbar issue: Unable to assign parameter of type 'unknown' to parameter of type 'string'

I've been working on an Angular app to fetch data from an API successfully. However, I'm currently facing a challenge while implementing a search function in my component.ts file. Here is the entire service code: import { Injectable } from &apos ...

angulartypescript

Leverage and implement a reusable class in Typescript

In a React Typescript project, I am facing a challenge. I want to utilize a base class component and add an additional property to its State. After attempting to modify the class from class ErrorBoundaryW extends PureComponent<any, State> {...} to ...

reactjstypescript

Encountering Typescript issues while trying to access @angular/core packages

Recently, I made an update to my Ionic app from Angular 7 to Angular 8, and an odd error popped up: The issue lies in the fact that I am unable to access any of the standard classes stored in the @angular/core module. This same problem is occurring with o ...

angulartypescriptvisual-studio-code

Having trouble with SVG Circles - Attempting to create a Speedometer design

Trying to implement a speedometer in one of the components of my Vue project, but encountering an issue. When I input 0 into my progress calculation for determining the stroke fill, it overlaps with the background circle instead of staying within its bound ...

typescriptvue.jsmathsvg

"The act of initializing an EntryComponent in Angular results in the creation of a brand

In my main component, app.component.ts, I have integrated a new service into the providers[] array and initialized it in the constructor: @Component({ selector: 'app-main', templateUrl: './app.component.html', styleUrls: ['. ...

angulartypescriptangular-material

Angular - Show a table of items from a given list

I recently started using Angular and I'm facing a challenge in displaying multiple tables based on a list of values. Each rule refNo should have its own separate rule conditions table displayed sequentially. Currently, all the tables are showing the s ...

angulartypescriptangular7

Prevent users from clicking buttons until all mandatory fields are filled out using react-hook-form

I am seeking guidance on how to dynamically disable a button based on the input values of both Name and State in the given code snippet. Specifically, I want to restrict button functionality until both name and state fields are filled out, regardless of ...

reactjstypescriptreact-hook-form

Dynamic Material UI Timeline

I am facing a challenge with making the Timeline in Material UI responsive for the first time. Currently, I have it set to align 'alternate', but I want it to switch to align 'left' when viewed on mobile or certain screen widths. I have ...

typescriptmaterial-uinext.jstimelinetsx

Issue with Angular custom tag displaying and running a function

I have created a custom HTML tag. In my next.component.ts file, I defined the following: @Component({ selector: 'nextbutton', template: ` <button (click) = "nextfunc()">Next</button> ` }) export class NextComponent{ nextfunc( ...

htmlangulartypescriptangular-componentscustom-tag

Error encountered during the compilation of Angular2 Typescript due to difficulty in mapping a JSON response with underscores in the names

I recently started working with angular2 and I'm trying to map a JSON response to an array of custom objects. The issue I'm facing is that when I try to access a variable with an underscore in its name, I encounter a compile error. I followed the ...

jsonangulartypescriptangular2-services

Issues with Angular not reflecting data changes in the view after updates have occurred

I have a setup with two components. One is responsible for creating new data entries, while the other one is in charge of listing all the data stored in a database. The issue I'm facing is that even though the creation component successfully adds new ...

angulartypescriptangular-servicesangular-components

Windows drive letter casing error when using Yarn and NextJS

Today, I set up a fresh project using Yarn and NextJS on my Windows computer. When I try to start the project, I encounter an error stating that the casing is "invalid" for the project directory. The specific errors I am facing are: Invalid casing detecte ...

reactjstypescriptwindowsnext.jsyarnpkg

The parameter 'data' is assumed to have an 'any' type in React hooks, according to ts(7006)

It's perplexing to me how the 7006 error underlines "data," while in the test environment on the main page of React Hooks (https://react-hook-form.com/get-started#Quickstart), everything works perfectly. I'm wondering if I need to include anothe ...

javascriptreactjstypescriptreact-hooks

Using $gte and $lt to search within a range in mongoDB can be tricky when dealing with data types in typescript

Whenever I try to search by range of dates using $gte and $lt, I encounter issues with types. The types for my model are as follows: export interface IOneStoreCa { magId: number, caTtc?: number, marge?: number, } export interface ICa { _id: string ...

node.jstypescriptmongodbmongoose

Issue: Error messages are not being displayed when using Create React App with ErrorBoundary

Currently, I am delving into the world of componentDidCatch(). It seems pretty straightforward. The functionality is there, but I want to display the complete error stack on the view. In my separate files: import React, { Component } from 'react&apo ...

reactjscreate-react-app

Error in Ionic Cordova Build prod: Module "." not found - Requires Typescript version >3

After updating my ionic project and all dependencies, I encountered an error when trying to build a --prod android apk: Uncaught Error: Cannot find module "." at vendor.js:1 at vendor.js:1 at Object.<anonymous> (vendor.js:1) at e (vendor.js:1) at Ob ...

androidangulartypescriptcordovaionic3

The HttpClient.get('/') request with {observe: 'response'} is failing to retrieve some headers

Currently, I'm in the process of writing an API GET request by utilizing HttpClient.get(). Upon passing in the option to observe the response, I've encountered an issue where accessing the .keys() does not provide me with any headers apart from C ...

angulartypescriptrest

Creating an overloaded callable interface using TypeScript

The thread on implementing a callable interface provides some helpful information, but it doesn't fully address my specific query. interface lol { (a: number): (b: number) => string // (a: string): (b: string) => string // overloaded wi ...

javascripttypescriptclassinterface

The feature of "compile on save" is not functioning properly in my current Angular project

Yesterday I used the angular cli (ng new my-app) to create a new project, but unfortunately the "compile on save" option is not functioning properly. Interestingly, I have two projects on my computer and this feature works fine for one of them but not for ...

angulartypescript