Search code examples
javascripttypescriptvisual-studio-codevite

VSCode IntelliSence doesn't know `exports` in package.json

I am using a library called sinuous, and it has a submodule "sinuous/map".

VSCode doesn't know map's type in import { map } from "sinuous/map", but it does in import { map } from "sinuous/src/map".

I am using vite to write frontend vanilla JS with ESM support. When I write import { map } from "sinuous/src/map", vite is not happy:

20:49:07 [vite] page reload user-list.js
20:49:07 [vite] Internal server error: Missing "./map.js" specifier in "sinuous" package
  Plugin: vite:import-analysis
  File: D:/dev/web/neohcpp-z/user-list.js

This is sinuous's file tree:

sinuous
│  package.json
│  README.md
│
├─dist
│      babel-plugin-htm.cjs
│
└─src
        .eslintrc.yml
        babel-plugin-htm.js
        babel-plugin-htm.md
        h.d.ts
        h.js
        htm.js
        hydrate.d.ts
        hydrate.js
        hydrate.md
        index.d.ts
        index.js
        jsx.d.ts
        map.d.ts
        map.js
        observable.d.ts
        observable.js
        observable.md
        shared.d.ts
        template.d.ts
        template.js
        template.md

This is part of the package.json of sinuous (in my node_modules):

{
  "name": "sinuous",
  "version": "0.32.1",
  "description": "🧬 Small, fast, reactive render engine",
  "module": "src/index.js",
  "main": "src/index.js",
  "types": "src/index.d.ts",
  "type": "module",
  "exports": {
    ".": {
      "import": "./src/index.js"
    },
    "./h": {
      "import": "./src/h.js"
    },
    "./babel-plugin-htm": {
      "import": "./src/babel-plugin-htm.js",
      "require": "./dist/babel-plugin-htm.cjs"
    },
    "./htm": {
      "import": "./src/htm.js"
    },
    "./hydrate": {
      "import": "./src/hydrate.js"
    },
    "./map": {
      "import": "./src/map.js"
    },
    "./observable": {
      "import": "./src/observable.js"
    },
    "./template": {
      "import": "./src/template.js"
    }
  },
  "files": [
    "src",
    "dist",
    "!**/test/**"
  ],
  //...
}

So when I import with path, VSCode sees the map.d.ts, but it doesn't when I import with sinuous/map.

To make vite happy, I must import { map } from "sinuous/map" (which is also apparently more graceful), but then VSCode doesn't know the types.

I have used tsconfig.json:

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  }
}

This does make TSC happy, and TSC can see the map.d.ts, and when I import map in .ts files VSCode knows the type of map. But in .js files, it doesn't work.

Solution

  • Maybe this is solved.

    jsconfig.json:

    {
  "compilerOptions": {
    "module": "nodenext"
  }
}

    references: