Develop Reference

Npm error when incuding x-ray-scraper in project

I'm developing an application in Vue, also using the x-ray-scraper library, but when I try to run npm run serve in the console to view the application locally I get the following error:
This dependency was not found:
* _http_common in ./node_modules/http-outgoing/index.js
To install it, you can run: npm install --save _http_common
Then I tried to run the command npm install --save _http_common and again I get an error:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for undefined#_http_common.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
Without the x-ray-scraper library, everything starts up fine, but if I include it in my project, errors appear.
Perhaps the error is related to the version, but I don't understand how to fix it.
My package.json looks like:
{
"name": "pc-components",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.21.0",
"cheerio": "^1.0.0-rc.3",
"core-js": "^3.6.5",
"dns": "^0.2.2",
"phantom": "^6.3.0",
"selenium-webdriver": "^4.0.0-alpha.8",
"vue": "^2.6.11",
"webpage": "^0.3.0",
"x-ray-scraper": "^3.0.6"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
}
}
Thanks for any help.

The issue has nothing to do with the import statement, nor are there any issue with the dependencies you have installed.
This is my test:
npm init into any directory you want
npm install x-ray-scraper
Then:
const x = require("x-ray-scraper");
x('google.com', 'title')
.then((title) => {
console.log(title); // Google
});
// logs Google
You need a simple backend, even a couple of lines long, in order to initiate the service and use the package.
You can use whatever you like in the front-end, Vue, React, etc.
You do not need any extra dependencies at all from what you already have.
Please read the docs to see use cases

Setting Up Babel for JSX on Mac

Trying to set up Babel for React/JSX.
I've set up a package.json file and used NPM to install babel-cli and babel-preset-react.
~~from my package.json file~~
"babel": {
"presets": [
"react"
]
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-preset-react": "^6.24.1"
},
"dependencies": {
"#babel/polyfill": "^7.2.5"
}
I should be able to type (at the command line):
$ babel --version
and get a result. Instead, I get:
-bash: babel: command not found
Any ideas how to fix this? I want to start compiling ES6 JavaScript and JSX to regular JavaScript.

You'll need to install babel globally for it to become available as a bash command. npm install -g babel.
Alternatively to installing it globally the executable will be in the node_modules path. ./node_modules/.bin/babel
If you're using it apart of webpack or some other build tool your config should be OK.

NPM Installing non root dependencies under node_modules?

The project #superflycss/component-navbox has the following dependencies:
"devDependencies": {
"#superflycss/component-body": "^1.0.1",
"#superflycss/component-display": "^1.0.2",
"#superflycss/component-header": "^2.1.0",
"#superflycss/component-test": "^3.6.14",
"#superflycss/foundation": "^2.0.3",
"#superflycss/superflycss": "^1.0.0",
"#superflycss/utilities-colors": "^3.0.8",
"#superflycss/utilities-effects": "^2.1.0",
"#superflycss/utilities-fonts": "^3.3.7",
"#superflycss/utilities-format": "^1.1.1",
"#superflycss/utilities-layout": "^4.0.4",
"lite-server": "^2.4.0",
"npm-check-updates": "^2.15.0"
},
"dependencies": {
"#superflycss/variables-dimension": "^2.0.0",
"#superflycss/variables-layout": "^2.0.0"
}
So when doing:
git clone git#github.com:superflycss/component-navbox.git
cd component-navbox
npm i
I would expect only the root dependencies to show up in the node_modules folder.
However another dependency variables-colors also shows up in node_modules.
IIUC this should not happen or am I missing something?
One of the problems with this is that the variables-colors version being installed is outdated, however since utilities-colors also depends on this, it uses the older version rather then the newer, and that leads to linting errors, etc.

There was a mismatch between package-lock.json and package.json. I removed the lock file and also node_modules and did npm i and it refreshed with all the dependencies being correct.

gulp-babel don't produce any output file or doesn't work properly

I'm working on a JS library and I want to transpile all javascript code written in ES6 to ES5 standard to get more support in current browsers.
The thing is I want to use Babel with the Gulp tasks, so I've installed all this NPM packages [package.json]:
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"babel-cli": "^6.26.0",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-terser": "^1.1.5"
}
Next my .babelrc file has the following content:
{
"presets": ["env"]
}
And the gulpfile.js is written as following:
const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');
gulp.task('minify', function () {
return gulp.src('src/app/classes/*.js')
.pipe(sourcemaps.init())
.pipe(babel()) // I do not pass preset, because .babelrc do exist
.pipe(concat('output.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('build/js'))
});
gulp.task('default', ['minify']);
The issue is when I execute the gulp command on the project root directory, it not produce output file. The console shows a successful execution but nothing appears inside build/js directory, or neither inside another directory of the project.
#user1:/project-route$> gulp
[17:36:54] Using gulpfile /project-route/gulpfile.js
[17:36:54] Starting 'minify'...
I also tried without sourcemaps functions and the result is the same, nothing!!!.

For an extrange reason, when I execute in terminal babel -V the result is:
#user1:/project-route$> gulp
6.26.0 (babel-core 6.26.3)
This is not the same version I installed (that I remember):
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
So, I uninstalled all this dependencies:
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"gulp-babel": "^8.0.0",
And I installed this ones in replacement:
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp-babel": "^7.0.1",
And all functions works now!!!
Of course, the explanation is accordingly to this note on the README.md of the gulp-babel plugin, realizing about this matter cost me a lot of headaches:
Install guide (gulp-babel on GitHub)
Install
Install gulp-babel if you want to get the pre-release of the next
version of gulp-babel.
# Babel 7
$ npm install --save-dev gulp-babel #babel/core #babel/preset-env
# Babel 6
$ npm install --save-dev gulp-babel#7 babel-core babel-preset-env

Do I need #types/ before every dependency in react native?

I would like to convert my existing react native app to typescript.
The documentation says to uninstall existing dependencies and replace them with something like this:
yarn add --dev #types/jest #types/react #types/react-native #types/react-test-renderer
Do I need to do this with every dependency? What if some dependencies don't have #types/ ?
Here is my package.json:
{
"name": "reactnative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^28.0.0",
"faker": "^4.1.0",
"formik": "^0.11.11",
"immutability-helper": "^2.7.1",
"lodash": "^4.17.10",
"native-base": "^2.7.1",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-actionsheet": "^2.4.2",
"react-native-autogrow-textinput": "^5.1.1",
"react-native-firebase": "^4.2.0",
"react-native-keyboard-input": "^5.2.3",
"react-native-keychain": "^3.0.0-rc.3",
"react-native-material-color": "^1.0.15",
"react-native-parsed-text": "0.0.20",
"react-native-section-list-get-item-layout": "^2.2.3",
"react-native-ui-kitten": "^3.0.1",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^2.5.5",
"react-redux-firebase": "^2.1.6",
"recompose": "^0.27.1",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.3.0",
"yup": "^0.25.1"
},

The documentation says to uninstall existing dependencies and replace them
Actually you have to install both the package, such as react and the related types as #types/react. If react is already installed, you don't have to uninstall and reinstall.
Do I need to do this with every dependency?
As long as you want types for it.
What if some dependencies don't have #types/ ?
Then you either type it on your own, or you type it as any and you don't have the typesafety of Typescript anymore.

No, packages that start with #types/ are TypeScript definitions. They should be installed in addition to the actual packages if these don't already ship with TS definitions (many large/popular libraries do). Your editor and the TypeScript compiler will use the definitions to perform type checking.

#types typings exist for all popular libraries. Some libraries include typings (.d.ts files), no typings are needed for them, the example is axios.
For libraries that don't have typings, a developer can provide own type declarations or use untyped imports, e.g. with require. The example is open issue for react-native-actionsheet.
The documentation says to uninstall existing dependencies
The documentation shouldn't say anything like that. Existing dependencies shouldn't be uninstalled. Only respective #type dependencies should be added.