How to setup plain text env vars in Expo build? - react-native

I'm working on an expo project and trying to link environment variables for build profiles. I was trying to achieve that using eas.json but I cannot get it to work.
I have two build profiles - development and production:
{
"cli": {
"version": ">= 3.3.1"
},
"build": {
"development": {
"distribution": "internal",
"env": {
"API_URL": "https://staging-api.example.com",
"STRIPE_ENV": "test"
},
"ios": {
"resourceClass": "m1-medium"
}
},
"production": {
"env": {
"API_URL": "https://api.example.com",
"STRIPE_ENV": "production"
},
"ios": {
"resourceClass": "m1-medium"
},
"autoIncrement": true
}
},
"submit": {
"production": {
...
}
}
}
Build command:
eas build --profile development --platform ios
Based on their documentation, I sohuld be able to use process.env.API_URL but it's undefined.
Am I missing something?

Putting those values in eas.json is only ensuring that those envs will be set during the build process on EAS. To pass them to the application code you need to pass those values to the extra field in app.config.js.
process.env.API_URL will be defined when evaluating app.config.js, but in your application code, you need to access those values via expo-constants package.

Related

This build is configured to query EAS Update for updates, however no channel is set in eas.json

When I build my EAS project I'm getting the following warning.
This build is configured to query EAS Update for updates, however no channel is set in eas.json.
My eas.json looks like this:
"cli": {
"version": ">= 2.8.0"
},
"build": {
"staging": {
"distribution": "internal",
"android": {
"gradleCommand": ":app:assembleRelease"
},
"channel": "staging"
},
}
}
What do I need to do for the warning to go away / be able to send updates to my app?

Detox/Jest Test suite failed to run TypeError: Class extends value #<Object> is not a constructor or null

I'm trying to integrate some e2e tests into my react native (expo ejected) mobile project. I'm following the instructions found on the detox Getting Started page. I'm able to successfully build my project, but everytime I attempt the detox test command:
detox test --configuration ios --loglevel trace
I get the following error:
FAIL e2e/firstTest.e2e.jsrun...
● Test suite failed to run
TypeError: Class extends value #<Object> is not a constructor or null
at Object.<anonymous> (../node_modules/detox/runners/jest-circus/environment.js:24:38)
at Object.newLoader (../node_modules/pirates/lib/index.js:141:7)
at Object.<anonymous> (../node_modules/detox/runners/jest-circus/index.js:4:32)
09:07:59.324 detox[21032] ERROR: [cli.js] Command failed: jest --config e2e/config.json --testNamePattern '^((?!:android:).)*$' e2e
I have a fairly simple out-of-the-box configuration of detox and jest:
package.json
...
"detox": "^19.6.2"
"jest": "^27.0.0",
"jest-circus": "^27.5.1",
...
./e2e/config.json
{
"testEnvironment": "./environment",
"testRunner": "jest-circus/runner",
"testTimeout": 120000,
"testRegex": "\\.e2e\\.js$",
"reporters": ["detox/runners/jest/streamlineReporter"],
"verbose": true
}
./e2e/environment.js
const {
DetoxCircusEnvironment,
SpecReporter,
WorkerAssignReporter,
} = require('detox/runners/jest-circus');
class CustomDetoxEnvironment extends DetoxCircusEnvironment {
constructor(config, context) {
super(config, context);
// Can be safely removed, if you are content with the default value (=300000ms)
this.initTimeout = 300000;
// This takes care of generating status logs on a per-spec basis. By default, Jest only reports at file-level.
// This is strictly optional.
this.registerListeners({
SpecReporter,
WorkerAssignReporter,
});
}
}
module.exports = CustomDetoxEnvironment;
.detoxrc.json
{
"testRunner": "jest",
"runnerConfig": "e2e/config.json",
"skipLegacyWorkersInjection": true,
"apps": {
"ios": {
"type": "ios.app",
"binaryPath": "ios/build/Build/Products/Release-iphonesimulator/Example.app",
"build": "xcodebuild -workspace ios/Example.xcworkspace -configuration release -scheme Example -sdk iphonesimulator -derivedDataPath ios/build"
},
"android": {
"type": "android.apk",
"binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
}
},
"devices": {
"simulator": {
"type": "ios.simulator",
"device": {
"type": "iPhone 12 Pro"
}
},
"emulator": {
"type": "android.emulator",
"device": {
"avdName": "Pixel_3a_API_30_x86"
}
}
},
"configurations": {
"ios": {
"device": "simulator",
"app": "ios"
},
"android": {
"device": "emulator",
"app": "android"
}
}
}
It can't be this hard. Any help would be greatly appreciated.
Able to solve using Jest 27.0.1
I asked on github because I had the same problem as you and they gave me this solution

Can someone help me resolve this problem? Fatal error: Unable to find local grunt

I am learning hybris and I started using smartedit. The problem is that when I run ant clean all or ant updatesystem I get this error.
Running grunt default
grunt-cli: The grunt command line interface (v1.3.2)
Fatal error: Unable to find local grunt.
If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:
https://gruntjs.com/getting-started
What have I done till now:
I have grunt-cli installed globally, and grunt installed locally. Also, I run npm install.
Here is my packege.json file:
{
"name": "name",
"version": "1.0.0",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.4.1",
"grunt-contrib-jshint": "^3.0.0",
"grunt-contrib-watch": "^1.1.0"
},
"dependencies": {},
"description": "desc"
}
Here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
I tried a bunch of ways to resolve this problem but nothing seemed to work. Can someone help me out?

inject is not defined - CodeceptJs and CucumberJs

It's my first time using CodeceptJs and I'm struggling to run my feature file as the IDE asks me to implement steps for my scenario but this is already done, so I feel it may be searching for them somewhere other than the specified under the codecept.conf.js file?
When I run npx codeceptjs gherkin:steps or snippets on the terminal I get this message saying Could not include object Step Definition from ./step_definitions/steps.js from module '/Users/myUser/IdeaProjects/codeceptjs_webdriver/step_definitions/steps.js' The "from" argument must be of type string. Received undefined .
I then move the step_definitions folder to inside features as read that this would be the default location for these and now get an inject is not defined error, which may be the actual cause for the issue I'm getting, but not sure what to do to fix it.
I've tried on IntelliJ Ultimate, Webstorm and VSCode but get the same on all of them.
basic.feature
Feature: Business rules
In order to achieve my goals
As a persona
I want to be able to interact with a system
Scenario: do something
Given I have a defined step
steps.js
const {Given} = require('cucumber');
const {I} = inject();
Given(/^I have a defined step$/, function () {
I.amOnPage('/');
});
codecept.conf.js
exports.config = {
output: './output',
helpers: {
WebDriver: {
url: 'https:www.google.com',
browser: 'chrome'
}
},
include: {
I: './steps_file.js'
},
mocha: {},
bootstrap: null,
teardown: null,
hooks: [],
gherkin: {
features: './features/*.feature',
steps: ['./step_definitions/steps.js']
},
plugins: {
screenshotOnFail: {
enabled: true
},
pauseOnFail: {},
retryFailedStep: {
enabled: true
},
tryTo: {
enabled: true
}
},
tests: './*_test.js',
name: 'codeceptjs_webdriver'
}
package.json
{
"name": "codeceptjs_webdriver",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"codeceptjs": "^3.0.0",
"cucumber": "^5.0.1"
},
"dependencies": {
"#codeceptjs/configure": "^0.6.0"
},
"description": ""
}
IntelliJ Ultimate 2020.2
And here my Github repo
Thank you very much.
It's working now and I've come back to update it here if useful to someone else.
Was able to keep the steps under step_definitions/steps folder (not the one inside the features folder). To fix the non implemented issue had to install the wdio dependency. In order for this to take effect properly through running npm install both node_modules and package-lock.json had to be deleted to be freshly regenerated.
updated package.json
{
"name": "codeceptjs_webdriver",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "npx codeceptjs run"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"#wdio/selenium-standalone-service": "^6.6.2",
"codeceptjs": "^2.6.8",
"codeceptjs-assert": "0.0.4",
"webdriverio": "6.3.6"
},
"description": ""
}
updated codecept.conf.js
exports.config = {
output: './output',
helpers: {
WebDriver: {
url: 'https://www.google.com',
browser: 'chrome'
}
},
include: {
I: './steps_file.js'
},
mocha: {},
bootstrap: null,
teardown: null,
hooks: [],
gherkin: {
features: './features/*.feature',
steps: ['./step_definitions/steps.js']
},
plugins: {
wdio: {
enabled: true,
services: ['selenium-standalone']
// additional config for service can be passed here
},
screenshotOnFail: {
enabled: true
},
pauseOnFail: {},
retryFailedStep: {
enabled: true
},
},
tests: './*_test.js',
name: 'codeceptjs_webdriver'
}

npm run build for React app using incorrect path for index.js source

My npm run build fails with this:
✖ Building demo
Failed to compile with 1 error.
ERROR in multi ./node_modules/nwb/polyfills.js ./demo/src/index.js
Module not found: Error: Can't resolve '/Users/david/git/demoapp/demo/src/index.js' in '/Users/david/git/demoapp'
# multi ./node_modules/nwb/polyfills.js ./demo/src/index.js
Error running command: Build failed with errors.
Error: Build failed with errors.
at /Users/david/git/demoapp/node_modules/nwb/lib/webpackBuild.js:82:17
at emitRecords.err (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:269:13)
at Compiler.emitRecords (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:375:38)
at emitAssets.err (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:262:10)
at applyPluginsAsyncSeries1.err (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:368:12)
at next (/Users/david/git/demoapp/node_modules/tapable/lib/Tapable.js:218:11)
at Compiler.compiler.plugin (/Users/david/git/demoapp/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/Users/david/git/demoapp/node_modules/tapable/lib/Tapable.js:222:13)
at Compiler.afterEmit (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:365:9)
at require.forEach.err (/Users/david/git/demoapp/node_modules/webpack/lib/Compiler.js:354:15)
at /Users/david/git/demoapp/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/david/git/demoapp/node_modules/async/dist/async.js:1050:13)
at /Users/david/git/demoapp/node_modules/async/dist/async.js:958:16
at /Users/david/git/demoapp/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:112:15)`
This is incorrect in '/Users/david/git/demoapp' because the index is in /Users/david/git/demoapp/src or /Users/david/git/demoapp/lib for the ES5 version, /Users/david/git/demoapp/es for the ES6 version
My nwb.config.js looks like this:
const path = require('path');
function excludeNodeModulesExcept (modules) {
var pathSep = path.sep;
if (pathSep === '\\') { // must be quoted for use in a regexp:
pathSep = '\\\\';
}
var moduleRegExps = modules.map(function (modName) { return new RegExp("node_modules" + pathSep + modName);});
return function (modulePath) {
if (/node_modules/.test(modulePath)) {
for (var i = 0; i < moduleRegExps.length; i++) {
if (moduleRegExps[i].test(modulePath)) {
console.log("Allowed babel transpiling of " + modulePath);
return false;
}
}
return true;
}
return false;
};
}
module.exports = {
type: 'react-component',
npm: {
esModules: true,
umd: false
},
webpack: {
rules: {
babel: {
exclude: excludeNodeModulesExcept(['kontraktor-client', 'kontraktor-common']),
options: {
babelrc: false,
cacheDirectory: true
}
}
}
}
};
The relevant part of my package.json looks like this:
{
"name": "demoapp",
"version": "1.0.0",
"description": "Demo App",
"main": "lib/index.js",
"module": "es/index.js",
"files": [
"css",
"es",
"lib",
"umd"
],
"scripts": {
"build": "nwb build-react-component",
"images": "node imagesServer/index.js",
"serve": "nwb serve-react-app",
"clean": "nwb clean-module",
"start": "npm-run-all --parallel serve images",
"test": "nwb test-react",
"test:coverage": "nwb test-react --coverage",
"test:watch": "nwb test-react --server"
},
Is there a way of specify to nwb where the source index.js is located? I want to build a ES5 version of this React application.
Another confusion is that some posts and tutorials states that a directory named 'dist' is used to output the built code from 'npm run build'?
react-app doesnot support importing files outside src folder. so short answer ;you will have to eject'
or you can use npm link but your module must be exporting es5 beacuse again react-app will not transpile it for you.