I am currently using cropper and have jquery#latest in my package.json. However, cropper requires jquery as its own dependency which ends up with two versions of jquery being installed and used. I tried adding this to my npm-shrinkwrap.json:
"cropper": {
"version": "2.3.3",
"from": "https://registry.npmjs.org/cropper/-/cropper-2.3.3.tgz",
"resolved": "https://registry.npmjs.org/cropper/-/cropper-2.3.3.tgz",
"dependencies": {
"jquery": {
"version": "3.1.0",
"from": "jquery#latest"
}
}
},
But all that ended up happening is that I have two identical versions of jquery installed.
What I need to do is to get cropper to use the local version of jquery in my package.json and not its own version of it. The only way I have accomplished this is to manually delete the node_modules folder from within cropper but this is not a long term solution.
How would I get cropper to use my local jquery? Or get shrinkwrap to not install croppers jquery dependency?
Related
According to the official NPM docs, overrides in package.json allows for overriding a package with another package entirely:
Overrides provide a way to replace a package in your dependency tree
with another version, or another package entirely. These changes can
be scoped as specific or as vague as desired.
https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
However, I can't figure out how to replace a package with anything other than a changed version of the same package.
I'm trying to replace node-sass with sass in a transitive dependency but no configuration that I've tried works.
"overrides": {
"node-sass": "sass#^1.3.0"
}
"overrides": {
"node-sass": {
".": "sass#^1.3.0"
}
}
Either of the above configuration produces the following NPM error:
Invalid tag name "sass#^1.3.0": Tags may not have any characters that encodeURIComponent encodes.
If I try something more rudimentary:
"overrides": {
"node-sass": "sass"
}
NPM errors with:
No matching version found for node-sass#sass.
I'm on NPM v8.3.1.
Is it actually possible to replace a package with another package entirely or am I misunderstanding what's written in the docs?
Based on a comment in the Github issue linked in #Phil's comment, I was able to override a package with another package entirely by using the npm: prefix:
"overrides": {
"dependency": {
"node-sass": "npm:sass#1.54.7"
}
}
It's not documented in relation to overrides from what I can tell, so I don't know to what extent this feature is supported, but it appears to work in at least rudimentary cases.
I'm trying to use npm peerDependencies but nothing seems to work as advertised. What am I missing?
The setup is, I have two modules, mod and plugin, both of which depend on an external module from npm. mod declares a hard dependency on both plugin and the external module, and the plugin declares a peer dependency, in order to get access to the version being used by the parent module.
The files look like this:
~/plugin/package.json:
{
"name": "plugin",
"version": "1.0.0",
"main": "index.js",
"peerDependencies": {
"pad-right": "^0.2.2"
}
}
~/plugin/index.js
var peerDependency = require('pad-right')
module.exports = 'this is a plugin'
~/mod/package.json:
{
"name": "mod",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"pad-right": "^0.2.2",
"plugin": "../plugin"
}
}
~/mod/index.js:
var hardDependency = require('pad-right')
var plugin = require('plugin')
As I understand it from docs and examples, I think this should be a standard way to use peer dependencies, and running npm install in either directory doesn't give any errors or warnings.
However when I run webpack in the mod folder, I get errors like:
ERROR in ../plugin/index.js
Module not found: Error: Can't resolve 'pad-right' in '~/plugin'
# ../plugin/index.js 1:21-41
# ./index.js
What's going wrong here, shouldn't webpack resolve the require statement inside plugin with the peer dependency from the parent mod module?
Gah, it looks like this is an edge case that only affects modules that are referencing each other locally via the file system.
The solution is apparently to add something like:
resolve: {
alias: {
'pad-right': path.resolve('node_modules', 'pad-right'),
},
},
to your webpack config. (Or else to try resolve.symlinks: false, which solves the problem in the minimal repro code I posted, but doesn't solve things in my actual project).
Article about the issue
I'm quite new to the deployment part of websites with npm packages in it. and I'm trying to temporarily host my website to surge.sh in order to share & test it. It's a simple html website with paper.js scripts in it. By just launching the index.html in chrome it works. When deploying to surge I get this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: paper is not defined
at HTMLDocument.<anonymous> (leaf_generator.js:2)
Is there an extra action that I have to go through when deploying sites with node packages in it (in my case paper.js)? E.g. building the site first, like for react apps? Or is it a problem with how I'm using paper.js in the script?
Here's a bit of my code:
// package.json
{
"name": "leaf_generator",
"version": "1.0.0",
"description": "testing paperjs",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mark tension",
"license": "ISC",
"dependencies": {
"focus-visible": "^4.1.5",
"mathjs": "^6.0.2",
"p5": "^0.8.0",
"paper": "^0.12.1",
"underscore": "^1.9.1"
},
"devDependencies": {
"gh-pages": "^2.0.1"
}
}
From index.html I import paper.js and my paper.js script like this:
<script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
<script type="text/javascript" src="js/leaf_generator.js"></script>
And these are the first lines of the .js paper script from where the error is thrown:
$(document).ready(function() {
paper.setup("myCanvas");
with (paper) {
""""""""" paper.js code """"""""""""
}
Thanks!
The quick answer is that Surge.sh ignores the node_modules directory by default. If node_modules is in your .gitignore file (as it probably should be), they will also not be available on GitHub Pages. You’re right that as typically a build tool or static site generator will take all your dependencies and bundle them into build files.
Building on the comments, a couple of options of how you could fix your problem quickly:
Option 1: Use the unpkg service for your npm dependencies for now
One option is to use something like Unpackage, which will give you a pre-built and hosted version of your dependencies, directly from npm:
<script type="text/javascript" src="https://unpkg.com/paper#0.12.3/dist/paper-full.js"></script>
I prefer to link to a specific version, but you do also have the option of always using the latest version from npm by linking to https://unpkg.com/paper
Option 2: Un-ignore the node_modules folder on Surge
Alternatively, you can decide to publish your node_modules folder to Surge by adding a Surge ignore file and restoring that folder: https://surge.sh/help/ignoring-files-and-directories
Inside the folder you are deploying, create a fill called .surgeignore, and add:
!node_modules/
Option 3: Set up a build tool
As mentioned in the comments, you can set up Webpack or a similar tool to package Paper.js and your other JavaScript together, but that might be more than you need to bother with depending on where you’re at with your project.
So I'm using angular in a rails app and using bower to manage my javascript libraries. There have been a few times that have come up where I've had to modify the functionality of certain bower packages. What I've done previously is just copy the source file pulled in by bower, make the changes, then save that in my assets directory and pull that file in directly in my application.js manifest.
Is there a better/cleaner way to do this so that all my javascripts are still pulled in via bower? I know that for gemfiles, I can fork a repo and reference that version in my gemfile, is there something similar for bower?
Are there any best practices here? Thanks a bunch.
EDIT: Also I'm using a bower.json file, something like this:
{
"lib": {
"name": "bower-rails generated lib assets",
"dependencies": {
"angular": "latest",
"angular-ui-router": "latest",
"angular-animate": "latest",
"bootstrap-sass-official": "latest",
"angular-deckgrid":"latest",
...
}
},
"vendor": {
"name": "bower-rails generated vendor assets",
"dependencies": {
// "three.js" : "https://raw.github.com/mrdoob/three.js/master/build/three.js"
}
}
}
You can do the same for bower packages. Fork the repo, make your changes, and then create your own Bower package following this. Once it has been registered, you can just bower install <your-package> directly every time :)
I have a ES6 Setup working with jspm and system.js with a additonal registered endpoint for bower. I need that endpoint due to the fact that installing Boostrap via npm or github does not provide the necessary less files for Bootstrap (anymore).
However, I want to use some of the Bootstrap Plugins (i.e. collapse). As they are simple jQuery Plugins with no AMD or CommonJS syntax they need jQuery globally.
I have no clue at all how to shim the config.js file of system.js to achieve that. You can pass custom overrides like this
{
"main": "js/jquery.keyboard.js",
"shim": {
"js/jquery.keyboard": {
"deps": ["jquery"]
}
},
"dependencies": {
"jquery": "*"
}
}
which seems to be the 'official way' to shim a jQuery Plugin.
However, I am installing a whole framework with multiple folders and files not just a single plugin (so, as mentioned above, Bootstrap is installed via a bower endpoint for jspm)
Any suggestions?