Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I am facing a problem that I cannot resolve. I want to share somes interfaces and types between my classes 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've got an error and I don't understand the reason: 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 appear 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?

like image 393
Oyabi Avatar asked Nov 15 '19 01:11

Oyabi


People also ask

Can not find module TS?

The "Cannot find module or its corresponding type declarations" error occurs when TypeScript cannot locate a third-party or local module in our project. To solve the error, make sure to install the module and try setting moduleResolution to node in your tsconfig. json file.

What is declare module in TypeScript?

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).

Can not find module in angular?

To solve the error "Cannot find module '@angular/core'", make sure you have installed all dependencies by running the npm install command, set the baseUrl option to src in your tsconfig. json file and restart your IDE and development server. Copied!


1 Answers

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

like image 64
Oyabi Avatar answered Sep 16 '22 20:09

Oyabi