We have a self-hosted GitLab (15.5.4) and I've configured everything we needed for publishing npm packages.
A CI/CD pipeline that properly creates the entry in the Package Registry.
The problem is that when I pull the package [npm i #scope/lib] (It doesn't change if I cast the auth token in the package.json or I pass through an environment variable as suggested in the documentation) the unwanted result is that the #scope/lib doesn't have the dist/ folder in it!! [node_module/#scope/lib/].
If I browse to the Package Registry and manually download the .tgz file I can see that the dist/ folder is present.
I've played around a bit with the .npmignore and "prepublish" script but I had no success and literally have no glue why this is happening.
Any tips would be very appreciated
To clarify:
The proper way is to tell npm to keep the dist/ folder, bypassing the .gitignore file (instead of defining an .npmignore article here ) is to define a files entry in the package.json :
{
"files": [
"dist",
"build",
...
]
}
Another unproper way to do get the result I needed is to use a postinstall command. But it is clearly an anti-pattern. Given that I am writing a typescript library, that is tested and then compiled by the CI, there's no need to recompile it within the postinstall command. But it could be an hacky solution when needed.
{
"scripts": {
"postinstall": "tsc src/index.ts"
}
}
To sum up, I think it was only an npm cache issue or more probably a server-side cache issue, because I've run npm cache clean --force different times.
Hope this helps.
Related
I'm working on a vue.js frontend, and I need to patch a package to fit the special needs of the app. The package I'm trying to patch is 'vue-youtube' (not that it really matters). I'm trying to patch it with patch-package (https://www.npmjs.com/package/patch-package)
So basically :
I edited locally the /node_modules/vue-youtube/src/vue-youtube.js to fit my needs
I did add the postinstall script in my package.json : "scripts": { "postinstall": "patch-package" }
I did npm install patch-package --save-dev
Then I ran npx patch-package vue-youtube
It did create a vue-youtube+1.4.0.patch file in a /patches folder with my modifications
BUT, my modifications are not seen. When I do npm run serve and launch my webapp, the package used is still the one not edited. I tried running npm install before, without success. When I go to the /node_modules/vue-youtube/dist/vue-youtube.js (thankfully it is a small package so it is readable), I can see that indeed my modifications have not been "compiled".
What am I missing here ? I feel like I have followed eveything in the patch-package npm page..
Thanks
EDIT : Still investigating.. few more informations/questions :
my patch name is patches/vue-youtube+1.4.0.patch
when i run npm ls vue-youtube it returns just one element : vue-youtube#1.4.0
in my package.json the dependency listed is "vue-youtube": "^1.4.0", should it be different ? should it mention that it needs to be patched ?
EDIT 2 : I realized that I am not editing the node_modules/vue-youtube/dist/vue-youtube.js, but the node_modules/vue-youtube/src/vue-youtube.
If you edit the files in the dist folder, the patch works. (however I thought patch-package would allow me to edit the files in the src folder, in readable JS...)
WORKING SOLUTION :
If you edit the files directly in the dist/ folder of the package instead of the src/ folder, the patch works fine.
Adding below npm script in package.json after patching worked for me.
scripts: {
"prepare": "patch-package",
}
The lines from yarn documentation explains about prepare
For compatibility reasons, scripts called install, postinstall, prepublish, and prepare will all be called after your package has finished installing.
After adding this script in package.json, the changes of module file in patches folder has been patched into respective node module.
I was trying to do the exact same thing with some package, let's call it "some_package". When I saw the EDIT 2 my mind just connected the dots...
To test changes locally
Modify the files in node_modules/some_package/src folder and then, go to the node_modules/some_package and run:
$ npm install
$ npm run <name of the script that generates the dist folder>
No need to run npx patch-package nor postinstall step.
I think that this approach doesn't work for all packages, it depends on how the modified package's package.json is configured. Specifically, pay attention where the browser field is pointing (in my case ./dist/some_package.js).
CAVEAT: You will have to run npm install and npm run every time you make an update to the package.
To test changes and be able to share it among team members (when the package is on Github)
Make a fork of the package you want to modify.
Make all the changes you want to your forked version of the package.
Run the following to automatically update the package.json file to make the dependency point to your forked version:
$ npm install <github's user name>/<package's name of the forked repository>#<branch name> --save-prod
For instance, if your Github's user name is "johndoe", and you forked https://github.com/aurelia/framework, and you made a branch named "mycoolbranch" containing your changes, then it would be:
$ npm install johndoe/aurelia-framework#mycoolbranch --save-prod
Note that the --save-prod flag could be replaced with --save-dev if the dependency is just for development.
Take a look at this answer, it may help.
https://stackoverflow.com/a/71153240/9981565
For me it was happening because of version mismatch between package.json intended version of package and yarn.lock / package-lock.json
I published a package via Github's package manager, and it seemed to work. It appears on the repo's web page and on my profile page. When I run
npm install #franklinharvey/time-remaining#1.0.0
locally it works, but when I try it in a new environment such as Replit or CodeSandbox it does not appear. It also does not appear on npmjs.com
Here are some config files
.npmrc
registry=https://npm.pkg.github.com/franklinharvey
.yarnrc
"#franklinharvey:time-remaining" "https://npm.pkg.github.com"
package.json (partial)
"name": "#franklinharvey/time-remaining",
"publishConfig": {
"registry": "https://npm.pkg.github.com"
},
"repository": {
"url": "git#github.com:franklinharvey/time-remaining.git"
}
.npmignore
.gitignore
src/
*.log
*.tsbuildinfo
package-lock.json
yarn.lock
coverage
node_modules
Our company also publishes its npm packages via github. Your post gave me an idea, and it fixed the issue on our end.
In a nutshell, I think you need both a fuller .npmrc where you're trying to download the package and not succeeding (containing the registry info as below); as well as to do an npm login if your package is private.
My .npmrc:
#my-company-s-npm-account:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=[GITHUB_AUTH_TOKEN_HERE_WITHOUT_BRACKETS]
registry=https://registry.npmjs.org/
Hope this fixes your issue.
If you can't add an .npmrc or do an npm login where you're trying to install it, and your package is private, I'm not sure how to help.
I have a react boilerplate that configures a nodejs server for background api calls and a create-react-app for the frontend.
I wanted to create a npm package that would prepare the whole environment when installing.
Eg.: npm i myPackage
This would create all the files and folders based on the structure I have defined, just like cloning the repository...
How could achieve that?
I just need some directions on how to start this, I published an npm package based on my repository and it only downloaded two files but not the whole structure.
Try adding a postinstall script like
"scripts": {
"postinstall": "./executable-script or cp dir/* $INIT_CWD/"
}
into the package.json file. It will run right after the package is installed.
For more documentation read https://docs.npmjs.com/misc/scripts and https://docs.npmjs.com/cli/run-script.
I never used it before, but it would likely solve it for you.
In an asp.net core project all the client files must to be copied under the approot directory to be deployed correctly: jspm let you define a proper directory for client deps, but with npm I have to copy the files from node_modules
directory to the approot\node_modules using a gulp task.
Since I'm not interested in filtering or manipulating the files before the deploy, but I just what that the files in the installed module are deployed, there is some way to do this without use gulp ?
You can use npm to do that. Add a script to your package.json:
"scripts": {
"copy": "xcopy from to"
}
Then you can call npm run-script copy to have it executed. I used xcopy as an example, you can use whatever you like. There is some more documentation about scripts in npm.
I npm publish'd a module. It went up fine, but then when I installed it from the registry, it turned out to be missing certain files.
When I run irish-pub in my module's project directory, sure enough, the output doesn't list those filenames.
I've checked:
I do not have an .npmignore file.
I do have a .gitignore but this only contains /node_modules/
the missing files are normal JS files, not things that could be ignored by default
What else could be blocking them?
The problem was I had a files array in package.json. If this is present, then only the specified files get published, and everything else is effectively npmignored.
https://docs.npmjs.com/files/package.json
i've had the "files" property in package.json as well (intentionaly) but used relative pathes to the list of files and directories starting with dot slash ("./"), but neither npm pack nor npm publish worked with that. removed these, all worked as expected!
so change:
"files": [ "./bin", "./lib" ]
to:
"files": [ "bin", "lib" ]
and run:
$ npm pack
check the gnu zipped tarfile and finaly:
$ npm publish <projectname>-<semver>.tgz
For anyone not fixed by the above answers, npm pack and publish respect any package.json files you have in the directory tree, not just at the root.
In my case, I had a module that templated out another module with ejs, but because npm was treating the child package.json as real it was reading the files from there and not bundling everything I needed.
Lookout for the files in any package.json, not just your root.
For me, having the .gitignore file with files listed in it, inside the package folder to be published was causing the issues.
In general,
"All files in the package directory are included if no local .gitignore or
.npmignore file exists. If both files exist and a file is ignored by .gitignore
but not by .npmignore then it will be included."
I just ran into the same problem and found the answer here.
You need include the path to the directory (or tarball) you're trying to publish. While the documentation on npmjs.org doesn't really indicate it, if you run npm help publish you'll get the man page, which shows that the correct usage is actually
npm publish <tarball> [--tag <tag>]
npm publish <folder> [--tag <tag>]
I also found that I had to actually type out the path: I couldn't just use npm publish . from the directory containing my package.json file.
Hope that helps.
Something not mentioned in other solutions is that there is an undocumented, racing precedence. For instance, I had "files": ["lib"] in my package.json. lib is my gitignore. with just that state, it works. however, there was also a lib/path/.gitignore, which trumped my files array, yielding no included lib folder.
lesson--take heed of nested .gitignore files