Having trouble locating a module after creating a custom module for the library

Apologies for this odd question, but I'm having a strange issue that I can't seem to pinpoint.

I am trying to create a module for a library I have installed called 'scroll-to'. However, when I compile my code to JavaScript and hover over the import, it says "Could not find a declaration file for module 'scroll-to'." along with some other lines.

Here is my 'scroll-to.d.ts':

declare module "scroll-to" {
const scrollTo: (x: number, y: number, options: {
    ease?: string,
    duration?: number
}) => void

export default scrollTo

}

'app.ts':

import scrollTo from 'scroll-to' 

scrollTo(500, 1200, {
ease: 'out-bounce',
duration: 1500
});

'app.js' in '/dist':

import scrollTo from 'scroll-to';
scrollTo(500, 1200, {
ease: 'out-bounce',
duration: 1500

});

'tsconfig.json':

{
"compilerOptions": {
    "outDir": "dist",
    "target": "ES2021",
    "noEmitOnError": true,
    "strict": true,
    "declaration": true,
    "moduleResolution": "Node",
    
},
"files": [
    "src/app.ts"
],
"include": [
    "src/types/**/*"
]

}

'package.json':

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.1.6"
  },
  "dependencies": {
    "scroll-to": "^0.0.2"
  }
}

Additionally, I have imported my script with a type="module" in the HTML. I'm at a loss as to what could be going wrong.

Answer №1

Implementing your custom package locally

If you are creating a custom package within your project directory, it's important to note that Typescript typically looks for type definitions within the `node_modules/**/@types` and `node_modules/@types` directories only. This means that your `d.ts` file may not be automatically detected by Typescript.

To ensure that Typescript recognizes your custom types file, you can use the `typeRoots` configuration option in your `tsconfig.json`. However, keep in mind that this will override the default behavior.

Add the following code snippet to your `tsconfig.json`:


{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

Check if this resolves the issue.


Installing your custom package

If you encounter issues with unresolved types after installing your custom package, it is likely because the type declarations were not included during packaging.

Make sure that the `types` property in your custom package's `package.json` is properly set, and that you include the `.d.ts` files in the `files` property of your package's configuration. Refer to the Typescript documentation for more information on including declaration files in your npm package.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining and grouping objects in JavaScript using ES5

I have an object structured like the following: { "User 1":[ {"count":"1","stage":"A","jCount":"10","name":"User 1","stageId":"A1"}, {"count":"8","stage":"B","jCount":"10","name":"User 1","stageId":"B1"}, ], "User 2":[ {"count":"7","stage":"C","jCount":" ...

Preserving the scroll position with jQuery

One of my java functions involves creating checkboxes. When a checkbox is clicked, it triggers a backend function. However, I noticed that whenever the checkbox is clicked, the scrollbar position moves to the top of the page. I want to prevent this from ha ...

Import a JSON file into TypeScript declaration files (*.d.ts)

I am currently working on a declaration file where I need to establish a global type that is specifically tied to a predetermined list of string phrases. These string phrases are part of property keys within an object located in a JSON file. I have a coup ...

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Displaying animated indicator or spinner gifs, then hiding them, is an effective way to communicate to the user that their action is being processed. This helps to assure the user that something is happening while they wait for the action to complete, espe ...

How to access a nested child within a child in JSON using jQuery/JS?

I am curious to know if it is possible to loop through the nested elements in this JSON structure: [ { "name": "Hello", "views": 10, "subMovie": [ { "name": "World", "views": 10, "subMovie": [ { ...

How to Implement a ForwardedRef in Material-UI using Typescript

Currently, I have implemented a customized checkbox that is being forwarded as a component to a DataGrid. const CustomCheckbox = ({ checkboxRef, ...props }: { checkboxRef: React.ForwardedRef<unknown>; }) => ( <Checkbox {...props} ...

Node.js - Passport authentication consistently results in redirection to failure route

I am currently working on creating a login form using passportJs, but I keep encountering the issue of failureRedirect. Despite searching on stack overflow for a solution, I have not found the correct answer yet. Below is my code: Here is how I am crea ...

Exploring the process of accessing an object's key in the DOM through Angular by utilizing its variable name

Within my controller, I have a function that adds a variable called comments to the scope. $scope.showComments = function(id){ dataService.getComments(id).then(function(data){ $scope.comments[id] = data.comments; console.log($scope.co ...

Is there a feature in Vue that is comparable to Svelte's destiny operator?

In svelte, whenever the value of someVar changes, this one-liner will be executed. $: console.log({someVar}); Referred to as a reactive declaration by Svelte, the code following the $ symbol, known as the "destiny operator," will run every time any variab ...

HTTP-Proxy load balancing techniques

Currently exploring the http-proxy module. From what I gathered, it balances between two different hosts with the same port. My question is, can it also balance between two different ports while using the same hosts (for example, both hosts having the sa ...

What is the best way to iterate through one level at a time?

Imagine a scenario where the structure below cannot be changed: <xml> <element name="breakfast" type="sandwich" /> <element name="lunch"> <complexType> <element name="meat" type="string" /> <element name="vegetab ...

Server side props in NextJS 13 not being invoked

Recently, I started exploring the latest version of nextJS - version 13. However, while experimenting with it, I noticed that the getServerSideProps function was not pre-rendering the page props as expected. This is my first attempt at using this feature, ...

The sidebar vanishes when you move your cursor over the text contained within

My issue is that the side menu keeps closing when I hover over the text inside it. The "About" text functions correctly, but the other three don't seem to work as intended. Despite trying various solutions, I am unable to identify the root cause of th ...

Avoid retrieving information from Firestore

Hey everyone, I'm struggling to figure out why I can't retrieve data from Firestore. Even after carefully reading the documentation and double-checking the path, I still can't seem to make it work. I'm working with Ionic framework. getC ...

Error message: ".then uncaught in promise with undefined value"

myFunction() { this.initiateTSOAddressSpace().then(this.launchApp); return "placeholder text"; } sendData(contentURL: string) { let response = fetch(contentURL, { method: "POST", credentials: "include", headers: {"Accep ...

What is the best way to render CSS files in express.js?

My file organization looks like this: node_modules structures {HTML Files} styles {CSS Files} app.js package-lock.json package.json I have already imported the following: const express = require('express'); const app = express(); const p ...

Tips for populating two drop-down menus within a row that is created dynamically

Issue: I'm unable to populate drop down lists in dynamically generated new rows. $('#Title_ID option').clone().appendTo('#NewTitle_ID'); $('#Stuff_ID option').clone().appendTo('#NewStuff_ID'); These lines handl ...

Save and showcase an array as individual objects within local storage

I am looking to input data using a specific product ID and save it locally. Upon clicking the button, the data should be stored in the local storage. It is possible for a single product to have multiple filenames associated with it. For the customer, if t ...

Another way to display mjpeg using an img tag and Basic Authentication

Recently, there was an update in Chromium that included a new security measure. This update now prohibits the use of basic authentication in elements like the source attribute of an Image element. For more information on this change, you can visit https:// ...

A guide on how to efficiently retrieve a string within a function in a native module in a React Native

I'm currently tackling a function related to the native elements of iOS that is coded in Objective-C, My goal is to create a method that will output a string in Objective-C, However, I've hit a roadblock while trying to implement this method: T ...