Local npm install from file path not working - javascript

I followed Link to install the npm package from the file path
However, when I try to use it I am getting the following error.
Cannot file moduele '<module_name>' or its corresponding type declaration
Is there any tutorial to follow in order to install typescript-based npm package locally?
Here my package.json of the package i want to install
{
"name": "sqs",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"types": "dist/index.d.ts",
"scripts": {
"build": "rm -rf build && prettier --write src/ && tsc",
"start": "ts-node ./src/index.ts",
"start:prod": "npm run build && node ./dist/src/index.js",
"start:dev": "./node_modules/nodemon/bin/nodemon.js",
"lint": "eslint '*/**/*.{js,ts,tsx}'",
"lint:fix": "eslint --fix '*/**/*.{js,ts,tsx}'",
"prettier": "prettier -c ./src/**/*.{js,ts,tsx,scss,css,md}",
"prettier:fix": "prettier -c ./src/**/*.{js,ts,tsx,scss,css,md} --write"
},
"author": "Rohit Sthapit",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.820.0",
"nodemon": "^2.0.20",
"readline-sync": "^1.4.10",
"ts-node": "^10.9.1"
},
"devDependencies": {
"#types/dotenv": "^8.2.0",
"#typescript-eslint/eslint-plugin": "^5.36.2",
"#typescript-eslint/parser": "^5.36.2",
"dotenv": "^8.2.0",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.7.1"
}
}

Usually for packages that support typescript, you would find a DT symbol when you open the package page in npm.
For installing the typescript package, you use npm i #types/{package_name}. For eg, in lodash's case you could do:
npm i #types/lodash
Hope it helps!!

use this,
npm install --save-dev #types/package-name

Related

TypeORM error when trying to create migration in CLI

I'm trying to use the TypeORM CLI to create a migration. I followed their guide but when I run yarn run typeorm migration:generate I get the error:
$ typeorm-ts-node-commonjs migration:generate
/usr/bin/env: ‘node --require ts-node/register’: No such file or directory
/usr/bin/env: use -[v]S to pass options in shebang lines
error Command failed with exit code 127.
My package.json looks like this:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "tsc -w",
"start": "node dist/index.js",
"dev": "nodemon dist/index.js",
"start2": "ts-node src/index.ts",
"dev2": "nodemon --exec ts-node src/index.ts",
"typeorm": "typeorm-ts-node-commonjs"
},
"author": "",
"license": "ISC",
"dependencies": {
"apollo-server-express": "^3.6.7",
"class-validator": "^0.13.2",
"cors": "^2.8.5",
"express": "^4.17.3",
"express-graphql": "^0.12.0",
"graphql": "^15.3.0",
"pg": "^8.7.3",
"reflect-metadata": "^0.1.13",
"ts-node": "^10.7.0",
"type-graphql": "^1.1.1",
"typeorm": "^0.3.4"
},
"devDependencies": {
"#types/express": "^4.17.13",
"#types/node": "^17.0.23",
"nodemon": "^2.0.15",
"typescript": "^4.6.3"
}
}
I managed to solve this by installing the cli as described here https://orkhan.gitbook.io/typeorm/docs/using-cli#installing-cli
Install ts-node globally npm install -g ts-node
add the following script to package.json: "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js" instead of "typeorm": "typeorm-ts-node-commonjs"
then create a migration with:
yarn run typeorm migration:generate -p -d src/data-source.ts src/migrations/<filename without ending>
FYI For anyone facing similar issues: It took me a while to figure out that the various documentations on typeorm are confusing and conflicting at the moment because they just moved to v0.3.0 and not everything has been updated.

How to delete a

I created an npm link inside a local dependency. I've since deleted that local dependency off my HDD.
Now I'm trying to delete this npm link.
I've tried:
npm rm --global dependency
npm uninstall dependency
npm unlink --no-save dependency
However, after doing all that, and after the code has been deleted from my HDD, npm link dependency still works when called from my main project. How to delete it properly? Here's my package.json:
{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"copy-webpack-plugin": "^9.0.1",
"d3-array": "^3.0.1",
"d3-dsv": "^3.0.1",
"d3-format": "^3.0.1",
"d3-scale": "^4.0.0",
"d3-time-format": "^4.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.3.5"
},
"devDependencies": {
"#types/d3-array": "^3.0.1",
"#types/d3-dsv": "^3.0.0",
"#types/d3-format": "^3.0.1",
"#types/d3-scale": "^4.0.1",
"#types/d3-time-format": "^4.0.0",
"#types/react-dom": "^17.0.9",
"html-webpack-plugin": "^5.3.2",
"ts-loader": "^9.2.3",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
Can you post your package.json ?
Weird, this should works
npm unlink dependency
rm -rf node_modules && npm install
It was asked here How do I uninstall a package installed using npm link?
UPD
Can remove symlink from global node_modules.
Find where is global npm list -g and remove it
rm -rf `npm list -g | head -1`/node_modules/dependency

How do I run locally?

I'm used to React and doing npm start to get my app running locally. However, when I run that on my new project it prompts that there is no start script. And upon further inspection, there isn't one.
If this is what my package.json looks like how do I get this running locally?
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.13.0",
"axios": "^0.19",
"bootstrap": "^4.5.0",
"cross-env": "^7.0",
"datatables.net": "^1.10.22",
"datatables.net-bs4": "^1.10.22",
"datatables.net-plugins": "^1.10.22",
"install": "^0.13.0",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.9",
"lodash": "^4.17.20",
"moment-timezone": "^0.5.32",
"npm": "^6.14.9",
"popper.js": "^1.16.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-recaptcha-v3": "^1.9.0"
}
}
It's a Laravel environment using PHP for back end and Vue for front end. I feel really stupid for not knowing this, but when I search I'm also not finding anything.
I'm using PhpStorm, I downloaded XAMPP, Composer, and PHP. I'm not sure what I'm missing or need to do? Help, please. If I'm missing any information I can certainly provide it to the best of my ability.
I'm a dingbat, I realized I wasn't running backend. So.. I did php artisan serve and received this. Any suggestions?
[![enter code here][2]][2]
C:\Users\emzib\ValorSystems.com>php artisan serve
PHP Warning: require(C:\Users\emzib\ValorSystems.com/vendor/autoload.php): Failed to open stream: No such file or directory in C:\Users\emzib\ValorSystems.com\artisan on line 18
PHP Fatal error: Uncaught Error: Failed opening required 'C:\Users\emzib\ValorSystems.com/vendor/autoload.php' (include_path='.;C:\php\pear') in C:\Users\emzib\ValorSystems.com\artisa
n:18
Stack trace:
#0 {main}
thrown in C:\Users\emzib\ValorSystems.com\artisan on line 18
Try below steps
composer install
npm install
npm run dev

webpack-cli Unknown argument and SyntaxError

i'm new to prestashop theme development.
i had setup my local enviroment and all works fine.
i try to build a theme from the classic default theme.
i go into the _dev folted inside the theme and run "npm install".
next i run "npm run build" to run the script: "build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks"
and i get the following error:
> ADMIN#DESKTOP-5JOQKQA MINGW64 /c/laragon/www/PrestaShopDev/themes/prodet/_dev ((1.7.7.0))
> $ npm run build
>
> > prestashop-classic-dev-tools#1.0.0 build C:\laragon\www\PrestaShopDev\themes\prodet\_dev
> > NODE_ENV=production webpack --progress --colors --debug --display-chunks
>
> [webpack-cli] Unknown argument: --colors
> Did you mean --color?
> [webpack-cli] Unknown argument: --debug
> [webpack-cli] Unknown argument: --display-chunks
> Note: This command was run via npm module 'win-node-env'
> npm ERR! code ELIFECYCLE
> npm ERR! errno 2
> npm ERR! prestashop-classic-dev-tools#1.0.0 build: `NODE_ENV=production webpack --progress --colors --debug
> --display-chunks`
> npm ERR! Exit status 2
> npm ERR!
> npm ERR! Failed at the prestashop-classic-dev-tools#1.0.0 build script.
> npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
>
> npm ERR! A complete log of this run can be found in:
> npm ERR! C:\Users\ADMIN\AppData\Roaming\npm-cache\_logs\2020-12-11T16_17_37_009Z-debug.log
how can i fix it?
here is the package.json file:
{
"name": "prestashop-classic-dev-tools",
"version": "1.0.0",
"description": "Tools to help while developing the Classic theme",
"main": "index.js",
"scripts": {
"build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks",
"watch": "webpack --progress --colors --debug --display-chunks --watch"
},
"author": "PrestaShop",
"license": "AFL-3.0",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-loader": "^8.2.2",
"bootstrap": "4.0.0-alpha.5",
"bootstrap-touchspin": "^3.1.1",
"bourbon": "^4.2.6",
"css-loader": "^5.0.1",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"flexibility": "^1.0.5",
"jquery": "^3.5.1",
"jquery-touchswipe": "^1.6",
"jquery.browser": "^0.1.0",
"material-design-icons": "^2.1.3",
"node-sass": "^4.14.1",
"notosans-fontface": "~1.0.1",
"postcss-flexibility": "^1.0.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.14.1",
"tether": "^1.1.1",
"velocity-animate": "^1.2.3",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-sources": "^0.1.0"
}
}
my node version is:
$ node -v
v10.18.1
my npm version is:
$ npm -v
6.13.4
i really don't understand how to fix this.
I am also new to prestashop development.
I had the same error.
I solved it using a second clone of the classic folder.
the error is probably due to the webpack version.
Here is the package.json
{
"name": "prestashop-classic-dev-tools",
"version": "1.0.0",
"description": "Tools to help while developing the Classic theme",
"main": "index.js",
"scripts": {
"build": "NODE_ENV=production webpack --progress --colors --debug --display-chunks",
"watch": "webpack --progress --colors --debug --display-chunks --watch"
},
"author": "PrestaShop",
"license": "AFL-3.0",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-loader": "^5.3.2",
"bootstrap": "4.0.0-alpha.5",
"bootstrap-touchspin": "^3.1.1",
"bourbon": "^4.2.6",
"css-loader": "^0.27.3",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"flexibility": "^1.0.5",
"jquery": "^2.1.4",
"material-design-icons": "^2.1.3",
"node-sass": "^4.14.1",
"notosans-fontface": "~1.0.1",
"postcss-flexibility": "^1.0.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.14.0",
"tether": "^1.1.1",
"velocity-animate": "^1.2.3",
"webpack": "^2.2.1",
"webpack-sources": "^0.1.0"
}
}
in the clone after
npm install
npm run build
For me, it worked and compiles the theme

How can I use 'watch' in my npm scripts?

I have the following directory structure:
And my package.json looks like this:
{
"name": "personal_site",
"version": "1.0.0",
"description": "My personal website.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
"html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
"imagemin": "imagemin src/images dist/images",
"serve": "http-server ./dist"
},
"author": "Dean Gibson",
"license": "ISC",
"dependencies": {
"bourbon": "^4.2.6",
"bourbon-neat": "^1.7.4",
"normalize-scss": "^4.0.3"
},
"devDependencies": {
"html-minifier": "^1.3.0",
"http-server": "^0.9.0",
"node-sass": "^3.4.2"
}
}
So firstly, I have to run each of these scripts individually e.g. npm run node-sass or npm run html-minifier etc. What I'd ideally want is to run npm serve which will do the following:
run html-minifier
run node-sass
run run image-min
run http-server
Lastly, watch everything in my src folder and run
the respective scripts as files change e.g. node-sass etc..
How can I best tackle this problem?
You can watch your directories using nodemon.
One solution for you is to create three watch scripts, one for each task:
watch:node-sass,
watch:html-minifier, and
watch:imagemin.
Then have a central script watch starting the three:
{
"name": "personal_site",
"version": "1.0.0",
"description": "My personal website.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
"html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
"imagemin": "imagemin src/images dist/images",
"serve": "http-server ./dist",
"watch:node-sass": "nodemon -e scss -x \"npm run node-sass\"",
"watch:html-minifier": "nodemon -e html -x \"npm run html-minifier\"",
"watch:imagemin": "nodemon --watch src/images -x \"npm run imagemin\"",
"watch": "npm run watch:node-sass & npm run watch:html-minifier & npm run watch:imagemin"
},
"author": "Dean Gibson",
"license": "ISC",
"dependencies": {
"bourbon": "^4.2.6",
"bourbon-neat": "^1.7.4",
"normalize-scss": "^4.0.3"
},
"devDependencies": {
"html-minifier": "^1.3.0",
"http-server": "^0.9.0",
"node-sass": "^3.4.2"
}
}
Read also: How to Use npm as a Build Tool.
I advise onchange, see this boilerplate.
For example,
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
or
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
No Grunt or Gulp needed!
The most widely adopted tools for this scripted case is to go with gulp or grunt. They are tools that you will encounter very often. You can also find their grunt/gulp libs for your minify/concat/copy/imagemin, as well as watcher libs so they change as you make changes to code. Nodemon/forever/pm2 have watch capabilites to restart your http server as well

Categories

Resources