grunt-package-modules cannot install dependency of itself - npm

I'm trying to use the npm package grunt-package-modules to gather my npm_module dependencies for a bundled deployment but ran into the error when running the command grunt packageModules:
Fatal error: Refusing to install test as a dependency of itself
This error typically occurs when the name of the project also appears in the list of dependencies in package.json as was the case here, but that does not occur in the original file or the one that is copied into the dist folder.
I was able to get this error with the simplest project setup I could create from the examples given in the grunt tutorial and the package wiki. Is there something I'm missing in setting up this plugin?
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"underscore": "^1.8.3"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-package-modules": "^1.0.0"
}
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
packageModules: {
dist: {
src: 'package.json',
dest: 'dist'
},
}
});
grunt.loadNpmTasks('grunt-package-modules');
}
I'm on a PC and had the same thing happen on my home PC but had my co-worker run through this same setup on his mac and it worked successfully for him. Also tried updating node and npm since we had different versions with no luck.

Related

publishConfig is not respected by Yarn 1.22

I'm using yarn v1.22 and yarn workspace for building my application as a monorepo. Here is the package.json for our component library package. I want to use publishConfig to override the main field when I do npm publish or yarn publish. But when I tried to run those commands, the main field is no changed. Can anyone share some suggestions? Thanks.
{
"name": "components",
"private": false,
"version": "0.1.2",
"main": "src/index.ts",
"files": [
"dist"
],
"publishConfig": {
"main": "dist/index.js"
}
}

How to properly install ClassPrivateProperties and ClassPrivateMethods plugins?

Hei,
I updated my npm packages, including parcel, and after the update I could not run my application anymore and keep getting the following error:
🚨 Build failed.
#parcel/transformer-js: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods' (3:2)
My package.json looks like below:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "Klei Rama",
"license": "ISC",
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-private-methods": "^7.13.0",
"#parcel/transformer-sass": "^2.0.0-beta.2",
"parcel": "^2.0.0-beta.2",
"sass": "^1.32.8"
},
"dependencies": {
"fractional": "^1.0.0"
},
"plugins": [
"#babel/plugin-proposal-private-methods",
"#babel/plugin-proposal-class-properties"
]
}
I keep trying to delete node_modules, clear the cache, and delete package.json and then reinstall again but it does not work. I tried to use experimantal versions of parcel such as 2.0.0-beta.1 and 2.0.0-beta.2, but none of these version does not seem to work with experimental phase of babel plugins (class-properties and private-methods) (7.13.0). I was wondering if there is any certain version of babel plugins which can work either with parcel 2.0.0-beta.1 or 2.0.0-beta.2?
Hei you, install babel and the following plugins:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods"
]
}
Of course, also, to file .babelrc.

How do I package a node module for BuckleScript / ReasonML?

Background
I'm an absolute beginner in BuckleScript, and while I've downloaded packgages with npm before, I've never written a library.
Goal: installing my new package local package in my project using npm
I am trying to wrap some parts of the service worker api in JavaScript. I have started with a file bs-service-worker/src/ExtendableEvent.re like so
type _extendableEvent('a);
type extendableEvent_like('a) = Dom.event_like(_extendableEvent('a));
type extendableEvent = extendableEvent_like(Dom._baseClass);
[#bs.send] external waitUntil: (extendableEvent, Js.Promise.t('a)) => unit
= "waitUntil";
This compiles and produces ExtendableEvent.bs.js as expected.
Now, though, I'd like to go ahead and test what I have so far by creating a new npm project and importing what I have locally. I created a new sibling directory and did an npm install ../bs-service-worker. That succeeded, and then I did a sanity-check build on my new BuckleScript project. That also succeeded.
The issue: opening my module causes an error
When I add open ExtendableEvent; to Demo.re in the new project, I get the following error:
We've found a bug for you!
/home/el/workbench/bucklescript/bs-service-worker-examples/src/Demo.re 11:6-20
9 │
10 │ /**/
11 │ open ExtendableEvent;
12 │
13 │ /*
The module or file ExtendableEvent can't be found.
- If it's a third-party dependency:
- Did you list it in bsconfig.json?
- Did you run `bsb` instead of `bsb -make-world`
(latter builds third-parties)?
- Did you include the file's directory in bsconfig.json?
What I've tried
I'm guessing I'm misusing BuckleScript here instead of npm because npm is so widely adopted and well documented that I think I'd have found the problem, but I'm definitely not ruling out the possibility that I'm misusing npm, too.
I do have "bs-service-worker" listed as a bs-dependency. I also tried "../bs-service-worker" in case BuckleScript didn't like the virtual directory, but it didn't seem to help.
My npm run build command is indeed npx bsb -make-world.
More code:
bs-service-worker/bs-config.json
{
"name": "bs-service-worker",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true,
"public": "all"
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}
bs-service-worker-examples/bsconfig.json
{
"name": "bs-service-worker-examples",
"version": "0.1.0",
"sources": {
"dir" : "src",
"subdirs" : true
},
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".bs.js",
"bs-dependencies": [
"bs-service-worker",
"bs-fetch",
],
"warnings": {
"error" : "+101"
},
"namespace": true,
"refmt": 3
}
bs-service-worker-examples/package.json
{
"name": "bs-service-worker-examples",
"version": "0.0.1",
"scripts": {
"build": "npx bsb -make-world",
"start": "npx bsb -make-world -w",
"clean": "npx bsb -clean-world"
},
"keywords": [
"BuckleScript"
],
"author": "Eleanor (https://webbureaucrat.bitbucket.io)",
"license": "MIT",
"devDependencies": {
"bs-platform": "^7.3.2"
},
"dependencies": {
"bs-fetch": "^0.6.1",
"bs-service-worker": "file:../bs-service-worker"
}
}
Easy Reproduction of the Issue
The fastest way to reproduce this would be to fork this repository and try to add it as a local npm dependency.
The problem seems to be that you have "namespace": true in your library's bsconfig.json, which will wrap all the modules in a namespace module with a silly generated name based on the name field. In this case it will be BsServiceWorker I think.
You could just remove that setting, or set it to false, but namespacing is a good idea to avoid collisions between modules from different libraries, or your own app, so I would recommend setting it to a custom, sensible name. For example:
"namespace": "ServiceWorker"
You can then open ExtendableEvent in the consumer project with:
open ServiceWorker.ExtendableEvent;
For more details, see the documentation on the namespace field.

How do I configure npm packages using a package list? Like Bower

I'm a big fan of bower. I don't need to put a stack of packages in my repository, I just commit bower.json each time and I'm done.
So my question really is, can I make npm read from a json file in the same way that bower does?
npm has package.json. This file has dependencies and devDependencies parts. You can use this file similar to bower.json.
npm install
will install necessary dependencies to your project's node_modules directory.
See sample package.json below.
{
"name": "SampleMobileApp",
"version": "0.0.1",
"description": "Sample App",
"dependencies": {
"grunt": "~0.4.2",
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.8.0",
"grunt-open": "~0.2.3",
"grunt-contrib-copy": "~0.5.0",
"grunt-bowercopy": "~0.7.1",
"grunt-contrib-watch": "~0.5.3",
"grunt-phonegap": "~0.12.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"grunt",
"javascript"
],
"author": "Atilla Ozgur",
"license": "MIT",
}
dependencies are your runtime dependencies that your users need to download while devDependencies are your developer dependencies like your test runtime, grunt helper packages etc.

How to build Twitter Bootstrap 3 using Grunt

I've cloned Twitter Bootstrap 3 using git clone https://github.com/twbs/bootstrap.git:
Now, I am trying to build it using Grunt and I cannot find any documentation on how to do this.
Where should I start?
To add some more automation to your project, I would suggest you is to use Bower. This will even save you the time of downloading everything to your assets.
In order to use Bower you need bower.json
This file looks something like this:
{
"name": "WebExpressive",
"version": "0.0.0",
"authors": [
"username <username#abc.com>"
],
"description": "An awesome web application",
"license": "MIT",
"ignore": [],
"dependencies": {
"bootstrap": "latest",
"jQuery": "latest",
"angular-latest": "latest",
"turnjs": "latest"
}
}
Now you to plug your bower to grunt you need to have a Gruntfile.js which will look something like this
module.exports = function (grunt) {
//project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
shell: {
multiple: {
command: ['bower install',
'mv bower_components/** public/',
'rm -rf bower_components'].join('&&')
}
}
});
grunt.loadNpmTasks('grunt-shell');
//Default Tasks
grunt.registerTask('default', ['shell']);
//production Tasks
//grunt.registerTask('dist',[..]);
//test tasks
};
Now before you actually run the 'grunt', make sure that you got all npm packages in your project directory and package.json is in correct shape.
Take a look at my package.json file.
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"grunt": "*",
"grunt-shell": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-connect": "*",
"grunt-contrib-coffee": "*",
"grunt-contrib-compass": "*",
"grunt-open": "*",
"grunt-contrib-requirejs": "*",
"grunt-contrib-jade": "*",
"grunt-contrib-copy": "*",
"grunt-bower-install": "*"
}
}
Now you just need to run these commands and you can find the your bootstrap inside the public folder.
npm install
grunt
Please do visit grunt and grunt shell to explore more on this, they are just great.
For a basic instruction on how to build using Grunt you can refer to
http://getbootstrap.com/getting-started/
Essentially it's as easy as
grunt dist
If you are running from the command line in Windows, be sure to run cmd.exe as administrator.