How to do module name alias for third party package - react-native

I have a app that created by react-native init command.
My app import websocket package which in turn require http package and cause error said "Unable to resolve module http".
i.e: myApp -> 3rd-module -> ws -> http
I try to work-around by install "#tradle/react-native-http", and added follow lines to my app's package json file:
"browser": { "http": "#tradle/react-native-http" },
"react-native": { "http": "#tradle/react-native-http" },
but it doesn't work.
I also try using babel-plugin-module-resolver but unluck either. Here is my .babelrc :
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
["module-resolver", {
"alias": {
"#tradle/react-native-http": "http"
}
}]
]
}
How to do alias for my case? I research to fixing this problem by using webpack configuration, but don't know where is the configure file. After google, i think project created by react-native init use metro config instead of webpack.

try
["module-resolver", {
"alias": {
"http":"#tradle/react-native-http"
}
}]

Related

Jest: Must use import to load ES Module

I'm trying to configure jest/babel to do react component testing in my app. So far I'm facing some difficulties, in imports.
It throws this error:
Here is my babel.config.json:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-runtime"
],
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react"
]
}
I've trying adding "type": "module" in the package.json and it brings different problems upon itself. I would appreciate any help!

Composer require private repository from gitlab ssh ignored

I'm trying to pull a private repository from gitlab with composer without any success.
This is what I have in my composer.json file under repositories:
"repositories": [
{
"type": "vcs",
"url": "git#gitlab.com:the-vendor/dashboard-api.git"
}
]
When I clone the project like this: git#gitlab.com:the-vendor/dashboard-api.git manually, everything works fine.
Now when I require the project like so:
"require": {
"the-vendor/dashboard": "dev-orchestrate"
}
I also tried: "dev-main", "dev-main#dev", "dev-orchestrate#dev".
And run: composer update the-vendor/dashboard I get the following error:
Failed to download the-vendor/dashboard-api:The "https://gitlab.com/api/v4/projects/joij%2Fdashboard-api" file could not be downloaded (HTTP/2 404 ):
{"message":"404 Project Not Found"}
Your credentials are required to fetch private repository metadata (git#gitlab.com:the-vendor/dashboard-api.git)
A token will be created and stored in "/root/.composer/auth.json", your password will never be stored
To revoke access to this token you can visit https://gitlab.com/-/profile/personal_access_tokens
Username:
Installation failed, reverting ./composer.json and ./composer.lock to their original content.
I'm not sure what to make of this. Composer should be able to clone the project through ssh. But instead I get that vague 404 and then I have to give my username and password.
I also tried this:
"repositories": [
{
"type": "git",
"url": "git#gitlab.com:the-vendor/dashboard-api.git"
}
]
But then it behaves as if there is no "repositories" in the composer json at all, and I get this error:
Problem 1
- Root composer.json requires the-vendor/dashboard, it could not be found in any version, there may be a typo in the package name.
Potential causes:
- A typo in the package name
- The package is not available in a stable-enough version according to your minimum-stability setting
see <https://getcomposer.org/doc/04-schema.md#minimum-stability> for more details.
- It's a private package and you forgot to add a custom repository to find it
Read <https://getcomposer.org/doc/articles/troubleshooting.md> for further common problems.
This is the composer.json of the dashboard-api:
{
"name": "the-vendor/dashboard",
"type": "project",
"description": "TheVendor Dashboards",
"keywords": ["framework", "laravel"],
"license": "proprietary",
"require": {
"php": "^8.1",
"elasticsearch/elasticsearch": "v7.17.0",
"guzzlehttp/guzzle": "^7.2",
"laravel/framework": "^9.2",
"laravel/sanctum": "^2.14.1",
"laravel/tinker": "^2.7",
"ext-pdo": "*"
},
"require-dev": {
"fakerphp/faker": "^1.9.1",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^6.1",
"phpunit/phpunit": "^9.5.10",
"phpspec/prophecy": "1.15.0",
"spatie/laravel-ignition": "^1.0"
},
"autoload": {
"psr-4": {
"TheVendor\\Dashboard\\": "app/",
"Database\\Factories\\": "database/factories/",
"Database\\Seeders\\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"#php artisan package:discover --ansi"
],
"post-update-cmd": [
"#php artisan vendor:publish --tag=laravel-assets --ansi --force"
],
"post-root-package-install": [
"#php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"#php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"providers": [
"TheVendor\\Dashboard\\Providers\\AppServiceProvider",
"TheVendor\\Dashboard\\Providers\\ESClientServiceProvider",
"TheVendor\\Dashboard\\Providers\\ESCreateIndexesServiceProvider"
],
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
I wonder if anyone knows what I'm missing.
Alright! I found the problem. There is no need to go for an auth.json with an API Token. This is where I went wrong:
The main branch had a different package name! The branch I was trying to pull had the right one, but if the main composer.json has a different package name you get this error:
Root composer.json requires the-vendor/dashboard, it could not be found in any version, there may be a typo in the package name.
Once you have that, and require the package like this:
"require": [
"the-vendor/dashboard": "dev-orchestrate"
]
With this in the root of composer.json
"repositories": [
{
"type": "git",
"url": "git#gitlab.com:the-vendor/dashboard-api.git"
}
]
It will simply use ssh to clone the private repository

Vue.Js: Alias configurations

I am trying to make aliases for the components and sub-directories using jsconfig.json in my Vue.js project. But I am getting this error:
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#components/*": [
"./src/components/*"
],
}
},
"exclude": [
"node_modules"
]
}
SomeFile.vue
import GuestLayout from '#components/Layouts/GuestLayout';
Error:
ERROR Failed to compile with 1 error
...
To install it, you can run: npm install --save #components/Layouts/GuestLayout
I tried goggling for the issue but nothing seems to be working. This is the simplest one which found https://www.youtube.com/watch?v=U73TDohXmhQ
What am I doing wrong here..?
✔ Problem solved:
The thing that did the trick for me, was setting up the configurations in vue.config.js instead of using the jsconfig.json or tsconfig.json.
vue.config.js
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'#Layouts': path.resolve(__dirname, 'src/components/Layouts/'),
'#Inputs': path.resolve(__dirname, 'src/components/Input/'),
'#': path.resolve(__dirname, 'src/components/'),
}
}
}
}
SomeFile.vue
import GuestLayout from '#Layouts/GuestLayout';
import FormGroup from '#Inputs/FormGroup';
...

module is not defined and process is not defined in eslint in visual studio code

I have installed eslint in my machine and i have used visual studio code
i have certain modules and process to be exported
When i try to use "module" or "process" it shows
it was working fine before.
[eslint] 'module' is not defined. (no-undef)
[eslint] 'process' is not defined. (no-undef)
and here is my .eslintrc.json
{
"env": {
"browser": true,
"amd": true
},
"parserOptions": {
"ecmaVersion": 6
},
"extends": "eslint:recommended",
"rules": {
"no-console": "off",
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
I want to remove this error
You are probably trying to run this in node environment.
The env section should look like this:
"env": {
"browser": true,
"amd": true,
"node": true
},
In your ESLint config file, simply add this:
{
...
env: {
node: true
}
...
}
That should fix the "module" is not defined and "process" is not defined error.
That assumes you are running in a Node environment. There is also the browser option for a browser environment. You can apply both based on your need.
If you want to prevent ESLint from linting some globals then you will need to add the specific global variables in the globals section of the config.
globals: {
window: true,
module: true
}
You need to tell eslint that you are in a Node environment. My favourite way to do this for one-off files like gulpfile.js is to include this comment at the top:
/* eslint-env node */
I think you can just rename all your CommonJS config files to have .cjs as their extension and then add this to eslintrc.cjs:
module.exports = {
// ...
env: {
// If you don't want to change this to `node: true` globally
es2022: true,
},
// then add this:
overrides: [
{
files: ['**/*.cjs'],
env: {
node: true,
},
},
],
}

Webdriver io autocomplete in VS Code

I'm using Webdriver IO as the e2e testing framework. But this autocomplete issue is really slowing me down. VS Code doesn't auto complete the global variable browser and it's methods.
.eslintrc
{
"extends": ["eslint:recommended", "standard"],
"parser": "babel-eslint",
"plugins": [
"mocha",
"webdriverio"
],
"env": {
"webdriverio/wdio": true,
"mocha": true
},
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module"
},
"rules": {
"indent": ["error", 4]
}
}
.babelrc
{
"presets": ["es2015"],
"plugins": [
["transform-runtime", {
"polyfill": false
}]
]
}
I think you can use TypeScript typings.
Add 2 dependencies to package.json:
"#types/node": "^8.5.2",
"#types/webdriverio": "^4.8.7",
Install them, reload project. If autocomplete does not yet works, create
tsconfig.json in root of your project:
{
"compilerOptions": {
"allowJs": true,
"outDir": "./.built/"
}
}
You don't need to use typescript compiler, it will just provide autocomplete. Continue writing your js code as usual.
But if you wish to use typescript, here is small beginner guide:
http://webdriver.io/guide/getstarted/configuration.html#Setup-TypeScript