I keep get empty directories after yarn add - yarnpkg

I'm trying out yarn at the moment.
But, I'm having this "EPERM: operation not permitted, rmdir " issue every time I install a package.
For example,
yarn add express
> no errors for the first one
yarn add nodemon
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
error An unexpected error occurred: "EPERM: operation not permitted, rmdir 'D:\\GDrive\\dev\\mongoose_prac\\node_modules\\.bin'".
I have to remove all those empty directories to install new package. So I do know how to solve this issue. However, it seems like this is just a temporary answer. When I try to install a new one, then this error happens again with the exact same issue some directories same and some directories different from the empty ones before.
npm didn't had this issue before, and I just checked npm projects to see if those empty directories in yarn was also empty in npm. But, those bin directories in npm had some files in it.
So...
Does anyone know why I'm getting this empty directories after yarn add?
just to make it clear, I tried several times delete the whole workspace and make it again and initialize from the beginning.
and below is my package.json, yarn-error.log
{
"type": "module",
"name": "mongoose_prac",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "nodemon app.js"
},
"dependencies": {
"express": "^4.18.1",
"mongodb": "^4.10.0",
"mongoose": "^6.6.2"
},
"devDependencies": {
"nodemon": "^2.0.20"
}
}
since yarn-error.log has too many characters, i replace it with this code copy link here.
https://codefile.io/f/4wVUvpxykBYcEWhDbrTs

Related

fsevents not accessible from jest-haste-map

When i deploy my app from github.com to heroku. I get the following message error: fsevents not accessible from jest-haste-map.
Could you help me solve this issue.
This is my package.json
{
"name": "app-clean",
"version": "0.1.0",
"private": true,
"main": "index.js",
"dependencies": {
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^5.0.1",
"bootstrap-icons": "^1.5.0",
"json-server": "^0.16.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server db.json -p 5000 -w -d 0"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Thanks
So it seems that there are some internal dependencies that depend on the fsevents module. The general consensus seems to be to make this dependency optional, which should fix your problem (on Windows at least).
Try:
npm i fsevents#latest -f --save-optional
That fixed the dependency issue for me.
I have the same issue with the GitHub Actions (is being used for style-checking and testing).
The error message appears while executing command npm ci:
fsevents not accessible from jest-haste-map
If I replace the npm ci by npm install, I receive the error about the lockfile version:
This version of npm is compatible with lockfileVersion#1, but package-lock.json was generated for lockfileVersion#2
Therefore, the reason of the issue is upgraded lockfile version to 2.
If you have the same issue, check the npm version (command) and package-lock.json (file). If the "lockfileVersion" is 2, npm must be at least 7.x.
To fix that in GitHub action I added npm-upgrading step. So, my steps looks like:
# ...
steps:
# ...
- name: Upgrade NPM
run: npm install -g npm
- name: Install dependencies
run: npm ci
- name: Build project
run: npm run build
Thus, if you have issue like "it works on my PC, but does not work in CI/CD runner", try to use described solution.
Try:
Deleting package-lock.json and node_modules
Running npm install locally, which should generate a new package-lock.json
Committing and pushing the new package-lock.json
I usually try this whenever I get strange npm errors like this relating to the dependencies.
I had this problem in bitbucket.org pipelines.
We was using Docker image with Node in version 14.17.0 (npm was included in version 6.14.13).
Updating only npm to version 8.1.3 did not help.
But updating Docker image of Node to new LTS version (16.13.0, with npm 8.1.0) fixed this problem and npm ci started working properly.
I saw this error this week. I changed package versions, then the error has gone. Here are my versions that seem related to this error. I'm not sure this is the correct way to fix it.
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9"
The same issue happen to me when build the package using ./github/worflows
Run npm ci
npm ERR! fsevents not accessible from jest-haste-map
1 - To resolve, I install in my local:
npm i fsevents#latest -f --save-optional
2 - Push the package.json into github again.
The workflows(view from github repository-> tab Actions) is triggered, the result shows the build is success.

How to create a custom JupyterLab css theme extension?

I'm looking for a straight forward way to apply custom CSS to the Jupyter Lab notebook. I've tried following the documentation and am getting the following error:
Missing extension module "lib/index.js"
after running jupyter labextension install .
Jupyter Lab relies on the Themes to adjust the notebook formatting. This seems like a reasonable way of making custom themes reusable, but I'm having a heck of a time figuring out how to make and apply the set of changes I'd like to make.
Following the documentation for Themes linked above:
To quickly create a theme based on the JupyterLab Light Theme, follow
the instructions in the contributing guide and then run jlpm run
create:theme from the repository root directory. Once you select a
name, title and a description, a new theme folder will be created in
the current directory. You can move that new folder to a location of
your choice, and start making desired changes.
The steps in the contributing guide led me to do the following:
Cloned the JupyterLab repo from GitHub using Fork.
pip install -e .
jlpm install
jlpm run build
jlpm run build:core
jupyter lab build
All from my local directory where I cloned the repo. This had the side effect of installing the latest alpha build of JupyterLab, which isn't what I want. I need to be using a stable release so I uninstalled jupyterlab through conda, and then reinstalled it.
I then repeated the above using the 0.35.4 tag of JupyterLab. I only mention this in unlikely event that the double install screwed things up somewhere.
Then, looking at the theme authoring documentation, I first:
npm install, which runs without incident
npm run build, which complains about that ../application/tsconfig.json isn't found which I think is ok because I don't think I'm using any TypeScript (??)
jupyter labextension install . which fails because lib/index.js isn't found.
I presume this is because lib/index.js is listed under "main".
I'm not sure what parts of this config to change and what to leave the same if my only goal is to change the .css files in the style directory.
Here's my full package.json file:
{
"name": "FirstTheme",
"version": "0.19.1",
"description": "My first Theme",
"homepage": "https://github.com/jupyterlab/jupyterlab",
"bugs": {
"url": "https://github.com/jupyterlab/jupyterlab/issues"
},
"license": "BSD-3-Clause",
"author": "Project Jupyter",
"files": [
"lib/*.d.ts",
"lib/*.js.map",
"lib/*.js",
"static/*.css",
"static/*.ttf",
"static/*.eot",
"static/*.woff",
"static/*.woff2"
],
"main": "lib/index.js",
"types": "lib/index.d.ts",
"directories": {
"lib": "lib/"
},
"repository": {
"type": "git",
"url": "https://github.com/jupyterlab/jupyterlab.git"
},
"scripts": {
"build": "tsc -b",
"build:src": "tsc -b src",
"build:webpack": "webpack",
"clean": "rimraf lib && rimraf static",
"prepublishOnly": "npm run build",
"watch": "tsc -b --watch",
"watch:src": "tsc -b src --watch",
"watch:webpack": "webpack --watch"
},
"dependencies": {
"#jupyterlab/application": "^0.19.1",
"#jupyterlab/apputils": "^0.19.1",
"ajv": "^6.7.0",
"font-awesome": "~4.7.0"
},
"devDependencies": {
"css-loader": "~0.28.7",
"mini-css-extract-plugin": "^0.4.0",
"npm-run-all": "~4.1.1",
"rimraf": "~2.6.2",
"svg-url-loader": "~2.3.1",
"svgo": "~1.0.4",
"svgo-loader": "~2.1.0",
"typedoc": "~0.12.0",
"typescript": "~3.1.1",
"url-loader": "~1.0.1",
"webpack": "~4.12.0",
"webpack-cli": "^3.0.3"
},
"publishConfig": {
"access": "public"
},
"jupyterlab": {
"extension": true,
"themeDir": "static"
}
}

With Yarn workspaces, how can compiled binaries be linked to the workspace post-compilation?

Context
Yarn workspaces provide for a convenient mono-repo-like functionality where packages are automatically linked. I.e. they can require/import each other, and their binaries are linked and accessible from the workspace root.
An example:
workspace/package.json
{
"name": "200180719-yarn-bin",
"version": "1.0.0",
"workspaces": [
"packages/*"
],
"private": true
}
workspace/packages/a/package.json
{
"name": "a",
"version": "1.0.0",
"main": "src/index.js",
"bin": {
"mycli": "src/index.js"
}
}
workspace/packages/a/src/index.js
#!/usr/bin/env node
console.log('welcome to the cli')
If you then change directory to the main workspace and run yarn install, yarn correctly links the binaries and you can run:
yarn run mycli
From the workspace directory just fine. Great!
Problem
The problem I have is that if your code first has to be compiled, the binary won't be available before yarn install has finished (since you are not supposed to ship compiled code in version control). I use Typescript to compile my cli:
Rename index.js to index.ts and update a/package.json to:
{
"name": "a",
"version": "1.0.0",
"main": "src/index.js",
"bin": {
"mycli": "dist/index.js"
},
"scripts": {
"build": "tsc src/index.ts --outDir dist",
"preinstall": "yarn run build"
},
"devDependencies": {
"typescript": "^2.9.2"
}
}
Even though dist/index.js is correctly build when you run yarn install on the workspace directory, it fails to create a link to the binary:
Toms-MacBook-Pro-2:200180719-yarn-bin tommedema$ yarn run mycli
yarn run v1.7.0
error Command "mycli" not found.
Question
How can I make yarn workspace binary linking work when my binaries need to be compiled on install?
If I need to use Lerna to make this work, that would be totally fine too (though preferably avoiding a call to lerna bootstrap since that should be redundant with yarn workspaces).

VS2015's npm support can't deal with #types?

I just found out that VS2015 has support for npm even in normal ASP.NET 4 projects - that's great.
The first thing I tried after jquery was to get types:
{
"version": "1.0.0",
"name": "aspnet",
"private": true,
"devDependencies": {
"jquery": "3.1.1",
"#types/jquery": "^2.0.34"
}
}
This says
npm ERR! 404 'types/jquery' is not in the npm registry.
I know it is, because executing
npm install
in the directory of the package.json file then installs it correctly.
That's a bug in VS2015's npm support, right? Is there a fix?

proper way to configure d3 to work with angular2 and typescript

trying to include d3 library into an angular2 typescript project. I added d3 via npm install d3 and the typings via typing install d3 --save, the project local server doesn't start (tsc && concurrently "npm
run tsc:w" "npm run lite"), with the following error:
typings/browser/definitions/d3/index.d.ts(3319,1): error TS2300: Duplicate identifier 'export='.
typings/browser/definitions/d3/index.d.ts(3323,1): error TS2300: Duplicate identifier 'export='.
typings/browser/definitions/d3/index.d.ts(3327,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3319,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3323,1): error TS2300: Duplicate identifier 'export='.
typings/modules/d3/index.d.ts(3327,1): error TS2300: Duplicate identifier 'export='.
these are my config files:
typings.json:
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b",
"gapi": "github:DefinitelyTyped/DefinitelyTyped/gapi.auth2/gapi.auth2.d.ts"
},
"dependencies": {
"d3": "registry:npm/d3#3.0.0+20160211003958"
}
}
package.json:
{
"name": "session-explorer",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.15",
"systemjs": "0.19.26",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.10",
"d3": "^3.0.0"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^0.7.12"
}
}
You can now install typings as follows:
npm install d3 --save
npm install #types/d3 --save-dev
Then you can import d3 as follows
import * as d3 from 'd3';
The 2017 Update
Installation
Installing types for d3 v3:
npm install d3#3.x --save
npm install #types/d3#3.x --save-dev
Installing types for the latest d3 version (at the moment of writing v4):
npm install d3 --save
npm install #types/d3 --save-dev
Usage
import * as d3 from 'd3';
As there is no typings available for D3 V4, we have to manually declare the d.ts for d3 some thing like
declare function d3(string: any): any;
After installing the D3 node module, we can import in file as
var d3: any = require('d3');
From the error message it looks like you need to exclude your typings main.d.ts and main directories.
I would suggest adding a tsconfig.json in the same directory where your typings.json file is located.
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"module": "commonjs",
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main.d.ts",
"typings/main"
]
}
The angular documentation has a good introduction on how the tsconfig.json file works.
You should be able to import d3 directly with :
import * as d3 from 'd3';
as long as the typings have been properly installed (which seems to be your case) and the actual d3.js file is loaded, either with a manual import or through some preprocessing task using node_modules/d3 folder.
Also make sure that d3.js is not accidentally imported in 4.x version, as this version brings many changes that have not been integrated in the dt typings as of today.
There are too many different answers here. Because the maintain status of Typed d3.
For now, 2017/12/09, there is already d3 type, with latest version 4.12.0. So no need to downgrade to version 3.x, or declare something.

Resources