The NPM package doesn't function the same way as a console log and does not include

I am facing an issue while trying to create a npm package, as the result differs from what is displayed in the console.

This is a test library built with Vite and VueJS.

Within my project structure, I have folders named .github, node_modules, and src, all residing in the same directory as the package.json file. When I execute npm run build, it generates a dist folder in the root directory that contains the expected .js files.

The problem arises when: Despite excluding the dist directory from GitHub repository using .gitignore, the published package does not include the dist folder during npm publish.

I attempted creating a .npmignore file mirroring the .gitignore but excluding the dist entry. Additionally, my package.json includes dist within the files array.

The output of the GitHub action seems correct:

npm notice 413B   dist/components/icons/vue-theme.es17.js    
...
npm notice total files:    46                                     
npm notice 
npm notice Publishing to https://npm.pkg.github.com with tag latest and default access
+ @mickedplay/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a6a5b5fda4b8b5bdb590e0fee0fee5e4">[email protected]</a>

However, upon installing the package in another project using 

"@mickedplay/vue-theme": "github:mickedplay/vue-theme"
, the node_modules directory only contains README.md and package.json, without the dist folder.

You can view the test repository publicly at: https://github.com/mickedplay/vue-theme

In conclusion, the NPM package fails to incorporate the dist directory despite specified inclusion. What could be missing? Have I overlooked something? Thank you.

javascriptvue.jsnpmpackage

Answer №1

For more information, check out the npm documentation

If you want to specify which files should be included in your package, you can add the following code to your package.json:

{
  "files": [
    "README.md",
    "dist"
  ]
}

This will help ensure that only the specified files are included when publishing your 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

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

issue with webpack-dev-server not refreshing after changes to HTML or Sass files

Here is the layout of my project: \root \webpack.config.js \public \ index.html \ ... \ css \ directives \ views \ dist (webpack output) \app.js ...

javascriptangularjsnpmwebpack

The second function in Vue.js was unable to initialize the data field within data() due to a missing call for assistance

I have very little experience working with vue js. There are two functions that I am using: loadComponentsOfUser() and loadUserId(). The loadComponentsOfUser() function depends on the userID field being loaded by the loadUserId() function. data() { retu ...

javascriptvue.jsmethodsfrontend

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...

javascriptjqueryhtmlcssajax

Leveraging the OR condition in sequelize's where query

I am experiencing challenges using the OR statement in Sequelize database. Below is the code snippet that I have come up with: UserExist(req, res) { const field = req.body.username || req.body.email; const getFieldName = field === req.body.username ? &apo ...

javascriptsqlnode.jssequelize.js

Populating a HTML document with data retrieved from an AJAX request

I have a button that, when clicked, should display the values of a specific user. The code snippet for this functionality is as follows: HTML Button: <button onclick="return getUserDetails(<? echo $user['id']; ?>)" class="btn btn-xs bt ...

javascriptphpajax

Angular 6 is throwing an error stating that the element 'app-action-button' is not recognized

I'm facing an issue while trying to incorporate a component that is shared between modules. Unfortunately, all my attempts have resulted in the same error. Despite searching for solutions in similar questions, I have been unable to resolve this error ...

javascriptangularmodule

The code for the bouncing image isn't functioning properly outside of the JSFiddle environment

I'm having issues with this jQuery snippet in my web application. It works fine on jsfiddle, but not when I add it to my project. Here's the code: $('.myimage').mouseenter(function() { $(this).effect('bounce',500); }); Her ...

javascriptjqueryhtml

applying classes conditionally in Vue.js

Attempting to toggle a class of an element in Vue.js, which I am currently learning. The goal is for the disabled class to be applied when included is not true. A function called toggleClass has been created, but it doesn't appear to be working. Li ...

vue.js

Ensure that all MongoDB write operations have been completed before proceeding with a find operation

I am in need of a store js object that can manage a mongodb collection in a specific way: store.insert(thing); // triggered from a pubsub system without waiting for the insert to complete store.get(); // should return a promise that resolves to the items ...

javascriptnode.jsmongodbasynchronous

Add the current date to the URL to avoid Docker from caching and fetch the most recent commit from Github

I have the following script in my Dockerfile: RUN npm install -g "https://github.com/ORESoftware/r2g?$(date +%s%N)" However, this results in an HTTP 400 error being returned: [docker.r2g] npm ERR! Error encountered: [docker.r2g] npm ERR! /usr/bin/git ...

dockergithubnpmnpm-install

Nested object type checking is not being performed

I have been developing an Angular application and working with two interfaces: IAbc and IXyz. interface IAbc { id: number, name: string } interface IXyz { id: number, value: string | number | Date | IAbc[]; } In my code, I initialize a va ...

javascriptangulartypescripttypestypeguards

ESLint's feature experimentalObjectRestSpread not being applied with expected behavior

ESLint is showing an unexpected token error, specifically error Parsing error: Unexpected token .., and I'm struggling to identify the root cause. In my .eslintrc.js file, I have: module.exports = { extends: "devmountain/react-config" , rul ...

javascriptreactjseslintbabeljs

Sending asynchronous requests to handle data within various functions based on different links

I'm currently facing a major roadblock when it comes to resolving my issues with callbacks. I've gone through resources like How to return value from an asynchronous callback function? and How to return the response from an Ajax call?, among seve ...

javascriptajaxcallback

Looking for tips on how to add password protection to any form field? Share your suggestions!

How can I create a password-protected field (select box - dropdown) in a form? When the user clicks on the dropdown, a prompt will appear asking for a password. If the correct password is entered, then the user can proceed to select a value from the dropd ...

javascriptphpjqueryhtmlforms

The image in the HTML is currently positioned at the bottom, but I would like it to be

this is what it looks like: https://i.sstatic.net/VLqN7.png I need it to be at the top next to the first card. <!-- top nav--> <nav class="navbar navbar-expand-lg navbar-light" style="background-color:white"> <a class="navbar-brand" ...

javascripthtmlcss

Updating a child component in React while applying a filter to the parent component

Although I've come across this question before, I'm struggling to comprehend it within my specific scenario. I'm currently using a search bar to filter the data, which is functioning properly. However, the image is not updating. The URL bei ...

javascriptreactjs

Utilize lazy loading to trigger secondary API calls once all data from the initial API call has been fully loaded in React js

Looking for a way to display data from multiple .json files with lazy loading in the browser using React JS? The goal is to initially load and show all the data from the first .json file, and then make an API call to fetch data from the second .json file ...

reactjsnpmlazy-loadingnpm-lazy

Can dynamic CSS imports be unloaded in a React application?

I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...

javascriptcssreactjs