index.d.ts error TS2307: Cannot find my own module

Question

I am facing a problem that I cannot resolve. I want to share some interfaces and types between my class files.

My repo is something like this:

test
  -> dist/
  -> src/
    -> index.ts
  -> .babelrc
  -> .eslintrc.js
  -> index.d.ts
  -> package.json
  -> tsconfig.json

In index.d.ts :

declare module test { // I've try with 'declare namespace test' but the result is the same
  export interface LabeledValue {
    label: string;
    size: number;
  }
}

If I import LabeledValue in index.ts I get an error and I don't understand the reason: import { LabeledValue} from 'test'; // TS2307: Cannot find module 'test'. import { LabeledValue} from 'test'; // TS2307: Cannot find module 'test'.

src/index.ts

import {LabeledValue} from 'test';

function printLabel(labeledObj: LabeledValue) {
  console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

package.json:

{
  "name": "test",
  "types": "index.d.ts",
  "version": "1.0.0",
  "description": "test",
  "author": "oyabi",
  "license": "MIT",
  "private": true,
  "scripts": {
    "type-check": "tsc --noEmit",
    "type-check:watch": "yarn type-check --watch",
    "build": "npm run build:types && npm run build:js",
    "build:types": "tsc --emitDeclarationOnly",
    "build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --source-maps inline"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "helmet": "^3.21.2",
    "morgan": "^1.9.1",
    "winston": "^3.1.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.2",
    "@babel/plugin-syntax-class-properties": "^7.0.0",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-typescript": "^7.7.2",
    "@babel/runtime": "^7.7.2",
    "@types/express": "^4.17.2",
    "@types/helmet": "^0.0.45",
    "@types/morgan": "^1.7.36",
    "@types/qrcode": "^1.3.4",
    "@typescript-eslint/eslint-plugin": "^2.7.0",
    "@typescript-eslint/parser": "^2.7.0",
    "apidoc": "^0.18.0",
    "babel-core": "^7.0.0-bridge",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-airbnb": "^4.2.0",
    "babel-preset-env": "^1.7.0",
    "eslint": "^6.6.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^6.5.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^23.0.4",
    "eslint-plugin-prettier": "^3.1.0",
    "jest": "^24.8.0",
    "moxios": "^0.4.0",
    "nodemon": "^1.19.4",
    "prettier": "^1.19.1",
    "retire": "^2.0.1",
    "supertest": "^4.0.2",
    "typescript": "^3.7.2",
    "uuid": "^3.3.2"
  }
}

.babelrc

{
  "presets": ["@babel/typescript",
    ["airbnb", {
      "useBuiltIns": "usage"
    }]
  ],
  "plugins": [
    "syntax-class-properties",
    "transform-class-properties"
  ]
}

.eslintrc

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    project: "./tsconfig.json"
  },
  env: {
    node: true,
    jest: true
  },
  extends: [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended",
    "plugin:jest/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  plugins: ["@typescript-eslint", "jest", "import"],
  rules: {
    "import/no-commonjs": "error",
    "import/no-amd": "error",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    "no-underscore-dangle": 0,
    "prettier/prettier": [
      2,
      {
        printWidth: 80,
        singleQuote: true,
        trailingComma: "all"
      }
    ]
  },
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
};

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "include": ["index.d.ts"]
}

My real code is more complicated but you have a good idea of the problem. The error appears in Visual Studio Code and with yarn build (with real code). With this code you can use yarn tsc src/index.ts to show error.

Do you have any idea how I can solve this problem please?

Answer 1

I resolve my problem with the installation ofeslint-import-resolver-typescript and the default configuration.

Answer 2

You are importing using ES imports:

import {LabeledValue} from 'test';

Therefore you need to have an ES module (not namespace/module keywords which are TypeScript modules).

Fix

Your index.d.ts should look like:

  export interface LabeledValue {
    label: string;
    size: number;
  }

A root level export makes the file an ES module and now your ES import will work.

Answer 3

Make sure your file is ended with .ts