Unable to locate the TypeScript library module within the specified directory

I have been developing a TypeScript NPM package by following instructions from this tutorial

You can check out the code here

After publishing the NPM package, it is available here

Installation of the package is simple using

npm install loglevel-file-logger

To use it in a TypeScript project, just import like this

import setupLogger from 'loglevel-file-logger'

Everything works smoothly. However, when trying to import a non-index file from the package such as

import FetchBlobWriter from 'loglevel-file-logger/FetchBlobWriter'

TypeScript gives an error

[ts] Cannot find module 'loglevel-file-logger/FetchBlobWriter'.

If you look into the compiled JS code, you will notice that the typing file for FetchBlobWriter does exist at js/FetchBlobWriter.d.ts

Any thoughts on why TypeScript is unable to locate the module even though the .d.ts file is present?

typescriptnpmpackage

Answer №1

One reason for this behavior is that when you import from the root, like using loglevel-file-logger, TypeScript will search in 

node_modules/loglevel-file-logger/index.(js|ts)
or look at the module's main property in the package.json. If the main property is set to dist/index.js, then it is considered correct.

However, if you intend to import a submodule, the path resolution is done from the root folder of the module, not necessarily from the folder specified in the main property. This means that 

'loglevel-file-logger/FetchBlobWriter'
would try to resolve to 
node_modules/loglevel-file-logger/FetchBlobWriter
. Since the submodule is actually within the dist folder, TypeScript rightly indicates that there is no such module/file, as it looks inside the dist folder. So, importing from 
'loglevel-file-logger/dist/FetchBlobWriter'
should solve the issue.

If you'd like more insights into how Node.js resolves paths, check out this article:

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

Tips on saving stimulsoft report js onto a server using Angular

I am working on a report designer component and have assigned a method to the onSaveReport event. However, I am encountering an issue where the member of my component is showing as undefined. options: any; designer: any; public document: Report ...

javascriptangulartypescriptstimulsoft

Having trouble retrieving accurate JSON data from an excel workbook

Currently, I am utilizing the npm module xlsx for the purpose of writing and reading JSON data. My goal is to take this JSON data and write it into an Excel file: { "name": "John", "class": 1, "address" : [ { "street": "12th Cross", "city": "London" }, { ...

javascriptnode.jsjsonexcelnpm

Updating the DOM after making changes with Maquette involves calling the `renderMaquette

In a previous discussion, I expressed my desire to utilize Maquette as a foundational hyperscript language. Consequently, avoiding the use of maquette.projector is essential for me. However, despite successfully appending SVG objects created with Maquette ...

javascripttypescriptsvgvirtual-dommaquette

When trying to run the npm start command, an error occurs referencing type

I am facing difficulties running my project locally due to broken dependencies, and I'm struggling to find a solution. When attempting to install the node modules, I encountered errors, so I made changes to the following dependencies: "codelyze ...

angularnpmlodashnpm-start

Is Survey JS integrated into a React App utilizing version 17.0.1?

As a beginner developer, I am facing a challenge while trying to integrate the Survey Creator tool from Survey JS into my React App. The issue arises as I am using Material UI in my application. When attempting to switch to version 16.5.0 of react and re ...

reactjsnpmreact-domsurveyjs

Is there a similar feature to npm link in composer for PHP projects?

During my JavaScript module development process, I utilize npm link to easily install my local version into projects that require the module as a dependency. This method provides a seamless workflow. Although not quite as ideal as TDD, this approach simpl ...

phpnpmcomposer-phpdependency-managementnpm-link

In the main file for the "use client" feature, components require serializable props. The usage of "setShow" is not valid and may cause errors (ts(71007))

While working in my VS Code editor with Typescript and React, I encountered a warning/error related to prop-namings. Props must be serializable for components in the "use client" entry file, "setShow" is invalid.ts(71007) For instance ...

reactjstypescriptnext.jsreact-props

A robust method for converting object properties to their specified InstanceType or leaving them unchanged

I am trying to create a method named Instantiate in TypeScript that will accept an object of any type. If the object contains any properties that are classes, then the method should instantiate those classes and the return type of those properties should ...

typescript

Tips for inserting a string into an array nested within an object stored in a state array

Currently, the variable sizeVariant is a string array and I am trying to append strings to it using an onClick event. The function findIndex seems to be working fine. However, there seems to be an issue with the concatenation section. It appears that using ...

javascriptreactjstypescripttsx

Error alert: Ionic detected a SyntaxError due to a missing closing parenthesis on the emulator

When using Ionic, I encountered an error Uncaught SyntaxError: missing ) after argument list on the emulator, but everything runs smoothly with the serve command: Fetch(what, callbackf) { return this.woo.getAsync(what).then( (result)=> { th ...

cordovaangulartypescriptionic-frameworkionic2

Unable to execute "npm run build" command for a React project on Mac M1 due to compatibility issues

We are currently facing an issue with our React project that builds successfully on an Intel Mac, but fails to build on a Mac M1. When running npm run build, the only response we get is: The build failed because the process exited too early. This probably ...

reactjsmacosnpmapple-m1

The npm installation encountered an error: module 'read-package-tree' cannot be found

When trying to run the npm install command on a Windows 10 machine, an issue was encountered: The error message received is as follows: C:\ >npm install npm ERR! code MODULE_NOT_FOUND npm ERR! Cannot find module 'read-package-tree' npm E ...

node.jsnpm

Exploring the fusion of different interfaces and props in React using typescript

I have designed an interface as shown below, representing the "base button". export interface ButtonProps { backgroundColor?: Colors, children?: React.ReactNode | JSX.Element, style?: CSSProperties, disabled?: boolean, onClick?: () => ...

reactjstypescript

Transform an array of Boolean values into a string array containing only the values that are true

Suppose we have an object like the following: likedFoods:{ pizza:true, pasta:false, steak:true, salad:false } We want to filter out the false values and convert it into a string array as shown below: compiledLikedFoods = ["pizza", "steak"] Is t ...

javascripttypescript

What steps can be taken to resolve the dependency problem with npm installation?

Attempting to incorporate npm install react-material-ui-carousel --save into my react project has presented a challenge. Upon installation, I encountered a dependency tree issue. Even after deleting the lock and npm modules files, followed by running npm ...

javascriptreactjsnpmmaterial-ui

Is it time to upgrade NodeJS and NPM to the latest versions?

Is it possible to update Node.js to the latest version? What is the best option for updating Node.js? Can npm handle the updates? Or do I need to reinstall both Node and npm for the newer versions? ...

node.jsnpm

What is the best way to import a reusable component from the theme folder in a React Native project?

I'm interested in importing a Button component that can be reused from the theme folder. The path to the Button component is as follows: \app\theme\components\Button.ts Here is the code for Button.ts: import { typography } from ...

androidtypescriptreact-native

Having difficulty resolving sub-modules using webpack

Currently, I am trying to set up the @microsoft/signalr npm package with webpack by importing the module using import * as signalR from '@microsoft/signalr'. However, I encountered an error message indicating that webpack is unable to resolve the ...

typescriptnpmwebpacksignalr

"Exploring the Intersection of Meteor, NPM Packages, and Fiber Callbacks

I am currently utilizing request and cheerio to extract specific content, particularly a quote, from a website. Here is the code snippet ( server.js ) : q = new Mongo.Collection('quotelist'); postList = new Mongo.Collection('quotes&apos ...

javascriptnode.jsmongodbmeteornpm

What is the correct way to insert a line break into this code?

Below is the script I typically use to run grunt on a "global" scale. This script is in a bash shell and Stack Overflow has requested more context, so I am adding the return character to make it operate more quietly when running beast watch. beast() { c ...

bashgruntjsnpmjshint