Having trouble importing a custom NPM package into Typescript code

I currently have a Typescript web project (2.1.6) compiled using Webpack in VScode. I am incorporating a third-party logging client which I am attempting to upload to NPM and use as a regular dependency.

The existing logging client was originally written in the "old" Typescript syntax with outdated modules, so I refactored it to utilize the import/export syntax. When compiling the refactored code, I am setting the module flag to "umd" and targeting ES5 as the script version. Additionally, I am generating a single d.ts file for the logging client using the dts-generator npm package.

Here is a basic overview of how the Logger.ts file looks after the refactor:

import { LoggerSettings } from "./LoggerSetting";
import { AjaxRequest } from "./AjaxRequest";

// ... more code here
export class Logger {
    // Implementation details
}

The generated d.ts file includes declarations for LoggerSettings and Logger under the "logging-client" module as shown below:

declare module "logging-client" {
    export class LoggerSettings {
        // ...
    }
}

declare module "logging-client" {
    export class Logger {
        // ...
    }
}

In the package.json file, the configuration looks like this:

{
    "name": "logging-client",
    "main": "Logger.js",
    "types": "logging-client.d.ts"
}

However, when trying to import the Logger into my Typescript code, I encounter an error stating "can't find the logging-client module".

How should I go about diagnosing and resolving this issue? Am I missing something in my setup?

Thank you in advance, Avi :)

EDIT: For those interested, here's a link to the git repository showcasing the problem: https://github.com/avrahams1/LogError

Answer №1

To gain insights into the inner workings of your logger-user project, consider compiling it with the --traceResolution flag.

For additional information, visit: module-resolution

Answer №2

After some time away, I finally got around to resolving this issue. Unfortunately, there is no easy way to merge the old and new Typescript syntax together, so I had to completely rewrite the old logger to match the ES6 module syntax.

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

Having trouble with npm install freezing up during the installation of react-native?

Yesterday, my npm install was running smoothly, but now it seems to be hanging for reasons unknown to me. This is a snippet from my package.json: { "name": "Vanitee", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/reac ...

Tips on improving TypeScript code with dynamic variables for successful linting

Is there a proper way to refactor the creation of dynamic variables in TypeScript? I am encountering an error when trying to assign a value to obj.identifier which is not known. What would be the correct approach for refactoring this scenario? interface te ...

Inject Angular 2 component into designated space

I am working on a website that requires a settings dialog to be loaded in a designated area upon clicking a button. The settings dialog is a component that retrieves data from REST endpoints. I am hesitant to simply insert the component and hide it as I ...

Error: When trying to run the server using npm, the program returned the message '. is not a recognized command, either internally or externally

I'm currently facing an issue with Angular and npm that I have not been able to resolve yet. The project I am working on can be found at this GitHub repository. While this code has worked for others, it seems like the problem lies on my end. When I r ...

The Typescript intellisense feature in VS Code seems to be malfunctioning

While setting up typings for my Node server, the intellisense suddenly stopped working. I checked my tsconfig.json file: { "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["-p", "."], "showOutput": "silent", " ...

The "loose" mode is not resolving the issue with the lack of support for the experimental syntax 'classProperties' that is currently disabled

Error Message: The experimental syntax 'classProperties' is currently not enabled Even after trying the suggested solutions, I still encounter the error during re-building. Click here for more information on the experimental syntax 'classP ...

Identifying when ngModel is dirty

In my application, the input fields are populated dynamically based on the API response. Each field has a corresponding set of buttons associated with it, which I only want to show when the field is edited. Here is an image of the form: https://i.sstatic ...

The Node Sass binding for your current environment, which is Linux 64-bit running Node.js 16.x, could not be located

Issue with Module Error encountered in the ./node_modules/sass-loader/dist/cjs.js file: What are the steps to resolve this issue? ...

Angular and Bootstrap work hand in hand to provide a seamless user experience, especially

I have been exploring ways to easily close the modal that appears after clicking on an image. My setup involves using bootstrap in conjunction with Angular. <img id="1" data-toggle="modal" data-target="#myModal" src='assets/barrel.jpg' alt=&a ...

Keeping Node and NPM Current

I am facing an issue on my Mac OSX while trying to update node and npm to the latest version, currently v10.7.0. To achieve this, I first installed homebrew and then ran the following commands in the terminal: brew update brew upgrade node However, even ...

Oops! A mistake was made by passing an incorrect argument to a color function. Make sure to provide a string representation of a color as the argument next time

Encountering an issue with a button react component utilizing the opacify function from the Polished Library The styling is done using styled-components along with a theme passed through ThemeProvider. Upon testing the code, an error is thrown. Also, the ...

Whenever I attempt to execute a command in cmd, this error consistently pops up

npm ERR! Windows_NT 10.0.18363 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\ADMIN\\AppData\\Roaming\\npm\\node_modules\\np ...

Hey Webapp: Access denied - unable to open 'Gruntfile.js' due to permissions

Ever since I switched to Linux, I have been encountering the "Error EACCESS, permission denied" message whenever I try to install any Yeoman generator. fs.js:432 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); ...

What is the best way to set up the parser and plugins using ESLint's updated flat configuration?

How can ESLint be configured using the new "flat config" system (specifically with the eslint.config.js file) to work seamlessly with both @typescript-eslint/eslint-plugin and /parser? I have been struggling to make ESLint's new configuration system ...

Ways to efficiently populate HTML elements with JSON data

I am working on grasping the concept of functional programming. My understanding so far is that it involves encapsulating everything into functions and passing them around. For instance, in my current example, I am attempting to fetch data from a RESTApi a ...

I encountered a problem where the error "Type '(err: Error) => void' does not possess any properties similar to type 'QueryOptions'" appeared, and I am unsure of the underlying cause

Check out my route for removing a user: https://i.stack.imgur.com/fevKI.png I've set up a route called "/deleteuser" that uses the POST method. It validates the request body for an id and then proceeds to delete the user with that ID from the databas ...

Mapping an array in Typescript using Angular to instantiate a class

I have received data from a web API that resembles the structure below. I am looking for guidance on how to properly map the product array into individual Products. My main objective is to convert the eating_time values into JavaScript datetime format. Cu ...

Using a single package manager for both backend and frontend development - is it possible? (Yarn/NPM)

Before, I relied on NPM for server-side tasks and Bower for frontend. NPM would install packages in the node_modules/ directory, while a .bowerrc file directed package installations to public/lib. Recently, I've made the switch to Yarn from NPM, and ...

Having trouble installing npm? Try running npm install lite-server -g to fix the issue

As soon as I press enter, this message appears. Modified 170 packages, and examined 171 packages in just 12 seconds There are 6 packages seeking funding. To learn more, execute npm fund No vulnerabilities were found ...

methods for closing dialog box without altering UI in angular

I have a list of charts on my workspace page and have implemented a Delete confirmation dialog box for when I want to delete a selected chart. However, I have encountered a strange issue where when the delete dialog box is open and I click the cancel butt ...