Android - `main` module field for "react-native-gesture-handler" lib that could not be resolved in Azure CI & its working fine in local machine - react-native

I am working with the azure pipeline for CICD for React native app. I am using macOS Big Sur (11.4) and Android Studio 4.2.2 as a local machine to create and test the app. App working fine on the local machine without any warning or issue. However, when I am pushing the code on the Azure pipeline it is giving me errors as below,
* /Users/runner/work/1/s/node_modules/react-native-gesture-handler/src/index.ts/index(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json).
Error: While trying to resolve module `react-native-gesture-handler` from file `/Users/runner/work/1/s/index.js`, the package `/Users/runner/work/1/s/node_modules/react-native-gesture-handler/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/runner/work/1/s/node_modules/react-native-gesture-handler/src/index.ts`. Indeed, none of these files exist:
* /Users/runner/work/1/s/node_modules/react-native-gesture-handler/src/index.ts(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)
* /Users/runner/work/1/s/node_modules/react-native-gesture-handler/src/index.ts/index(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)
at DependencyGraph.resolveDependency (/Users/runner/work/1/s/node_modules/metro/src/node-haste/DependencyGraph.js:436:17)
at Object.resolve (/Users/runner/work/1/s/node_modules/metro/src/lib/transformHelpers.js:317:42)
at resolve (/Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
at /Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
at Array.reduce (<anonymous>)
at resolveDependencies (/Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
at /Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)
at _next (/Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:9)
info Run CLI with --verbose flag for more details.
> Task :app:bundleMasterReleaseJsAndAssets FAILED
> Task :app:mergeUatDebugResources
FAILURE: Build failed with an exception.
My observation is that the Azure pipeline does not have macOS Big Sur as Agent. My local machine changes some configurations to support the latest Android studio and macOS and the azure pipeline agent does not support macOS Big Sur reason it is not able to find it
.
NOTE: I have tried all clean processes like yarn, pod, or delete node_module.
[azure-devops]

I have got the solution for the issue.
Actually, the latest version of macOS Big Sur (11.4) was not having a node install on VM.
I did some changes in the pipeline.
pool:
vmImage: macOS-11
steps:
- checkout: self
persistCredentials: true
clean: true
- task: NodeTool#0
displayName: 'Install Node'
inputs:
versionSpec: 'v16.6.2' # you can use your desired version here
- script: yarn install
displayName: Install Dependencies

Related

Error with CocoaPods dependencies (Multiple Podfiles were found) while setting up react react native CLI environment on MacOS M1

After I create a new project using the below code in terminal
niteshrastogi#Niteshs-MacBook-Air ~ % npx react-native init AwesomeProject1
Takes a lot of time on Installing Cocoapods dependencies step and returns an error. See this Error
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing Bundler
✖ Installing CocoaPods dependencies (this may take a few minutes)
error warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.11.3/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md
✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
at createFromTemplate (/Users/niteshrastogi/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/commands/init/init.js:129:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.initialize [as func] (/Users/niteshrastogi/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/commands/init/init.js:181:3)
at async Command.handleAction (/Users/niteshrastogi/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/index.js:106:9)
I am new to development and trying to setup a development environment for the first time. Any help with this would be helpful.
Followed all the steps mentioned here to set up react native CLI and create my first project.
System config: M1 Ventura 13.2 macos watchman version: 2023.02.06.00 homebrew version: Homebrew 3.6.21 node: v19.6.0
Also installed Xcode with the latest version and selected the latest command line tool location.
enter image description here

Node-sass binding problem in Github-Actions

I'm setting up a GitHub action with following steps
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#master
- uses: borales/actions-yarn#master
with:
cmd: install # will run `yarn install` command
- uses: actions/setup-node#master
with:
node-version: '12.x'
- run: npm run build:prod
It crashes on building the app becuase of OS mismatch on Node Sass library
./node_modules/font-awesome-loader/font-awesome.config.js) Module
build failed (from ./node_modules/sass-loader/dist/cjs.js): Error:
Missing binding
/home/runner/work/xxx/xxx/node_modules/node-sass/vendor/linux-x64-72/binding.node
Node Sass could not find a binding for your current environment:
Linux 64-bit with Node.js 12.x
Found bindings for the following environments:
- Linux/musl 64-bit with Node.js 12.x
Running npm rebuild node-sass as a step causes errors since the agent does not have admin permissions.
Any idea why Github-Actions is giving me linux/musl instead of linux?
The issue was with mixing yarn and npm. I was using yarn to install and npm to build. Doing both with yarn solved the problem.

Errors when Pushing Vue.js app with IBM Cloud+Cloud Foundry Node Buildpack

I am really new (this is my first time) to using IBM Cloud.I have a Vue.js app that I would like to deploy on IBM Cloud with continuous delivery. I have my Vue project in a GitHub repository, and I would like to be able to deploy the project automatically upon changes to the master branch of the repository. I have successfully set up the tool chain so that the "Delivery Pipeline" runs upon changes to the master branch. See screenshot:
Within the Delivery Pipeline, I have two stages: Build and Deploy. See screenshot 2:
I (think) I have successfully set up the Build Stage, where I install npm, then proceed to run the command "npm run build" to create a deployable bundle, with this script:
bash
#!/bin/bash
export NODE_VERSION=8
export NVM_VERSION=0.33.11
npm config delete prefix \
&& curl -o-
https://raw.githubusercontent.com/creationix/nvm/v${NVM_VERSION}
/install.sh | bash \
&& export NVM_DIR="$HOME/.nvm" \
&& . $NVM_DIR/nvm.sh \
&& nvm install $NODE_VERSION \
&& nvm alias default $NODE_VERSION \
&& nvm use default \
&& node -v \
&& npm -v
echo "Installing NPM"
npm install
echo "NPM install successful"
echo "Attempting npm run build"
npm run build
echo "NPM run build successful"
This is where the uncertainty arises. I want to deploy the project, which after npm run build should just require index.hmtl and build.js, which is in the 'dist' folder.
I don't know if this is necessary, but following the npm install and npm run build stage, I added this stage, which I really don't know what does. I have only added it because the boilerplate SDK for Node.js™
had this stage prior to the deploy stage, see screenshot 3:
After this, I have the Deploy stage set to take the 'Simple Build' stage as its input. It deploys it with a simple cloud foundry push command. However, I get these errors in the log, after it downloads the various buildpacks:
Staging...
-----> IBM SDK for Node.js Buildpack v3.25.1-20190115-1637
Based on Cloud Foundry Node.js Buildpack v1.5.24
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version (latest stable) via 'node-version-resolver'
Installing Node.js (6.16.0) from cache
Using default npm version: 3.10.10
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (package.json)
-----> Installing App Management
WARN: App Management cannot be installed because the start script cannot be found.
To install App Management utilities, specify your 'node' start script in 'package.json' or 'Procfile'.
Checking for Dynatrace credentials
No Dynatrace Service Found (service with substring dynatrace not found in VCAP_SERVICES)
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
└── vue#2.6.10
! This app may not specify any way to start a node process
http://docs.cloudfoundry.org/buildpacks/node
Exit status 0
Staging complete
Uploading droplet, build artifacts cache...
Uploading build artifacts cache...
Uploading droplet...
Uploaded build artifacts cache (15.3M)
Uploaded droplet (29.4M)
Uploading complete
Stopping instance 64ed3f5f-71eb-477b-afc1-0e07e2e74fdb
Destroying container
Successfully destroyed container
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 starting
0 of 1 instances running, 1 crashed
FAILED
Error restarting application: Start unsuccessful
Any ideas? Where am I going wrong? Any help would be greatly appreciated!
Got it working. I just needed to add the dependencies/require statements in the app.js file (some Express stuff), and then I removed that extra 'Simple build" stage

Cache npm install Task in VSTS

I have configured a private agent in VSTS and have installed NPM there globally. When I'm trying to install NPM through my build task, it is still installing NPM packages for every build which is taking an aweful lot of time- approximately 12 minutes.
How can I cache the NPM installations so that the build time is reduced?
We use npm-cache, npm-cache is a node module that will calculate a hash of your package.json file for every hash it will create zip folder on your build server with the content of node_modules, now npm install is reduced to extracting a zip on every build (of course only in case you didn’t actually change package.json).
The idea is: in the first time the tool download the npm packages and save them locally, in the second time if the package.json not changed he takes the packages from the local disk and copy them to the build agent folder, only if the package.json changed he downloads the packages from the internet.
Install the npm-cache on the build machine:
npm install npm-cache -g
In the build definition add Command Line task (Tool: C:\Windows\User\AppData\Roaming\npm\npm-cache (or just npm-cache if you add the tool to environment path variables); Arguments:install npm; Working folder: $(Build.SourcesDirectory) (or where package.json located).
MS has finally implemented this feature (currently in beta) https://learn.microsoft.com/en-us/azure/devops/pipelines/caching/index?view=azure-devops#nodejsnpm
From there:
variables:
npm_config_cache: $(Pipeline.Workspace)/.npm
steps:
- task: CacheBeta#0
inputs:
key: $(Build.SourcesDirectory)/package-lock.json
path: $(npm_config_cache)
displayName: Cache npm
- script: npm ci
Unfortunately we cannot cache the NPM installations as no such a built-in feature for now.
However there's already a user voice submitted to suggest the feature : Improve hosted build agent performance with build caches, and seems the VSTS team are actively working on this now...
For now, you can try to speed Up NPM INSTALL on Visual Studio Team Services
Use Cache task
Caching is added to a pipeline using the Cache pipeline task. This
task works like any other task and is added to the steps section of a
job
With the following configuration:
pool:
name: Azure Pipelines
steps:
- task: Cache#2
inputs:
key: 'YOUR_WEB_DIR/package.json'
path: 'YOUR_WEB_DIR/node_modules/'
- task: Npm#1
inputs:
command: 'install'
workingDir: 'YOUR_WEB_DIR/frontend'
You can use key YOUR_WEB_DIR/package-lock.json too, but be aware that file might be changed by other next step like npm install so hash also will be changed.

Missing node_modules when deploying AngularJS2 application to Bluemix

We're trying to deploy an AngularJS2 application to bluemix but we're missing the folder "node_modules" after the application was deployed to the server. We're using npm to build the application.
I found the following post that is mentioning the problem: (https://developer.ibm.com/answers/questions/181207/npm-install-within-subdirectory-not-creating-node.html)
My question would now be: what's the recommended best practice?
I believe you are installing the node modules using npm install, you also should save those module in your package.json file which you can do that by npm install --save.
The recommended best practice would be to Setup a Build Pipeline.
There could be 3 stages or more:
Build Stage: It builds the app so doing things like npm install there so your folder node_modules gets created for you.
Test Stage: Tests the app so doing things like npm test would run all the tests in your app
Deploy Stage: Once build and deploy stage runs successfully, Deploy will actually deploy the app to the Bluemix domain.