Module `coc-tsserver` not found (error ts2307)

https://i.sstatic.net/k1MVW.png

Working on a project using NeoVim with CoC for TypeScript development in a yarn-3 pnp-enabled environment. Suddenly, the editor stopped recognizing imports and started showing errors for non-existent modules (refer to the screenshot). I've already set up SDK for Vim, installed TypeScript SDKs, updated yarn, and restarted the editor. Here are some system details: OS:

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=22.04
DISTRIB_CODENAME=jammy
DISTRIB_DESCRIPTION="Ubuntu 22.04.1 LTS"

Neovim:

NVIM v0.7.2
Build type: Release
LuaJIT 2.1.0-beta3
Compiled by <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc88999d91d78a9591bc888e9d9f97998ed298999e959d92d2938e9b">[email protected]</a>

package.json:

{
  "private": true,
  ...
  "devDependencies": {
    "typescript": "4.5.5",
  },
  "packageManager": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e19880938fa1d2cfd4cfd1">[email protected]</a>"
}

.yarnrc.yml

checksumBehavior: update

nodeLinker: pnp

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"
  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
    spec: "@yarnpkg/plugin-typescript"

yarnPath: .yarn/releases/yarn-3.5.0.cjs

tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "skipLibCheck": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@company/xxx-rqb": ["./packages/xxx-rqb/src"]
    }
  },
  "exclude": ["**/*.test.ts", "**/*.spec.ts"]
}

.vim/coc-settings.json:

{
  "eslint.packageManager": "yarn",
  "eslint.nodePath": ".yarn/sdks",
  "workspace.workspaceFolderCheckCwd": false,
  "tsserver.tsdk": ".yarn/sdks/typescript/lib"
}

CocInfo:

## versions

vim version: NVIM v0.7.2
node version: v16.15.1
coc.nvim version: 0.0.82-b7375d5f 2023-01-30 05:09:03 +0800
coc.nvim directory: /home/user/.nvim/plugin/coc.nvim
term: tmux
platform: linux

## Log of coc.nvim

2023-04-11T18:17:33.885 INFO (pid:911582) [configurations] - Add folder configuration from cwd: /home/user/dev/reactfrontend/.vim/coc-settings.json
2023-04-11T18:17:34.057 INFO (pid:911582) [plugin] - coc.nvim initialized with node: v16.15.1 after 224
...
coc-tsserver veriosn 2.1.3 (latest)
All plugins are updated.
Yarn SDKs installed for typescript, prettier, eslint. Integrations: vim.

I've tried updating yarn, upgrading SDKs, neovim, and reinstalling dependencies. Even ran yarn tsc on a simple file without issues. Still facing the import problem.

Answer №1

After some searching, I discovered that I needed to update the TypeScript version in Coc using the following commands:

:CocCommand tsserver.chooseVersion

I then selected Local version instead of Bundled with coc-tsserver

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

Leveraging a React hook within a Next.js API route

I am looking for a way to expose the data fetched by a React.js hook as a REST endpoint using Next.js. To create a REST endpoint in Next.js, I can easily use the code below in pages/api/index.tsx export default function handler(req: NextApiRequest, res: N ...

When I specify the type for the function parameter, an error occurs when I attempt to execute the function

When I assign a generic type to the function parameter and try to call the function, an error message pops up stating "This expression is not callable. Type unknown has no call signature." function a() { return 'abc' } function fun<T>(x: T ...

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Is it possible to change the background color of the active NavItem element to green using inline CSS in React Bootstrap and React Router Dom? I am currently using TypeScript 2.2 and React. If not, should I create a CSS class instead? Here is the code sni ...

Tips on retrieving a strongly typed value from a method using Map<string, object>

Having had experience working with C# for a while, I recently ventured into a Node.js project using TypeScript V3.1.6. It was exciting to discover that TypeScript now supports generics, something I thought I would miss from my C# days. In my C# code, I ha ...

Async and Await with Typescript

After searching extensively, I couldn't find a similar issue. I am working with Ionic 4 in Angular 7 along with Typescript 3.16. I have multiple 'TimeSpan' values that I need to retrieve using a function from the HTML like so: <ion-input ...

Pass the parameter name to the controller using the Change function in Angular 2

When creating a string from multiple inputs, I have a requirement to include the name of the input element as the second parameter in a function. <input [(ngModel)]="programSearched" name="programSearched"(ngModelChange)="stringBuilderOnChangeMaker(pro ...

Guide to setting a generic key restriction on a function parameter

Today, I decided to have some coding fun and try creating a generic pushUnique function. This function is designed to check if a new object being added to an array is unique based on a key, and then push it if it meets the criteria. At this point, all I h ...

When attempting to import a react component written with TypeScript to npm, receiving an 'undefined' error

I recently encountered an issue when trying to publish my custom React component developed with TypeScript on npm. Although the publishing process was successful, I faced an error upon importing the npm package into a new React project: Error: Element ty ...

The shape-matching subset functionality in Typescript is experiencing issues

One of the key principles of TypeScript is that type checking focuses on the structure of values, a concept known as duck typing or structural typing. This means that only a subset of an object's fields needs to match for it to be considered compatibl ...

Error: Invalid character '&' after initializing create-t3-application bootstrap

After initiating a new next.js app with the command npm create t3-app@latest, I encountered an unexpected syntax error when running the app using npm run dev. The error displayed was SyntaxError: Unexpected token '??='. Additionally, my console o ...

Tips on obtaining checkbox values other than "true"

Having trouble retrieving the values of selected checkboxes instead of displaying "Custom Category"? I've attempted to access the values and attributes with no success. I'm aiming to display the values of the selected checkbox. app.component.ht ...

Challenges in designing components in Angular 2.0 and beyond

Issue at hand - There are two input controls on the same page, each belonging to separate components. When a value is entered into the first input box, it calculates the square value and updates the second input control accordingly. Conversely, if the v ...

Unit testing with Jest in TypeScript for mocking Express and Mongoose

I've been struggling to find comprehensive resources on using jest.fn() to mock TypeScript classes and their methods, like express' Request, Response, NextFunction, and the save() method on a mongoose model. For instance, suppose I have the foll ...

Anticipated the object to be a type of ScalarObservable, yet it turned out to be an

When working on my Angular project, I utilized Observables in a specific manner: getItem(id): Observable<Object> { return this.myApi.myMethod(...); // returns an Observable } Later, during unit testing, I successfully tested it like so: it(&apos ...

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable: The HTML structure for these two dialogs ...

Enhance constructor functionality in Ionic 4 by incorporating additional parameters

Recently, I started using Ionic and came across a location page. In the location/location.page.ts file, there was an automatically generated empty constructor like this: constructor() { } Initially, the page functioned properly with this setup. However, ...

What is the reason for the truth value of `type a = {} extends {a?:number}? true:false;`?

Why is type a = {} extends {a?:number}? true:false; evaluated as true, while type b = {a?:number} extends {}? true:false; is also true! It seems like the empty object {} acts as a supertype that can extend other types. This raises some questions about ...

When you subscribe to a forkJoin, you will receive an error notification

Trying to determine when all my observables have returned their values is a challenge I'm facing. Here's my approach after including import { Observable } from 'rxjs/Rx';: let observables:any[] = []; observables.push(this.getV ...

Retrieve request body/header variables in JWT strategy using Nest JS

Is there a way to retrieve the header variables or request body in a strategy? The JWT structure within the JwtStrategy currently appears as follows: @Injectable() export class JwtStrategy extends PassportStrategy(Strategy) { constructor( private re ...

Utilizing ngModel within a nested ngFor loop in Angular to capture changing values dynamically

I have been working on developing a screen using Angular and I'm facing an issue with binding values using ngModel. https://i.sstatic.net/DCJ3T.png Here is my implementation. Any help would be appreciated. The model entity I am using for binding the ...