Unable to locate a custom definition for TypeScript v3

Question

Unable to locate a custom definition for TypeScript v3

When I am running my webpack dev server, Typescript is generating this error:

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

This is the content of my tsconfig file:

{
  "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 a directory named 'typings' in the root folder and it contains 'typings/my-scheduler/index.d.ts'

The content of index.d.ts file is as follows:

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

Even though I can locate this typing by clicking on vs code import,

import { TimeSpan } from 'my-scheduler';

However, when I run the web pack server, it gives me the following error:

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

What could be causing this issue?

javascript typescript typescript-typings tsconfig

Answer 1

Answer №1

You seem to be conflating two different methods of resolving modules - ambient external module declarations and standard module resolution using mechanisms like --paths and --moduleResolution.

Ambient external module declarations can cause issues by cluttering the global namespace with module declarations, and they typically look like this:

// This declaration will be available for import in TypeScript regardless of its file location

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

These declarations are not tied to specific file locations and become accessible once included in TypeScript's compilation context.

On the other hand, standard module resolution via paths ensures cleaner imports without polluting the global namespace, and it looks something like this:

export declare class TimeSpan {}

It is recommended to stick with the latter method when using paths as it functions like a regular module.

export declare class TimeSpan {}

Answer 2

You seem to be conflating two different methods of resolving modules - ambient external module declarations and standard module resolution using mechanisms like --paths and --moduleResolution.

Ambient external module declarations can cause issues by cluttering the global namespace with module declarations, and they typically look like this:

// This declaration will be available for import in TypeScript regardless of its file location

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

These declarations are not tied to specific file locations and become accessible once included in TypeScript's compilation context.

On the other hand, standard module resolution via paths ensures cleaner imports without polluting the global namespace, and it looks something like this:

export declare class TimeSpan {}

It is recommended to stick with the latter method when using paths as it functions like a regular module.

export declare class TimeSpan {}

Unable to locate a custom definition for TypeScript v3

Answer №1

Similar questions

The issue with Ajax success not functioning properly within nested .ajax calls

Cleanse the email using express-validator, but only if it is recognized as an email format; otherwise, disregard

Compiling Vue with TypeScript: Troubleshooting common errors

The argument represented by 'T' does not align with the parameter represented by 'number' and therefore cannot be assigned

How to Transfer a jQuery Variable to a PHP script within a Modal using AJAX

The background image shifts dynamically with a parallax effect as the page is scrolled

Is there a need to minify if the data will be compressed through gzip during

Steps to create a clickable row with color change in Angular 4

Tips for Ensuring the Observable Completes Before Subscribing

How to initialize data in Vue.js components

Tips on how to showcase JSON data retrieved from a RESTful API using JavaScript or jQuery

Steps to activate ng-pattern exclusively when the field has been interacted with:

Passing Props in Material-UI v5xx with ReactJS: A Beginner's Guide

How can one leverage Node JS to effectively manage events?

Accessing a model's field within an Ember.js each loop

Issue with checkbox click event binding in Angular 6 not functioning as expected

Creating a static Top Bar that remains unaffected by page refreshing using Ajax or any other method can be achieved by implementing JavaScript and CSS

Is it secure to send the one-time authorization code for Google+ Hybrid server-side flow over HTTP?

Efficiency levels of reach = within angular instructions

Having issues with rendering my images on Nuxt framework