[Bug] Can't launch LSP server in Emacs

[delucca]

Hi! I'm trying to configure Yarn 2 in my Emacs, following the docs which @martinjlowm created at #1129.

Here is what I did:

---

This is my package.json

{
  "name": "execution-mode",
  "version": "0.0.1",
  "description": "Web interface for Bud's execution mode",
  "main": "server.js",
  "author": "delucca <delucca@pm.me>",
  "license": "Apache-2.0",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git+https://github.com/budproj/execution-mode.git"
  },
  "bugs": {
    "url": "https://github.com/budproj/execution-mode/issues"
  },
  "engines": {
    "node": ">=12.18.1"
  },
  "devDependencies": {
    "@tsconfig/recommended": "^1.0.1",
    "@types/eslint": "^7",
    "@types/eslint-config-prettier": "^6",
    "@types/eslint-plugin-prettier": "^3",
    "@types/koa": "^2.11.6",
    "@types/node": "^14.14.3",
    "@types/prettier": "^2",
    "@types/rimraf": "^3",
    "@typescript-eslint/parser": "^4.6.0",
    "eslint": "^7.12.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-plugin-editorconfig": "^2.1.3",
    "eslint-plugin-prettier": "^3.1.4",
    "lint-staged": "^10.5.0",
    "prettier": "^2.1.2",
    "rimraf": "^3.0.2",
    "ts-node": "^9.0.0"
  },
  "dependencies": {
    "@koa/router": "^9.4.0",
    "koa": "^2.13.0",
    "next": "^9.5.5",
    "typescript": "^4.0.3"
  }
}

I set the Yarn to berry version:

execution-mode@budproj on  feature/initial-setup [?] via ⬢ v12.18.1
❯ yarn set version berry
Resolving berry to a url...
Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js...
Saving it into /home/odelucca/Code/odelucca/execution-mode@budproj/.yarn/releases/yarn-berry.cjs...
Updating /home/odelucca/Code/odelucca/execution-mode@budproj/.yarnrc.yml...
Done!

Now, I ran:

execution-mode@budproj on  feature/initial-setup [?] via ⬢ v12.18.1
❯ yarn install
➤ YN0000: ┌ Resolution step
➤ YN0061: │ chokidar@npm:2.1.8 is deprecated: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
➤ YN0061: │ mkdirp@npm:0.5.3 is deprecated: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
➤ YN0061: │ fsevents@npm:1.2.13 is deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
➤ YN0061: │ fsevents@npm:1.2.13 is deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
➤ YN0032: │ evp_bytestokey@npm:1.0.3: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ nan@npm:2.14.2: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ urix@npm:0.1.0 is deprecated: Please see https://github.com/lydell/urix#deprecated
➤ YN0032: │ fsevents@npm:2.1.3: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ fsevents@npm:2.1.3: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ resolve-url@npm:0.2.1 is deprecated: https://github.com/lydell/resolve-url#deprecated
➤ YN0061: │ request@npm:2.88.2 is deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
➤ YN0061: │ har-validator@npm:5.1.5 is deprecated: this library is no longer supported
➤ YN0002: │ execution-mode@workspace:. doesn't provide react-dom@^16.6.0 requested by next@npm:9.5.5
➤ YN0002: │ execution-mode@workspace:. doesn't provide react@^16.6.0 requested by next@npm:9.5.5
➤ YN0000: └ Completed in 12s 606ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yallist@npm:3.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yaml@npm:1.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ ylru@npm:1.2.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yn@npm:3.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 2s 41ms
➤ YN0000: ┌ Link step
➤ YN0062: │ fsevents@patch:fsevents@npm%3A1.2.13#builtin<compat/fsevents>::version=1.2.13&hash=127e8e The platform linux is incompatible with this module, building skipped.
➤ YN0062: │ fsevents@patch:fsevents@npm%3A2.1.3#builtin<compat/fsevents>::version=2.1.3&hash=127e8e The platform linux is incompatible with this module, building skipped.
➤ YN0007: │ @ampproject/toolbox-optimizer@npm:2.6.0 [a7baa] must be built because it never did before or the last one failed
➤ YN0000: └ Completed in 1s 901ms
➤ YN0000: Done with warnings in 16s 702ms

I added the required sdk:

execution-mode@budproj on  feature/initial-setup [?] via ⬢ v12.18.1 took 17s
❯ yarn dlx @yarnpkg/pnpify --sdk base
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 8s 248ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: Done in 8s 539ms

➤ YN0000: ┌ Generating SDKs inside .yarn/sdks
➤ YN0000: │ ✓ Eslint
➤ YN0000: │ ✓ Prettier
➤ YN0000: │ ✓ Typescript
➤ YN0000: │ • 4 SDKs were skipped based on your root dependencies
➤ YN0000: └ Completed

I added the .dir-locals.el at the root of my repository, with the following contents:

((typescript-mode
  . (
     ;; Enable typescript-language-server and eslint LSP clients.
     (lsp-enabled-clients . (ts-ls eslint))
     (eval . (lexical-let ((project-directory (car (dir-locals-find-file default-directory))))
               (set (make-local-variable 'flycheck-javascript-eslint-executable)
                    (concat project-directory ".yarn/sdks/eslint/bin/eslint.js"))

               (eval-after-load 'lsp-clients
                 '(progn
                    (plist-put lsp-deps-providers
                               :local (list :path (lambda (path) (concat project-directory ".yarn/sdks/" path))))))

               (lsp-dependency 'typescript-language-server
                               '(:local "typescript-language-server/lib/cli.js"))
               (lsp-dependency 'typescript
                               '(:local "typescript/bin/tsserver"))

               ;; Re-(start) LSP to pick up the dependency changes above. Or use
               ;; `hack-local-variables-hook` as proposed in lsp-mode's FAQ:
               ;; https://emacs-lsp.github.io/lsp-mode/page/faq/
               ;; (lsp)
               )))))

I restarted my Emacs (just in case) and opened a Typescript file.

The first thing I noticed was the following log in my minibuffer:

File local-variables error: (void-function lsp-dependency)

After that, the lsp server did not started automatically, so I tried to launch it manually with M-x lsp and the followed logs appeared (at my buffer):

LSP :: Client jsts-ls is not in lsp-enabled-clients [2 times]
LSP :: Guessed project root is ~/Code/odelucca/execution-mode@budproj
LSP :: Connected to [ts-ls:3471520 status:starting].
LSP :: ts-ls:3471520 initialized successfully

Now, every imported dependency is marked as an error, with the following message:

Cannot find module '<module-name>' or its corresponding declarations. [2037]

Any idea how to fix it? I'm struggling with this 👍🏻

Screenshot:

[martinjlowm]

The initiation of lsp-mode was changed recently. Apologies for now getting around to contribute a fix 😅

The JS client configurations now reside in lsp-javascript.el which we need to depend on now including the lsp-dependency-call. I.e., the following should do.

((nil
  . (
     ;; Enable typescript-language-server and eslint LSP clients.
     (lsp-enabled-clients . (ts-ls eslint))
     (eval . (lexical-let ((project-directory (car (dir-locals-find-file default-directory))))
               (set (make-local-variable 'flycheck-javascript-eslint-executable)
                    (concat project-directory ".yarn/sdks/eslint/bin/eslint.js"))

               (eval-after-load 'lsp-javascript
                 '(progn
                    (plist-put lsp-deps-providers
                               :local (list :path (lambda (path) (concat project-directory ".yarn/sdks/" path))))

                    (lsp-dependency 'typescript-language-server
                                    '(:local "typescript-language-server/lib/cli.js"))
                    (lsp-dependency 'typescript
                                    '(:local "typescript/bin/tsserver"))))

               )))))

I no longer trigger the lsp-call (the final line in the previous configuration). Instead, I load lsp after TypeScript with:

(add-hook 'hack-local-variables-hook
                (lambda () (when (derived-mode-p 'typescript-mode) (lsp))))

This snippet you can throw in your Emacs configuration. It's fine to apply for all projects. It simply delays the initialization to after .dir-locals.el is loaded.

[delucca]

@martinjlowm thanks for your help :)

I added the suggested .dir-locals.el and now the following error appear at my *lsp-mode* buffer:

Command "/home/odelucca/Code/odelucca/execution-mode@budproj/.yarn/sdks/typescript-language-server/lib/cli.js --tsserver-path /home/odelucca/Code/odelucca/execution-mode@budproj/.yarn/sdks/typescript/bin/tsserver --stdio" is not present on the path.

I suspect the error is related to /home/odelucca/Code/odelucca/execution-mode@budproj/.yarn/sdks/typescript-language-server/lib/cli.js because that path does not exist (even after running the yarn dlx @yarnpkg/pnpify --sdk base)

Inside my .yarn/sdk folder I have the following folders:

execution-mode@budproj on  feature/initial-setup [✘!?] via ⬢ v15.0.0
❯ tree .yarn/sdks
.yarn/sdks
├── eslint
│   ├── bin
│   │   └── eslint.js
│   ├── lib
│   │   └── api.js
│   └── package.json
├── integrations.yml
├── prettier
│   ├── index.js
│   └── package.json
└── typescript
    ├── bin
    │   ├── tsc
    │   └── tsserver
    ├── lib
    │   ├── tsc.js
    │   ├── tsserver.js
    │   └── typescript.js
    └── package.json

7 directories, 12 files

If I remove these lines from the .dir-locals.el it works:

                    (lsp-dependency 'typescript-language-server
                                    '(:local "typescript-language-server/lib/cli.js"))

[martinjlowm]

Yea, the SDK wrapper is only installed if you install typescript-language-server in your project. Alternatively, you can fallback to a globally installed one and configure it in your general setup. That is what I do, e.g. through a nodenv shim:

(lsp-dependency 'typescript-language-server
                      '(:system "~/.nodenv/shims/typescript-language-server"))

[delucca]

@martinjlowm ah thanks! now it is working as expected =)

[lfender6445]

For anyone visiting for spacemacs you currently have to check out the develops branch in ~/.emacs.d to work with lsp https://emacs-lsp.github.io/lsp-mode/page/installation/#spacemacs

[fjavierv]

Hi, It look like this info is not updated with the official documentation:

https://yarnpkg.com/getting-started/editor-sdks#emacs

I am using emacs 27.1 and any of this config were valid for me. I make it work using the following ".dir-locals.el":

;;; -*- lexical-binding: t -*-

((nil . ((lsp-enabled-clients . (ts-ls eslint))
         (eval . (let ((sdks-directory (concat (car (dir-locals-find-file default-directory)) ".yarn/sdks/")))
                   (remhash 'prettier format-all--executable-table)
                   (puthash 'prettier (concat sdks-directory "prettier/index.js") format-all--executable-table)
                   (set (make-local-variable 'flycheck-javascript-eslint-executable)
                        (concat sdks-directory "eslint/bin/eslint.js"))
                   (with-eval-after-load 'lsp-javascript
                     (lsp-dependency 'typescript-language-server
                                     (list :system (concat "/foo/.yarn/sdks/"
                                                           "typescript-language-server/lib/cli.js")))
                     (lsp-dependency 'typescript
                                     (list :system (concat "/foo/.yarn/sdks/"
                                                           "typescript/bin/tsserver")))))))))

This two line:

(remhash 'prettier format-all--executable-table)
(puthash 'prettier (concat sdks-directory "prettier/index.js") format-all--executable-table)

Allow me execute prettier installed locally, but I need to do this also.

I would like to replace the string "/foo/.yarn/sdks/" with sdks-directory variable, but I dont not how to capture this inside of with-eval-after-load, (without use same legacy functions).

[Stephan-MC]

nice one....

i did same as you described everything worked welll except for type definitions and go to