A clean-slate creation of an Expo-based React-Native app (npx create-expo-app my-app) and then installing react-native-elements runs fine on IOS, but generates the error below for running on the web. I also tried using the template provided by react-native-elements but wind-up with the same result.
Module parse failed: Unexpected token (7:58)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders
| import { defaultSpacing } from './theme';
| import { lightColors } from './colors';
> const isClassComponent = (Component) =>
Boolean(Component?.prototype?.isReactComponent);
| const combineByStyles = (propName = '') => {
| if (propName.endsWith('Style') || propName.endsWith('style')) {
at ./node_modules/#rneui/themed/dist/config/withTheme.js```
Related
I installed the TextToSpeech Cordova Plugin on my Ionic App:
"#ionic-native/text-to-speech": "^5.30.0",
"cordova-plugin-tts": "^0.2.3",
And used it in my vue file:
import { Plugins } from "#capacitor/core";
const { TextToSpeech } = Plugins;
...
methods: {
tts(text) {
TextToSpeech.speak(text)
.then(() => console.log("Success Speach"))
.catch((reason) => console.log(reason));
},
...
console.log(TextToSpeech);
I'm using Capacitor
IOS
When I'm trying to use the plugin on IOS: I get an unknown error: error {}
When I'm printing the plugin, I get: [log] - undefined
Browser
When I'm trying to use the plugin it prints as expecting: TextToSpeech does not have web implementation.
When I'm printing the plugin, I get: Proxy {}
So it's working and loaded in the Browser, but no on the Device.
I found the solution.
first update #ionic-native/core
npm uninstall --save #ionic-native/core && npm install --save #ionic-native/core#latest
The import the plugin like this
import { TextToSpeech } from "#ionic-native/text-to-speech";
When I try to run my tests using detox in a React Native Expo project, I get the following error:
detox[18834] WARN: [Client.js/PENDING_REQUESTS] App has not responded to the network requests below:
(id = -1000) isReady: {}
That might be the reason why the test "Login workflow should have login screen" has timed out.
detox[18834] INFO: Login workflow: should have login screen [FAIL]
FAIL e2e/firstTest.e2e.js (137.697 s)
Login workflow
✕ should have login screen (120015 ms)
● Login workflow › should have login screen
thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."
7 | });
8 |
> 9 | it('should have login screen', async () => {
| ^
10 | await expect(element(by.id('loginFormTitle'))).toBeVisible()
11 | });
12 |
at firstTest.e2e.js:9:3
at Object.<anonymous> (firstTest.e2e.js:8:1)
detox[18833] ERROR: [cli.js] Error: Command failed: node_modules/.bin/jest --config e2e/config.json '--testNamePattern=^((?!:android:).)*$' --maxWorkers 1 e2e
I am running iPhone 11 Pro simulator, and the expo app is already running in a separate server. I also have a Exponent.app in my /bin folder, which I downloaded from Expo's website. The logic in my test case doesn't require any timeout and it involves just a simple login screen.
Any solution for this error?
I had a similar issue using the latest version of Expo (v39).
It seems like the issue is that Detox waits for an app is ready event before running the tests, but this doesn’t get triggered with the most recent versions of the Expo SDK.
The solution I ended up with was to create a standalone build of the app and run Detox against that.
My .detoxrc.json looks like:
{
...,
"configurations": {
"ios": {
"type": "ios.simulator",
"build": "expo build:ios -t simulator",
"binaryPath": "bin/myapp.app",
}
}
}
As of December 2020, I'm using detox 17.14.3 with Expo 39.0.5 and I've managed to solve this issue without needing to use a standalone build. Patch and explanation provided below.
It turns out that detox-expo-helpers is overriding an environment variable (specifically SIMCTL_CHILD_DYLD_INSERT_LIBRARIES) to specify the path to the ExpoDetoxHook framework (provided by the expo-detox-hook package). Well, that update to the environment now happens too late in the cycle. It takes place when running Detox's reloadApp, but by then, Detox has started up Jest which has workers running with their own copy of process.env. Workers get a copy of process.env at the time of creation, and they are not shared with the parent process, so the changes this library makes to environment variables are not reflected inside Jest workers. The hook framework is not available to the running application, and so the Detox is stuck waiting for a ready signal that doesn't come.
Detox's launchApp for iOS simulator uses SIMCTL_CHILD_DYLD_INSERT_LIBRARIES to specify it's own library, but because the environment vars are isolated in the worker, it does not see the change this package makes. To solve this, I modified this library to expose the changes to process.env as a separate exported function, and then I call that much earlier in the test lifecycle to ensure it is set before any workers are started. Here is a patch compatible with patch-package.
# file patches/detox-expo-helpers+0.6.0.patch
diff --git a/node_modules/detox-expo-helpers/index.js b/node_modules/detox-expo-helpers/index.js
index 864493b..3147a55 100644
--- a/node_modules/detox-expo-helpers/index.js
+++ b/node_modules/detox-expo-helpers/index.js
## -45,7 +45,16 ## function resetEnvDyldVar(oldEnvVar) {
}
}
-const reloadApp = async (params) => {
+let initialized = false;
+let detoxVersion;
+let oldEnvVar;
+const init = () => {
+ if (initialized) {
+ return;
+ }
+
+ initialized = true;
+
if (!fs.existsSync(expoDetoxHookPackageJsonPath)) {
throw new Error("expo-detox-hook is not installed in this directory. You should declare it in package.json and run `npm install`");
}
## -56,12 +65,16 ## const reloadApp = async (params) => {
throw new Error ("expo-detox-hook is not installed in your osx Library. Run `npm install -g expo-detox-cli && expotox clean-framework-cache && expotox build-framework-cache` to fix this.");
}
- const detoxVersion = getDetoxVersion();
- const oldEnvVar = process.env.SIMCTL_CHILD_DYLD_INSERT_LIBRARIES;
+ detoxVersion = getDetoxVersion();
+ oldEnvVar = process.env.SIMCTL_CHILD_DYLD_INSERT_LIBRARIES;
if (semver.gte(detoxVersion, '9.0.6')) {
process.env.SIMCTL_CHILD_DYLD_INSERT_LIBRARIES = expoDetoxHookFrameworkPath;
}
+}
+
+const reloadApp = async (params) => {
+ init();
const formattedBlacklistArg = await blacklistCmdlineFormat(params && params.urlBlacklist);
const url = await getAppUrl();
## -121,5 +134,6 ## module.exports = {
getAppUrl,
getAppHttpUrl,
blacklistLiveReloadUrl,
+ init,
reloadApp,
};
With that in place, I modified my e2e/environment.js file to look like the following. The addition is the initExpo call. When it runs this early in the test lifecycle, the environment is modified before any workers are started, and as a result, calls to reloadApp no longer wait indefinitely.
/* eslint-disable import/no-extraneous-dependencies */
const { init: initExpo } = require('detox-expo-helpers');
const { DetoxCircusEnvironment, SpecReporter, WorkerAssignReporter } = require('detox/runners/jest-circus');
class CustomDetoxEnvironment extends DetoxCircusEnvironment {
constructor(config) {
super(config);
initExpo();
// 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;
I'm using the package react-native-localize to provide localization in an app. I've already linked the library and it works fine running on a device.
Issue:
When I test a component that imports react-native-localize. I get the error react-native-localize: NativeModule.RNLocalize is null.
In order to resolve this null error I call jest.mock('react-native-localize'); at the top of the test file. But I still get an error pointing to NativeModule.RNLocalize is null. I've also provided the mock as mentioned in the package README to no avail.
import 'react-native';
import React from 'react';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
import * as RNLocalize from 'react-native-localize';
// mocking the module here with jest.mock
jest.mock('react-native-localize');
it('renders correctly', () => {
renderer.create(<App />);
});
Question:
How can you resolve a NativeModule.RNLocalize is null error in test?
Test Stack Trace:
FAIL __tests__/App-test.js
● Test suite failed to run
react-native-localize: NativeModule.RNLocalize is null. To fix this issue try these steps:
• Run `react-native link react-native-localize` in the project root.
• Rebuild and re-run the app.
• If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods.
• Check that the library was linked correctly when you used the link command by running through the manual installation instructions in the README.
* If you are getting this error while unit testing you need to mock the native module. Follow the guide in the README.
If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-localize
16 |
17 | import {NavigationContainer} from '#react-navigation/native';
> 18 | import * as RNLocalize from 'react-native-localize';
| ^
19 | import {Icon} from 'native-base';
20 | import {createStackNavigator} from '#react-navigation/stack';
21 | const Stack = createStackNavigator();
at Object.<anonymous> (node_modules/react-native-localize/lib/commonjs/module.js:17:9)
at Object.<anonymous> (node_modules/react-native-localize/lib/commonjs/index.js:3:1)
at Object.<anonymous> (src/modules/AppView.js:18:1)
at Object.<anonymous> (src/modules/AppViewContainer.js:2:1)
at Object.<anonymous> (App.js:23:1)
at Object.<anonymous> (__tests__/App-test.js:7:1)
I fixed this issue in my tests by adding these lines in my jest configuration file
jest.mock("react-native-localize", () => {
return {
getLocales: jest.fn(),
// you can add other functions mock here that you are using
};
});
I found the solution :- paste this code in your jest configuration file (setup.js)
jest.mock("react-native-localize", () => {
getLocales: jest.fn(), // use getLocales if you have used this, else use the one that you have used
// you can add other functions mock here that you are using
};
});
I am trying to install Jitsi-Meet plugin in my react-native project. I am trying to create a video/audio conference meetup feature in a website and I want to use react-native for the same purpose.
this is the plugin link.react-native-jitsi-meet - npmjs.org
The plugin gets successfully installed in the package.json
But when I am trying to import in my App.tsx file, it shows me module not found
How can I import the plugin successfully?
Thanks in advance.
1- Something is Missings
There is missing index.js file which is mendatory for npm packge. you can see in screenshot
-
2- You need to perform these steps to resolve this package
Step 1:
make index.js file at node_modules/react-native-jitsi-meet/index.js
Step 2:
and this add code in that index.js file
import { NativeModules, requireNativeComponent } from 'react-native';
export const JitsiMeetView = requireNativeComponent('RNJitsiMeetView');
export const JitsiMeetModule = NativeModules.RNJitsiMeetView;
const call = JitsiMeetModule.call;
const audioCall = JitsiMeetModule.audioCall;
JitsiMeetModule.call = (url, userInfo) => {
userInfo = userInfo || {};
call(url, userInfo);
}
JitsiMeetModule.audioCall = (url, userInfo) => {
userInfo = userInfo || {};
audioCall(url, userInfo);
}
export default JitsiMeetModule;
after these steps everything will be working
Node: you should automate these steps when we install any package by npm or yarn
we can use patch-package to automate these steps
After updating my RN version, the test files are no longer passing. The following is one test that is failing and the corresponding error:
import React from 'react'
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer'
import RelatedCallsListItem from
'../app/components/Phoning/relatedCallsListItem'
import {shallow} from 'enzyme'
const openItem = {
dueDate: '07/03/18',
subType: 'Follow-up',
subject: 'Test subject',
comment: 'Test comment',
dueTime: '',
date: '',
result: '',
isOpen: 'yes'
}
const completedItem = {
dueDate: '07/03/18',
subType: 'Follow-up',
subject: 'Test subject',
comment: 'Test comment',
dueTime: '',
date: '',
result: 'AppointmentMade',
isOpen: 'no'
}
it('renders properly', () => {
const item = openItem
expect(renderer.create(
<RelatedCallsListItem item={item}/>
)).toMatchSnapshot()
})
it('notices the call is still open and there is a subType', () => {
const item = openItem
const test = shallow(
<RelatedCallsListItem item={item}/>
)
console.log('test: ', test.debug())
expect(test.find('Text[testID="subType"]').prop('children')).toEqual('FOLLOW-UP')
})
it('notices the call is completed and there is a result', () => {
const item = completedItem
const test = shallow(
<RelatedCallsListItem item={item}/>
)
console.log('test: ', test.debug())
expect(test.find('Text[testID="result"]').prop('children')).toEqual('APPT MADE')
})
And this is the error I get when I try to run it:
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
SyntaxError: /Users/fri0729/Desktop/PostingPlus/posting-plus/PostingPlus/node_modules/react-native/Libraries/StyleSheet/StyleSheet.js: Unexpected token (18:12)
16 | const flatten = require('flattenStyle');
17 |
> 18 | import type {
| ^
19 | ____Styles_Internal,
20 | ____DangerouslyImpreciseStyle_Internal,
21 | ____DangerouslyImpreciseStyleProp_Internal,
at Parser.raise (node_modules/#babel/core/node_modules/babylon/lib/index.js:776:15)
at Parser.unexpected (node_modules/#babel/core/node_modules/babylon/lib/index.js:2079:16)
at Parser.expectContextual (node_modules/#babel/core/node_modules/babylon/lib/index.js:2047:41)
at Parser.parseImport (node_modules/#babel/core/node_modules/babylon/lib/index.js:5205:12)
at Parser.parseStatementContent (node_modules/#babel/core/node_modules/babylon/lib/index.js:4043:27)
at Parser.parseStatement (node_modules/#babel/core/node_modules/babylon/lib/index.js:3962:17)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/core/node_modules/babylon/lib/index.js:4513:23)
at Parser.parseBlockBody (node_modules/#babel/core/node_modules/babylon/lib/index.js:4500:10)
at Parser.parseTopLevel (node_modules/#babel/core/node_modules/babylon/lib/index.js:3938:10)
at Parser.parse (node_modules/#babel/core/node_modules/babylon/lib/index.js:5304:17)
I have seen some solutions with adding ignore patterns to my package.json file, but I have not been successful with those fixes. The tests ran fine until I updated the RN version and corresponding jest and babel packages.
For those struggling with this issue, this link provides a partial fix:
React Native - Jest: Broken since update to 0.56. How to fix it?
From there, you may have to update certain tests since updating Babel tends to change syntax in their updates.