CODEWITHSUNDEEP
javascripttypescripttypescript-typingstsconfig
SFernando
SFernando

Reputation: 1124

Can not find custom definition typescript v3

Typescript is giving me this error when I run my webpack dev server

ERROR in ./src/components/allowcated-resources/AllowcatedResources.tsx
Module not found: Error: Can't resolve 'my-scheduler' in 'mypath\allowcated-resources'
 @ ./src/components/allowcated-resources/AllowcatedResources.tsx 3:0-41 77:20-28
 @ ./src/components/App.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx

here is the tsconfig

{
  "compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "allowUnusedLabels": false,
    "allowUnreachableCode": false,
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "target": "es5",
    "sourceMap": true,
    "lib": ["es6", "dom"],
    "typeRoots": ["./node_modules/@types", "./typings"],
    "baseUrl": ".",
    "paths": {
      "my-scheduler": ["typings/my-scheduler"]
    },
    "plugins": [
      {
        "name": "typescript-tslint-plugin",
        "alwaysShowRuleFailuresAsWarnings": false,
        "ignoreDefinitionFiles": true,
        "configFile": "./tslint.json",
        "suppressWhileTypeErrorsPresent": false
      }
    ]
  },
  "include": ["./src/**/**/*"],
  "exclude": ["node_modules", "typings"]
}

I have directory called 'typings' in the root and the hierarchy is 'typings/my-scheduler/index.d.ts'

index.d.ts

declare module 'my-scheduler' {
  // export members
  export class TimeSpan { // }
}

I can locate to this typing on clicking vs code import

import { TimeSpan } from 'my-scheduler';

but when I run web pack server It is giving this

Module not found: Error: Can't resolve 'my-scheduler'

What is the reason for that?

Upvotes: 0

Views: 46

Answers (1)

Aluan Haddad
Aluan Haddad

Reputation: 31803

You are mixing two conflicting module resolutions mechanisms, ambient external module declarations and standard module resolution based on resolution mechanisms such as --paths and --moduleResolution.

Ambient external module declarations, which can be detrimental because they pollute the global namespace of module declarations have the form

// it doesn't matter where this file is or what it's called, as long as TypeScript includes it

declare module 'my-scheduler' {
  export class TimeSpan {}
}

Such declarations are not resolved based on the location of their containing file or any other module resolution conditions. They become available for import whenever the file containing the declaration is included in TypeScript's compilation context.

The other, and preferable form is to use module resolution, such as paths are resolved just like any other module and do not pollute the global namespace of module declarations, and have the form

export declare class TimeSpan {}

Therefore, since you are using paths, you want to use the latter form, which is just a normal module

export declare class TimeSpan {}

Upvotes: 1

Related Questions