Import detection error with neovim-lsp and tsserver

Question

I recently installed typescript-language-server with neovim-lsp to code my react project, but neovim does not detect shortest module import.

enter image description here

Neovim : 0.8.0 + nvChad

My LSP configuration :

local present, lspconfig = pcall(require, "lspconfig")

if not present then
  return
end

require("base46").load_highlight "lsp"
require "nvchad_ui.lsp"

local M = {}
local utils = require "core.utils"

-- export on_attach & capabilities for custom lspconfigs

M.on_attach = function(client, bufnr)
  client.server_capabilities.documentFormattingProvider = false
  client.server_capabilities.documentRangeFormattingProvider = false

  utils.load_mappings("lspconfig", { buffer = bufnr })

  if client.server_capabilities.signatureHelpProvider then
    require("nvchad_ui.signature").setup(client)
  end
end

M.capabilities = vim.lsp.protocol.make_client_capabilities()

M.capabilities.textDocument.completion.completionItem = {
  documentationFormat = { "markdown", "plaintext" },
  snippetSupport = true,
  preselectSupport = true,
  insertReplaceSupport = true,
  labelDetailsSupport = true,
  deprecatedSupport = true,
  commitCharactersSupport = true,
  tagSupport = { valueSet = { 1 } },
  resolveSupport = {
    properties = {
      "documentation",
      "detail",
      "additionalTextEdits",
    },
  },
}

lspconfig.sumneko_lua.setup {
  on_attach = M.on_attach,
  capabilities = M.capabilities,

  settings = {
    Lua = {
      diagnostics = {
        globals = { "vim" },
      },
      workspace = {
        library = {
          [vim.fn.expand "$VIMRUNTIME/lua"] = true,
          [vim.fn.expand "$VIMRUNTIME/lua/vim/lsp"] = true,
        },
        maxPreload = 100000,
        preloadFileSize = 10000,
      },
    },
  },
}

return M

local on_attach = require("plugins.configs.lspconfig").on_attach
local capabilities = require("plugins.configs.lspconfig").capabilities

local lspconfig = require "lspconfig"
local servers = {
  "html",
  "intelephense",
  "solargraph",
  "cssls",
  "jsonls",
  "tsserver",
  "denols"
}

for _, lsp in ipairs(servers) do
  lspconfig[lsp].setup {
    on_attach = on_attach,
    capabilities = capabilities,
  }
end

I use default tsserver configuration :

https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tsserver

In my react Project, I use Vite react-ts template with default configuration :

tsconfg.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

what to do so that my configuration is correct and that the imports are correctly detected ?

Thank you

I think it's a configuration problem, I tried a lot of things, but I admit I was quickly wide.

Answer 1

If you'd like to use both you can set them to load based on the files in the parent dir. Add this under your for loop and remove "denols" from your servers map.

lspconfig.denols.setup {
  root_dir = lspconfig.util.root_pattern("deno.json", "deno.jsonc"),
  on_attach = on_attach,
  capabilities = capabilities
}

If you want you can also do something similar for the typescript lsp (tsserver)

lspconfig.tsserver.setup{
  on_attach = on_attach,
  capabilities = capabilities,
  root_dir = lspcofig.util.root_pattern("package.json", "tsconfig.json", "jsconfig.json")
}

This should help resolve the conflicts when using both, just make sure that when you are using Deno you have a deno.json or deno.jsonc in the root dir for the lsp to work correctly.

Answer 2

I solved my problem, there was a conflict between tsserver and denols, I deactivated denols given that I am in a node project.

local on_attach = require("plugins.configs.lspconfig").on_attach
local capabilities = require("plugins.configs.lspconfig").capabilities

local lspconfig = require "lspconfig"
local servers = {
  "html",
  "intelephense",
  "solargraph",
  "cssls",
  "jsonls",
  "tsserver",
  -- "denols",
  "tailwindcss"
}

for _, lsp in ipairs(servers) do
  lspconfig[lsp].setup {
    on_attach = on_attach,
    capabilities = capabilities,
  }
end