Typescript resolve types for private scoped package

Question

I have a package hosted in an Azure Artifacts npm feed, scoped to @company, e.g. to add the package we use yarn add @company/package. This package is a typescript project, that when compiled also includes type files.

When using it, the exposed types are not being resolved, and compilation fails.

Example of build:

• build
  • index.js
  • index.d.ts

Example package.json

{
  "name": "@company/package",
  "version": "0.0.5",
  "module": "./build/index.js",
  "types": "./build/index.d.ts",
  "scripts": {
    "build": "rimraf ./build && tsc -p tsconfig.json --noEmit false",
    "prepublish": "npm run build"
  },
  "devDependencies": {
    "typescript": "^3.9.7"
  },
  "files": [
    "build/"
  ]
}

At the same level as the package.json, there is a .npmrc file, and a tsconfig.json file.

.npmrc

@company:registry=https://company.pkgs.visualstudio.com/_packaging/company-npm/npm/registry/
                        
always-auth=true

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "ES2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "preserve",
    "preserveConstEnums": false,
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": true,
    "skipLibCheck": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "noUnusedLocals": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "outDir": "build/esm",
    "declaration": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/*",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "src/__mocks__/Api.ts"
  ]
}

We can install public npmjs packages and @types with no problem, and the @company/package also works (an @company folder appears in node_modules, and include the package code, including the index.d.ts file).

When referencing the code from our package (which happens to be react components), it shows errors stating JSX element type 'Button' does not have any construct or call signatures, which is a result of the typescript typings not resolving properly.

We have tried altering the tsconfig.json of the project using the scoped package, so that the type roots also include the @company scope, e.g.

"typeRoots": [
      "node_modules/@types",
      "node_modules/@company"
],

We have also tried various iterations of installing the types (which haven't been manually published, I just thought it might work as part of the npm publish) yarn add -D @company/@types/package @types/@company@package but both commands return the following error;

yarn add v1.22.0
warning package.json: No license field
warning [email protected]: No license field
[1/4] Resolving packages...
error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads ssh://[email protected]/types/company-react-components.git
Directory: /mnt/c/Users/user/source/repos/project/src/project.Ui
Output:
Host key verification failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

How do you properly reference types published as part of a scoped package? If it is being referenced properly, why are the types not resolving?

Answer 1

I know this is an old question, but I just spent half a day banging my head agaist the wall before getting it to work.

You need to name your package @myorg/mypackage to get npm to use the scope @myorg:registry=https://pkgs.dev.azure.com/... that you have defined in .npmrc.

To make TypeScript happy, and to not have to manually tweak the typeRoots, you can install the package, and alias it back into @types/myorg__mypackage naming:

npm i @types/myorg__mypackage@npm:@myorg/mypackage@latest --save-dev

You'd probably want to document that in the readme, as it's not at all intuitive for the poor souls that want to consume the package.