The index declaration file has not been uploaded to NPM

After creating a Typescript package and publishing it on NPM, I encountered an issue with the declaration files not being included in the published version. Despite setting declaration: true in the tsconfig.json, only the JavaScript files were being published, leading to errors when trying to install the package in another project.

Below is my package.json file configuration:

{
  "name": "@Organisation/lib",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    //removed for brevity
  },
  "keywords": [],
  //remaining configuration removed
}

Along with that, here is an excerpt from my tsconfig.json file:

{
   //compilerOptions details removed
}

I also included a .gitignore file to exclude certain directories and files from the repository, but noticed that even though the dist directory was being ignored, the index.js file within it was still getting published, while the .d.ts files were left out.

The structure of the directory looks like this:

my-package/
├─ node_modules/
├─ dist/
│  ├─ models/
│  ├─ index.d.ts
│  ├─ index.js
│  ├─ index.js.map
├─ src/
│  ├─ models
│  ├─ index.ts
├─ .gitignore
├─ package.json
├─ tsconfig.json

Answer №1

To ensure only specific files are published to npm, utilize the files key in your package.json. This way, only items listed within the files array will be included, eliminating the need for a .npmignore file.

For example:

  "main": "dist/cjs/index.js",
  "module": "dist/esm/untilted.esm.js",
  "unpkg": "dist/unpkg/untilted.js",
  "types": "dist/types/",
  "files": [
    "dist",
    "src"
  ],

In this scenario, the dist directory contains compiled files, while src holds the source code necessary for source maps. These are the only files that will be published to npm, along with essential files like package.json, README, LICENSE, and more.

Answer №2

Execute npm publish command inside the dist directory.

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

Froala Editor: Innovative external toolbar that pops up when the button is clicked

In our project, we are implementing the latest version of Froala and aim to configure it so that the toolbar is activated by a separate external button, similar to Gmail where the editor initially does not display a toolbar. I attempted to modify the &apo ...

Error encountered during installation of npm module in Vagrant, Puppet and nodejs module collaboration

Here is the manifest I am currently using: include nodejs package { 'serve': ensure => latest, provider => 'npm', } I have incorporated the puppetlab node.js module into my project: This is a snippet from my Vagrantfile: ...

Issue with Ionic2 radio button selection not persisting

I'm currently working on implementing Radio Alerts within an Ionic2 application. To create a radio alert, I used the following code snippet: let alert = this.alertCtrl.create(); alert.setTitle('Select a Radio Alert'); alert.addInput({ typ ...

Transferring information from Python to JavaScript and receiving a response

Currently, I am working on sending JS data, particularly images that have been collected by a Python file. My goal is to send these images from Python to JS so that JS can perform a certain action (which I will be coding). Afterwards, the final result ne ...

Express.js does not display console.log messages while routing

Just starting to explore Express and its middleware functions. var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('id: ' + req.params.id + ' and name: ' + req.param ...

Loop through an array of div IDs and update their CSS styles individually

How can I iterate through an array of Div IDs and change their CSS (background color) one after the other instead of all at once? I have tried looping through the array, but the CSS is applied simultaneously to all the divs. Any tips on how to delay the ...

Alert received upon selecting the React icon button

In the login code below, I have utilized FaEye and FaEyeSlash react icons. However, every time I click on them, a warning message pops up. To avoid this issue, I attempted to switch from using tailwindcss to normal CSS. Login.jsx import { useContext, useS ...

Rearranging the order of Div elements within a main container using JavaScript DOM manipulation

How can I move elements within a div from the start to the end in the same div, for example, changing the order from 1-2-3 to 2-3-1? My code: const cards = document.querySelectorAll(".card"); const firstCard = document.querySelectorAll(".card")[0].inne ...

Why is it important to have specific property names?

Here is some code and HTML for triggering a radio button. It seems to work fine without any issues, but I'm wondering if the presence of a name property is necessary. When I remove the name property, it stops working. Can someone explain why? <inp ...

Can you explain the mechanics behind Angular Component CSS encapsulation?

Is it possible to avoid CSS conflicts when using multiple style sheets? Consider Style 1: .heading { color: green; } And Style 2: .heading { color: blue; } If these two styles are applied in different views and rendered on a layout as a Partial Vi ...

Tips for stopping a Node.js for loop if it runs for more than 20 seconds

Imagine a situation where I have a for loop performing some actions, and I want to terminate the loop if it takes longer than 20 seconds to complete. async function mainFunc(){ for (let step = 0; step < 5; step++) { // Executes a complex op ...

Failure of AJAX HTML function to retrieve value from textarea

I am displaying data in the first three columns of a table, with the last column reserved for user feedback/comments. However, when the form is submitted, the values in the textarea are not being posted. The table has 6 rows. The Sample TR: <tr> &l ...

Encountering an issue with compiling Angular due to a Type Inference error

interface Course { name: string; lessonCount: number; } interface Named { name: string; } let named: Named = { name: 'Placeholder Name' }; let course: Course = { name: 'Developing Apps with Angular', lessonCount: 15 }; named = ...

Tips for displaying the date in 13-digit Unix Timestamp format using JSpreadSheet

I am faced with a challenge involving data that is stored in Unix Timestamp format, which I need to display as a readable date (e.g. YYYY/MM/DD) in JSpreadSheet ("jspreadsheet-ce"). Currently, the data appears as a 13-digit number and looks unattractive. ...

Clicking on the button will instantly relocate the dynamically generated content to the top of the page, thanks to Vue

Here is some dynamically generated content in the left column: <div v-for="index in total" :key="index"> <h2>Dynamic content: <span v-text="index + ' of ' + total"></span></h2> </div> There is also a butt ...

JavaScript For/in loop malfunctioning - Issue with undefined object property bug

Currently, I am tackling a basic For/in loop exercise as part of a course curriculum I am enrolled in. The exercise involves working with a simple object containing 3 properties and creating a function that takes two parameters - the object name and the it ...

Why is the Axios instance/function not being passed the argument?

I am currently working on refactoring a next.js App that has a functioning axios call. However, I have encountered an issue with my new function not receiving arguments. The problem consists of two main components: my next.js page and an external custom m ...

Extracting multiple values using the .find method in JQUERY / JavaScript

I'm facing an issue with my JSP page form. When I submit the form, it generates a JSON string which is sent via AJAX post. The problem arises when I try to extract multiple values from the form using the following method: .find('input[name=ite ...

Safari users encountering invalid dates generated by Moment Js library

Can anyone explain why I am seeing "invalid date" in Safari, but it works fine in other browsers? moment('01/01/2023 11:44:00.000 AM').tz(time_zone, true).format('hh:mm:ss:SS A z') chrome https://i.sstatic.net/PeFBp.png safari https ...

Can I specify which modal or component will appear when I click on a component?

Working on a small Angular 5 project, I have a simple component that represents a food product shown below: [![enter image description here][1]][1] This component is nested within my main component. When this component is clicked, a quantity component/m ...