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

Tips for managing an array of observable items

In my current project, I am working with an Angular application that receives a collection from Firebase (Observable<any[]>). For each element in this collection, I need to create a new object by combining the original value with information from ano ...

angulartypescriptfirebaserxjs

Create an array of arrays within a loop using TypeScript

My application contains an object with dates and corresponding time arrays. The console log output is displayed below: 32: { 1514160000: Array [ 1200, 1500 ], 1514764800: Array [ 1200, 1500 ], 1515369600: Array [ 1200, 1500 ], 1515974400: Array [ 700, 12 ...

javascriptarraysangulartypescript

OneGraph and Graphql Codegen produce enums with numerical representations

After migrating my project's codebase from using the direct Headless Wordpress GraphQL endpoint to OneGraph for Google+Facebook Business support, I encountered an error related to apollo referencing the output codegen. Here is the specific error messa ...

typescriptenumsgraphqlnext.jscode-generation

Adjust the transparency and add animation effects using React JS

When working on a React project, I encountered an issue where a square would appear under a paragraph when hovered over and disappear when no longer hovered. However, the transition was too abrupt for my liking, so I decided to implement a smoother change ...

javascriptcssreactjstypescriptmouseevent

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

Transpilation is the act of converting code from one language to another with a similar level of abstraction. Can you point out some distinctive characteristics that indicate TypeScript transpires into JavaScript? ...

javascripttypescript

Exploring the concept of kleisli composition in TypeScript by combining Promise monad with functional programming techniques using fp-ts

Is there a way to combine two kleisli arrows (functions) f: A -> Promise B and g: B -> Promise C into h: A -> Promise C using the library fp-ts? Having experience with Haskell, I would formulate it as: How can I achieve the equivalent of the > ...

typescriptfunctional-programmingfp-ts

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

#1 Even if chosen, cannot search by id. The 'name' condition in the loop works well but I am unable to correctly search by id (returns nothing). #2 When selecting an option from the dropdown menu, it only displays until I start typing. I would l ...

javascripttypescriptvue.js

JavaScript - Imported function yields varied outcome from module

I have a utility function in my codebase that helps parse URL query parameters, and it is located within my `utils` package. Here is the code snippet for the function: export function urlQueryParamParser(params: URLSearchParams) { const output:any = {}; ...

javascripttypescriptimportmodulenode-modules

I'm puzzled by how my observable seems to be activating on its own without

Sorry if this is a silly question. I am looking at the following code snippet: ngOnInit(): void { let data$ = new Observable((observer: Observer<string>) => { observer.next('message 1'); }); data$.subscribe( ...

angulartypescriptrxjs

Switching from a TypeOrm custom repository to Injectable NestJs providers can be a smooth transition with the

After updating TypeORM to version 0.3.12 and @nestjs/typeorm to version 9.0.1, I followed the recommended approach outlined here. I adjusted all my custom repositories accordingly, but simply moving dependencies into the providers metadata of the createTe ...

typescriptnestjsrepositorytypeorm

Construct this node project utilizing either gulp or webpack exclusively

In the structure of my project, you will find various folders like node, build, gulp, and src. These folders contain important files for the development process such as .gitignore, gulpfile.js, package.json, tsconfig.json, webpack.config.js, server.js, con ...

node.jstypescriptbuildgulpwebpack-2

I'm having trouble with VSCode deleting my TypeScript code. Is there a way to disable this feature

My code keeps getting removed and I can't figure out how to stop it. Does anyone know which setting I need to adjust? Watch the video here: This issue occurs in all instances, not just with imports. ...

typescriptvisual-studio-code

Steps to initiate or conclude a conversation from a designated location?

I'm working on an Angular project where I have a popup dialog open. However, I want the dialog to appear from the button and close within the button itself, similar to this example: https://material.angularjs.org/latest/demo/dialog Opening and closin ...

angulartypescriptangular-material

The error message "Property '$store' is not defined on type 'ComponentPublicInstance' when using Vuex 4 with TypeScript" indicates that the property '$store' is not recognized

I'm currently working on a project that involves using TypeScript and Vue with Vuex. I've encountered an error in VSCode that says: Property '$store' does not exist on type 'ComponentPublicInstance<{}, {}, {}, { errors(): any; } ...

typescriptvue.jsvisual-studio-codevuex

When defining a GraphQL Object type in NestJS, an error was encountered: "The schema must have unique type names, but there are multiple types named 'Address'."

Utilizing Nestjs and GraphQL for backend development, encountered an error when defining a model class (code first): Schema must contain uniquely named types but contains multiple types named "Address". Below is the Reader model file example: @ObjectType() ...

typescriptnestjscode-firstexpress-graphql

Change the value of the checked property to modify the checked status

This is a miniCalculator project. In this mini calculator, I am trying to calculate the operation when the "calculate" button is pressed. However, in order for the calculations to run correctly in the operations.component.ts file, I need to toggle the val ...

javascriptangulartypescript

Struggling to configure Connected React Router correctly

As I work on updating my React, Redux, and Router versions to incorporate connected-react-router, I've encountered an issue with the root reducer and store creation process. The previous functioning reducer code looked like this: const appReducer = ...

reactjstypescriptreduxconnected-react-router

`Typescript does not adhere to the specified type when used inside a for loop with a local

This code snippet declares a variable venuelist of type Venue array and initializes it as an empty array. The type Venue has a property named neighborhood. There is a for loop that iterates through the venuelist array and checks if the neighborhoods matc ...

typescripttypes

delayed updating of property not visible in angular 10 immediately

I needed to hide a div based on a condition, so I decided to use the hidden property like below: <div [hidden]="isControlDisplayed()?false:true"> The isControlDisplayed() method determines whether to show or hide the div based on the value ...

javascriptangulartypescript

`"Type is invalid" error occurring with component after importing it into a different project``

I am currently working on developing a custom Storybook 7 Typescript component library with React. I have successfully imported this library into another project using a private NPM package. However, one of the components in the library, specifically the ...

javascripttypescriptimportcomponentsexport