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

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.

Related

How to use scoped packages in NPM workspaces?

My top package.json:
{
"name": "foo",
"version": "0.0.0",
"private": true,
"workspaces": [
"apps/*",
"packages/*"
],
"devDependencies": {
"#foo/eslint-config": "*"
},
"engines": {
"npm": ">=7.0.0",
"node": ">=14.0.0"
},
"dependencies": {},
"packageManager": "npm#8.18.0"
}
and I have a package in packages/#foo/eslint-config.
However, when I do npm install, I get an error saying that #foo/eslint-config is not in the registry.
I am assuming that I have either wrong directory structure.
Figured it out.
The package should have gone directly to packages/eslint-config directory.
The package name still needs to have the scope, i.e. #foo/eslint-config.
It appears that workspaces do not use the same convention of nesting scoped packages under a sub-directory as node_modules do.
It also appears that the folder name has no significance, as long as it is directly in the directory defined in workspaces configuration and has the correct package name.
Alternatively, you can also just update your workspaces configuration to read from packages/#foo/*.

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"
}
}

Failed to load plugin 'react' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-react'

When run locally, it seems to work fine but crashes when its on pipeline
EDIT: After removing npx, it produces a different error:
I have followed the advice of installing the plugin:
npm install eslint-plugin-react#latest --save-dev
But seeps to repeat itself.
Here's my retracted bitbucket-pipelines.yml config:
- step:
name: CI
caches:
- node
script:
- npm install
- npm run lint
- npm run test
eqautes to package.json
"lint": "eslint --ext .js,.ts,.tsx src --ignore-pattern node_modules/",
"test": "jest --verbose --colors --coverage",
Here's my eslint config file:
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".ts", ".tsx"],
"paths": ["src"]
}
}
},
"rules": {
...
}
}
}
An update to Visual Studio Code fixed this for me.
I was unwittingly on a 2 year old version.
Fixed it by removing NODE_ENV in pipelines's .env due to this:
npm install (in package directory, no arguments):
Install the dependencies in the local node_modules folder.
In global mode (ie, with -g or --global appended to the command), it
installs the current package context (ie, the current working
directory) as a global package.
By default, npm install will install all modules listed as
dependencies in package.json.
With the --production flag (or when the NODE_ENV environment variable
is set to production), npm will not install modules listed in
devDependencies.
NOTE: The --production flag has no particular meaning when adding a
dependency to a project.
it happened to to.
tried hard to find the answer.
Apparently, eslint searchs for a roots in the working directory, or something like that, to find the modules to import.
It happens that i've had two apps in my project folder, and only one had the eslintrc.josn.
I fixed to use eslint on the entire project oppening the vs settings.json and add the following:
"eslint.workingDirectories": ["./app1","./app2"...]
if u have more than one app on ur project folder, u should try it

grunt-package-modules cannot install dependency of itself

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.

NPM - How to fix "No readme data"

I have a simple package.json:
{
"name": "camapaign",
"version": "0.0.1",
"scripts": {
"start": "node app.js"
},
"engines": {
"node": "0.10.15",
"npm": "1.3.5"
},
"repository": {
"type": "svn",
"url": ""
}
}
When I execute "npm install" i get the following warning which I would like to fix:
"npm WARN package.json camapaign#0.0.1 No readme data."
I have tried adding "README.md" & "readme.txt" to the same dir as the package but with no joy. What am I missing?
Simply adding a README.md file will not fix it, you should write something inside it; at least the project title and a brief description is good for people! But for NPM, one byte may be enough...
Doing so should stop showing the warnings.
Also, when you read that warning, ensure that the problem is not related to a 3rd party package.
Just set as private ;)
{
"name": "camapaign",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"engines": {
"node": "0.10.15",
"npm": "1.3.5"
},
"repository": {
"type": "svn",
"url": ""
}
}
Adding a README.md to your project root is the answer, but I've noticed that it takes a short while for NPM to pick up on this. Maybe a few minutes?
Add to package.json "readme": "README.md"
As of today, Apr 2017, just setting below in package.json, still works fine:
"private": true
this means its your private repository
even, with latest npm, it works fine:
npm update -g npm
> 3.10.8
my solution
npm show
npm dist-tag add
1.use npm show check the remote website deploy info.
eg.should like this:
SOME_PACKAGEs#0.3.60-beta | Proprietary | deps: 14 | versions: 289
<span style="color:red;">最新日志倒序在这里增加,注明作者+日期+功能</span>
dist
.tarball: https://registry.npmjs.org/xxx/-/xxx-0.3.60-beta.tgz
.shasum: 021e30640a62f13905b1e2b7a4facd169df46a1d
.integrity: sha512-9N4pUwwoYGNek34fCCCjURuQdx1K5VBlCWl4t1sy8wi3xul/N/TiDvjmUBF24t2Dg2fX6cFM9on+tftnVaEr7A==
.unpackedSize: 114.5 kB
dependencies:
#hanyk/rc-viewer: ^0.0.3 crypto-js: ^3.1.9-1 moment: ^2.25.3 react-dom: ^16.12.0 uuid: ^3.3.3
axios: ^0.19.0 dirty-json-ie11: ^0.0.2 query-string: ^6.9.0 react-quill: ^1.3.3 yqquill-image-drop-module: ^0.0
cookie-universal: ^2.0.16 md5: ^2.2.1 quill-delta-to-html: ^0.11.0 react-resizable: ^1.10.1
maintainers:
- jyjin <jyjin#qq.com>
- jyjin1 <jyjin1#163.com>
- jyjin2 <jyjin2#163.com>
dist-tags:
beta: 0.3.61-beta latest: 0.3.53-beta
published 26 minutes ago by jyjin1 <jyjin1#163.com>
2.npm dist-tag add [PACKAGE_NAME]#[VERSION]
and then update lasest 0.3.53-beta to 0.3.61-beta
npm dist-tag add SOME_PACKAGE#0.3.61-beta
3.npm show check agin
same to step 1
go back to your npm package site, all have refreshed!
Wish to helps, thanks~
[One Chinese Teach]希望对您有帮助,谢谢~