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:

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

Ways to access the values of checkboxes that are initially checked by default

Recently, I was working on a project that involved multiple checkboxes. My goal was to have the checkboxes pre-checked with values in the form (using reactive form). Users should be able to unselect the boxes as they wish and the data would be stored accor ...

Discovering the process to verify and obtain the outcome of an API request through jQuery Ajax

Seeking assistance in utilizing jQuery AJAX to access an API with a URL and parameters using the POST method. Specifically, I aim to determine the availability of delivery for a given Pincode on an e-commerce website. Any guidance on how to retrieve data f ...

Method with undefined constructor parameter in Typescript

Understanding how to effectively use Typescript and Angularjs in conjunction has been a challenge for me. Despite reading numerous blog posts and consulting the official documentation for both projects, the concepts just haven't fully clicked. My Ang ...

What is the process for converting a string literal into raw JSON and then storing it?

When trying to edit object values using a text input element and JSON.stringify(txt, null, 2), everything seems fine initially. However, after submitting the input, I end up with unwanted characters like "/n" and "\" within the string literal. Despite ...

How can I refresh the node server during runtime?

In my Express server, I am currently working on defining an endpoint that triggers a restart of the server automatically during runtime. Here is a snippet showcasing how this could be implemented: var express = require('express') var app = expre ...

Viewing a PDF within a MUI tooltip

Currently, I am facing an issue where I am attempting to show a preview of a PDF file inside a Material-UI (MUI) Tooltip when a user hovers over a MUI ListItem. While I have successfully displayed previews of PNG and JPG files using Next.js' Image com ...

The problem with the CSS Grid effect

Looking for assistance in creating a grid layout similar to the one on this website: Upon inspecting the page source, I found the following code snippet: http://jsfiddle.net/o45LLsxd/ <div ng-view="" class="ng-scope"><div class="biogrid ng-scope ...

JavaScript-generated div not recognizing CSS in Internet Explorer

Once again, dealing with Internet Explorer has become a major headache. On headset.no, we have incorporated a small blue search field. However, when you input "jabra" into the field, it should generate suggestions in a div underneath. This feature operates ...

Designing a personalized mat-icon using the Github SVG

Trying to create a unique custom SVG mat-icon by loading the SVG directly from Github. My initial attempt using DomSanitizer was documented in this article, and it successfully loaded the SVG via HttpClient. Now, I am attempting to achieve this directly t ...

React JS displayed the string of /static/media/~ instead of rendering its markdown content

When I looked at the material UI blog template, I created my own blog app. I imported a markdown file using import post1 from './blog-posts/blog-post.1.md'; Next, I passed these properties to this component like so: <Markdown className=" ...

Enhance your TypeScript React development with NeoVim

As a newcomer to vim, I decided to test my configuration with react and typescript. To do this, I created a simple demo app using the command npx create-react-app demo --template typescript. Next, I opened the directory in neovim by running nvim .. However ...

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: Mobile: <FormControl sx={{ m: 1, minWidth: '100%', marg ...

What is the best way to traverse through a nested JSON file with d3.js?

Greetings. I am currently facing a challenge in navigating through a nested JSON file. Below is the JSON data that I need assistance with: {"Id":466,"Name":"korea", "Occurrences": ...

How to extract key-value pairs from an object in a TypeScript API request

I am trying to extract the data '"Cursed Body": "100.000%"' from this API response using TypeScript in order to display it on an HTML page. Can anyone help me figure out how to do this? API Response { "tier": &q ...

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

The AnchorEL component becomes unusable once a function has been executed for the first time

I am facing a challenge with anchorRef and struggling to understand how it works as I am new to React and have never used it before. After the onClickAway method is called, Material-UI shows an error stating that the anchorRef is set to null, but this warn ...

Showcasing a graphical representation with the help of Highcharts

I am currently exploring JavaScript and trying to familiarize myself with interactive charts using the HighCharts library. Unfortunately, I have been facing some challenges in getting the graph to print correctly. Despite attempting various examples, none ...

jQuery and HTML: Need help enabling an <input> or <select> element?

Currently, I am using Mozilla Firefox 14.0.1 and Google Chrome 20.0.1132.57 (which I believe is the latest version). The code I am working with looks like this: http://jsfiddle.net/SVtDj/ Here is what I am trying to accomplish: Type something into inpu ...

The most effective method for modifying a prop in VueJS without altering the parent's data

In the main Vue component, there is an object named user. If I pass this user object as a prop to a child component: <child :user="user"></child> When updating user.name in the child component, the changes also reflect in the parent componen ...

Utilizing HTML imports in Typescript for efficient use as TemplateStringLiteral

Recently, I started using TypeScript for the first time and I'm looking to integrate it into my webpack build. Currently, I am working with ts-loader and babel-loader to load TypeScript files while also attempting to include HTML files within the scr ...