Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

Issue:

An error occurred stating that the file '/Users/nish7/Documents/Code/WebDev/HOS/frontend/node_modules/eslint-import-resolver-typescript/lib' could not be found. This error is present in the program because of the specified root file for compilation.

Steps to recreate the problem:

  • create-next-app
  • npx jsconfig.json -t nextjs

Contents of jsconfig.json:

    "compilerOptions": {
        "checkJs": false,
        "resolveJsonModule": true,
        "moduleResolution": "node",
        "target": "es2020",
        "module": "es2015",
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["components/*"],
            "@/styles/*": ["styles/*"],
            "@/pages/*": ["pages/*"],
            "@/utils/*": ["utils/*"],
            "@/theme/*": ["theme/*"]
        }
    },
    "exclude": [
        "dist",
        "node_modules",
        "build",
        ".vscode",
        ".next",
        "coverage",
        ".npm",
        ".yarn"
    ],
    "typeAcquisition": {
        "enable": true,
        "include": ["react", "react-dom"]
    }
}

Content of eslint.rc:

{
  "extends": ["next", "next/core-web-vitals"]
}

Specifications:

  • Visual Studio Code: Version 1.57.1
  • Node.js: 14.17.1 (LTS)
  • Next.js: 11.0.1

Note: I attempted to add the eslint-import-resolver-typescript module, but it did not resolve the issue.

Screenshot:

javascripttypescriptvisual-studio-codefrontendnext.js

Answer №1

If you're utilizing vscode, consider turning off the TypeScript › Validate option in your settings. This fixed the issue for me!

Note:

Discovered a more practical solution instead of completely disabling validation; configure the TypeScript SDK in Vscode settings.

"typescript.tsdk": "./node_modules/typescript/lib"

Answer №2

Simply try restarting all of your Visual Studio Code windows, as this solution resolved the issue for me.

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

Issues with $.getjson and trouble with storing JSON data

My current issue involves attempting a getJSON call to a page on my domain that contains a simple JSON array. However, the script in my webpage is not returning anything as expected. <script> $('#genButton').click(function() { ...

javascriptjqueryjson

What is the best way to initiate a class constructor with certain parameters left out?

Currently, I am facing a challenge while trying to pass various combinations of arguments to a class constructor. The constructor has 2 optional arguments. Here is the code snippet: class MyClass { foo(a, b) { return new MyClass(a, b); } bar( ...

javascripttypescriptclass

Compilation in TypeScript taking longer than 12 seconds

Is anyone else experiencing slow TypeScript compilation times when building an Angular 2 app with webpack and TypeScript? My build process takes around 12 seconds, which seems excessively slow due to the TypeScript compilation. I've tried using both ...

performancetypescriptangularwebpack

Encountering a timeout error when trying to test the video element with Jest

My function extracts meta data such as width and height from a video element in the following code snippet: export async function getVideoMetadata( videoBlobUrl: string, videoElement: HTMLVideoElement, ): Promise<{ width: number; height: number }> ...

node.jstypescriptjestjsts-jest

Is `activeClassName` not being recognized by React?

I've been trying to figure out what's wrong with this code, but I can't seem to find a solution anywhere online. Can someone please help me? This code works fine in my other application, so I'm not sure why it's causing issues here ...

javascriptreactjsreact-router-dom

Detailed enrollment procedure

I am facing an issue with the code in my HTML that validates input types. The system detects empty fields and prevents proceeding to the next step. How can I disable this validation as some of the fields are not required? For instance, the input type < ...

javascriptjquery

Is it crucial to commit to memory a Tiny/Affordable Component? - ReactJS

Imagine having a child component that simply returns a div element Child Component : function Child() { return <div className={styles.alertBox}>No Data Found</div>; } Every time the parent state changes, this child component will re-render. ...

reactjsnext.js

Displaying hidden Divs in React Typescript that are currently not visible

I have an array with various titles ranging from Title1 to Title8. When these titles are not empty, I am able to display their corresponding information successfully. Now, my goal is to include a button that will allow me to show all fields. For example, ...

javascriptreactjstypescripttoggle

Converting an array of objects into an array of Objects containing both individual objects and arrays

I am dealing with an object const response = { "message": "story records found successfully", "result": [ { "created_AT": "Thu, 13 Jan 2022 17:37:04 GMT", ...

javascriptarrays

The Node.js EventEmitter encounters an error stating `listener must be a function` when the `typeof` operator indicates that the value is a function, hint

Dealing with an object that is being interacted with by multiple node.js modules has presented some challenges. My goal is to allow certain modules to add eventListeners to the object. In my codebase, I have an events file where event emitters are attach ...

javascriptnode.jseventemitter

Go to a different route while transferring information

My website has a specific route (/account) that is only accessible to logged-in users. If a user is not authenticated, the following code snippet handles the situation: // Redirect to login if no custom access token found if (!customerAccessToken) return r ...

reactjsnext.jsserver-side-rendering

Is the state variable not being properly set by using React's setState within the useCallback() hook?

Within a React FunctionComponent, I have code that follows this pattern: const MyComponent: React.FunctionComponent<ISomeInterface> = ({ someArray, someFunction }) => { const [someStateObjVar, setSomeStateObjVar] = React.useState({}); const [ ...

javascriptreactjstypescriptusecallback

In what way are these fonts being displayed through the utilization of a .js file?

Why are people opting for unique fonts on their browsers using .js files instead of graphics? For example, like typekit? ...

javascripthtmlcssfonts

Loading content synchronously

Could you assist me in finding a solution to synchronize the loading of pages and elements? Currently, my code looks like this: $(Element).load(File); ... other commands... window.onload = function () { Update_Elements(Class, Content); } Everything ...

javascriptjquery

Is it possible to create an index.html page with all the necessary head tags to prevent duplicate code across multiple html pages?

Imagine I am using app.js or a Bootstrap CDN link for all of my HTML pages, but I don't want to include it in every single page individually. Is there a way to create an index.html file that includes this so that all other HTML pages load the head fro ...

javascripthtmlcss

Can someone explain how the React rating component from Material UI is incorporated into a form?

I'm currently attempting to integrate Material UI's React rating component into a react-hook-form. ... <form onSubmit={handleSubmit(onSubmit)}> <FormControlLabel control={ <Checkbox inputRef={r ...

reactjsformsmaterial-uifrontend

Creating a layered image by drawing a shape over a photo in Ionic using canvas

While there are plenty of examples demonstrating how to draw on a canvas, my specific problem involves loading a photo into memory, adding a shape to exact coordinates over the photo, and then drawing/scaling the photo onto a canvas. I'm unsure of whe ...

javascripttypescriptionic-frameworkhtml5-canvasionic4

React - Utilizing Secondary Prop Value in Material UI Node Components

I've been working on streamlining my code and am wondering about the best way to pass an additional value using props while fetching data from the backend. I'm utilizing material UI's Autocomplete with the PERN stack. Everything is functioni ...

javascriptnode.jsreactjsmaterial-uichildren

Add new content to an existing JSON file in a Node.js environment

I'm encountering an issue while attempting to insert new text into an existing JSON file. I've experimented with writeFileSync and appendFileSync methods, however the added text does not maintain JSON formatting even when utilizing JSON.stringify ...

javascriptjsonnode.js

The issue of 'position: fixed' not properly functioning within the Materialize CSS modal

My goal is to have the header of the Modal stay fixed while scrolling, but for some reason, the option position:fixed; is not working. I am currently using Materialize CSS to build the modal and surprisingly, position:sticky; is working. $(document).rea ...

javascriptjqueryhtmlcssmaterialize