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

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?

Related

I keep get empty directories after yarn add

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

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 run npm audit using the Task Runner Explorer?

I guess it is trivial, but I did not manage to figure out how to adjust my package.json so that I could run npm audit using the Task Runner Explorer by Mad Kirstensen within Visual Studio (Professional 2017).
My package.json starts with
{
"version": "1.4.6",
"name": "myProject.UI",
"private": true,
"scripts": {
"npm audit": "npm audit",
"webpack": "webpack -w --mode='development' --colors --config webpack.config.js",
}, ...
The 2nd entry in the section scripts works fine, the 1st one does not, since the Task Runner Explorer always adds a cmd.exe /c npm run as prefix to all scripts defined in package.json. This is what also what the error message says:
cmd.exe /c npm run npm audit --color=always
npm ERR! missing script: npm
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Me\AppData\Roaming\npm-cache\_logs\2020-04-01T01_23_45_6789Z-debug.log
How do I have to modify my package.json to be able to start a npm audit using the Task Runner Explorer?
Related
Can we able to run npm start from Visual Studio task runner explorer
No task runner configurations are found?
I'm afraid that in npm all script entries have a single string by design.
After all, package.json is just a json file and a such the "key" in the key/value pairs need to be a single valid string.
E.g. npm_audit instead of npm audit:
{
"version": "1.4.6",
"name": "myProject.UI",
"private": true,
"scripts": {
"npm_audit": "npm audit",
"webpack": "webpack -w --mode='development' --config webpack.config.js",
}, ...

Error When Installing node-sass for Vue JS Project

When running an 'npm install' on a VueJS project I run into the following error:
error: no matching constructor for initialization of 'v8::String::Utf8Value'
v8::String::Utf8Value string(value);
^ ~~~~~
/Users/webdevwolf/.node-gyp/12.14.1/include/node/v8.h:3046:5: note: candidate constructor not viable: no known conversion from 'v8::Local<v8::Value>' to
'const v8::String::Utf8Value' for 1st argument
Utf8Value(const Utf8Value&) = delete;
^
/Users/webdevwolf/.node-gyp/12.14.1/include/node/v8.h:3039:5: note: candidate constructor not viable: requires 2 arguments, but 1 was provided
Utf8Value(Isolate* isolate, Local<v8::Value> obj);
^
1 error generated.
make: *** [Release/obj.target/binding/src/create_string.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/node-sass/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at ChildProcess.emit (events.js:223:5)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/node-sass/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /usr/local/lib/node_modules/node-sass
gyp ERR! node -v v12.14.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass#4.11.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass#4.11.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
To get round this I've tried the following:
Updating Node to the latest stable version
Updating sass
Running an install for the 4.11.0 version of Sass
I'm getting super frustrated with it now and I'm not even sure what this error even means - does anyone have any idea on how to fix this at all?
I was having a similar issue with Node version 16 and Vue 3.
The problem seems to be node-sass related and is incompatible with node version 16 or something. Other people have mentioned using Node 14 with no problems.
This error would happen even when I ran vue create app clicked on the manual configuration option and choose to have node-sass setup / configured. It would start downloading but freeze when it came time to download node-saas and exit with an error.
My solution was to download Vue 3 without the node-sass option and then after it was done installing, npm i -D sass sass-loader#7 instead of npm i -D node-sass
you also need to add this to you vue.config.js file in the root directory.
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
implementation: require('sass'),
},
},
}
}
Thats all you should need to get scss running.
Just dont forget to add the lang="scss" attribute the the script tags.
<style lang="scss">
.....
</style>
I found my solution from this article:
https://www.priestch.com/replace-node-sass-with-dart-sass-in-vue-cli3-based-project/
I fixed this with -
npm install node-sass
If that fails then
delete your node_modules folder
npm install
npm install node-sass
Sometimes when I come back to an old vue project after using the latest version of sass I get this error. And cleaning out the modules and re-installing the correct version for my project always seems to fix it.
If you are struggling with
node 16.13.2
#vue/cli 4.5.15
vue create to create a new Vue 3 project
and you want to use node-sass but you keep having errors
Don't add a css preprocessor to your project with vue create
Create your project with vue create then use this commands (and exactly this commands)
npm i -D sass-loader#^10.0.0
npm i node-sass#^6.0.1 --unsafe-perm
There is an issue with vue and nodejs 16 issued here. node-sass (4.11) bundled with vue-cli 4.5 is incompatible with nodejs 16. What I did:
upgrade the vue-cli to the latest (currently 5.0.4)
create a new project (in my case with vue ui)
EDIT: delete old node_modules folder
compare my old package.json with the new and took over the vue specific imports
compare the configuration files for vue, typescript, jest, cypress, eslint (or whatever you use)
EDIT: Backup or commit before executing next command, because it will change your config files. Then run vue add #vue/cli-plugin-eslint (npm install will fail)
NOT absolutely necessary: start npm-gui and updated all packages to compatible versions (do not know how to do this without npm-gui) Caution: compatible is not always newer.
Here is the generated package.json for the project (TS, ESLint, Jest, Cypress, Sass, Babel, Vuex) without Router:
{
"name": "vuenew",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"register-service-worker": "^1.7.2",
"vue": "^3.2.13",
"vuex": "^4.0.0"
},
"devDependencies": {
"#types/jest": "^27.0.1",
"#typescript-eslint/eslint-plugin": "^5.4.0",
"#typescript-eslint/parser": "^5.4.0",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-e2e-cypress": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-pwa": "~5.0.0",
"#vue/cli-plugin-typescript": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-plugin-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/eslint-config-standard": "^6.1.0",
"#vue/eslint-config-typescript": "^9.1.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"cypress": "^8.3.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"ts-jest": "^27.0.4",
"typescript": "~4.5.5"
}
}
EDIT2: We found some errors, which seems to be some sort of vue3 <-> TS thing.
after upgrading vue-cli to 5.0.4, tsc reports an error in a .ts (merge.ts from vue-splide) file inside node_modules. Switching back to TS 4.5.5 solved this issue.
EDIT:
In my project, I can upgrade:
typescript to 4.6.3 (current latest)
#vue/eslint-config-typescript to 10.0.0 (current latest)

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