I am experiencing a lot of difficulties integrating React navigation in a React native WEB project.
I have created a mini project with react native web and react navigation in a cloud sandbox, everything works as expected.
Please have a look, I am not using the latest react navigation but I have tried previously the latest(updating the code as the API changed) and it works fine.
React Native web Running in Sandbox
I have cloned this project exactly as it is, installed all the dependencies and tried different versions of React Native Web, Webpack(version 3 and 4), babel(version 6 and 7) and the latest React Navigation (version 3+). I was not able to make it run on localhost, the error is:
Module parse failed: Unexpected token (10:22)
You may need an appropriate loader to handle this file type.
|
| class TabView extends React.PureComponent {
| static defaultProps = {
| lazy: true,
| removedClippedSubviews: true,
on React Navigation version 1.5.8 and a similar error on The latest version. But it works fine in the Sandbox.
Is anybody familiar with this type of setup and why the exact same code does not work on localhost?
I have tried also creating a webpack.config.js in the root and change configurations as some suggested but no luck.
You can clone this repo which is exactly the same sandbox and see for yourself.
Clone this Github Repo
Please any help would be greatly appreciated
This happened to me as well. The reason is because some of the modules provided by React Navigation are not transpiled to their corresponding react-native-web equivalent. What I mean is you need to transpile those modules individually using babel-loader or whatever you are using. Something like below in webpack.config or .babelrc should work:
{
test: /\.(js|jsx)$/,
include: [
path.resolve(root, "node_modules/#react-navigation"),
path.resolve(root, "node_modules/react-navigation"),
path.resolve(root, 'node_modules/react-native-uncompiled'),
path.resolve(root, "node_modules/react-native-tab-view"),
path.resolve(root, "node_modules/react-native-gesture-handler"),
path.resolve(root, "node_modules/react-native-vector-icons"),
path.resolve(root, "node_modules/react-native-web"),
path.resolve(root, "node_modules/react-native-tab-view"),
path.resolve(root, "node_modules/react-native-drawer"),
....and whatever module gives problem....
] // external non react-native packages to be compiled by Babel
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['react-native-web']
...
}
}
};
Here is an article with clear explanation on this topic: https://pickering.org/using-react-native-react-native-web-and-react-navigation-in-a-single-project-cfd4bcca16d0
Related
I'm running an EXPO project (https://mrousavy.com/react-native-vision-camera/docs/guides/#installing-the-library)
I've ran
expo install react-native-vision-camera
added the plugin in my app.json (code below)
expo prebuild
{
"plugins": [
[
"react-native-vision-camera",
{
"cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera.",
// optionally, if you want to record audio:
"enableMicrophonePermission": true,
"microphonePermissionText": "$(PRODUCT_NAME) needs access to your Microphone."
}
]
]
}
Still getting this issue:
https://i.stack.imgur.com/OpezF.png
EXPO SDK 46
react-native-vision-camera: 2.15.1
Read a bunch of docs saying react-native-vision-camera does not work with Expo - but there are setup docs with expo. Not sure how to move forward from here.
Thanks guys
I've tried running pod install in ios dir, installation was successful but no luck.
I am new to Vite and Vitest. I am experimenting a little bit, trying to add Vitest to a React-native app. I know Vite doesn't really support React Native but I would like to trying running just the tests with Vitest.
I get an error when trying to import React-native modules:
Module .../node_modules/react-native/index.js:14 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "react-native" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.
As a temporary workaround you can try to inline the package by updating your config:
// vitest.config.js
export default {
test: {
deps: {
inline: [
"react-native"
]
}
}
}
When adding the suggested config the tests break inside React-native instead, as if the modules in fact is not supported.
What is going on here? Is React-Native only published as commonjs modules, while only esm-modules is supported by Vite? Is there a way around it?
Thanks in advance,
M.
I've gone through the 3 main causes of the infamous invalid hook call warning, and have determined that I have multiple versions of React in my app. I've confirmed this by this step:
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');
// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
Based on my research, I understand that it is probably a dependency I have that is listing react as a dependency instead of a peer dependency, and that there are a few ways to solve this problem. However, I don't know how to figure out which package it is that is causing the issue.
There are lots of solutions online that are relevant to react (such as adding a webpack alias), but unfortunately are not for react-native. I have (perhaps naively) tried to add an alias with module-resolver to babel.config.js, but that did not work:
plugins: [
[
'module-resolver',
{
alias: path.resolve('node_modules/react'),
},
],
]
Figured this out after a long while. The issue was having react-dom library listed as a dependency. I'd read somewhere to do this to support jest testing, but I suppose that advice was dated.
Nonetheless the error was an obvious red herring, so hoping this can help someone out in the future
I have upgraded to my app to react-native 60.4 which support Autolinking all packages so that you dont have to manually go about setting things up and thus lowers the chances of error.
The problem is most of the packages have still not gotten compatible with this process and henceforth the app completely breaks.
my error is with https://github.com/corymsmith/react-native-fabric
referring to an issue on the repo for the same -> https://github.com/corymsmith/react-native-fabric/issues/225, which still remains unanswered.
I started giving it a try by forking the repo and understanding the auto link process given by react native.
In the package.json of the node_module package i replaced
"rnpm": {
"android": {
"packageInstance": "new FabricPackage()"
}
},
with file in the package root react-native.config.js
module.exports = {
dependencies: {
'react-native-fabric': {
platforms: {
android: {
"packageImportPath": "import com.smixx.fabric.FabricPackage;",
"packageInstance": "new FabricPackage()"
}
}
}
}
};
I also updated the build gradle to 3.4.1 from 3.1.0
My react native app is able to now find the package.
But when i call the package in my react component i get NoClassDefFoundError, which means that class is not found.
Anybody else gave this a try and have a solution please let me know.
Try to unlink with react-native unlink and then re run your code again.
Putting it here from the above comment to make it more clear:
Ok i got this to work by changing the forked repo -> (adding a react-native.config.js in the root of the package with with auto discovery and link configurations), but i think the only scalable solution i see right now is to degrade to RN ^59.0 as not a lot of packages have auto link config changes. So will wait for RN 60.4 to mature and then upgrade to it in about a month. In addition to this fabric is currently migrating to firebase and plans to complete by year end. This mean that anyways the sdk integration is going to be obsolete and hence this package too.
Also this issue is majorly related to react-native-fabric and not RN itself.
I am new to ionic and cordova plugins and I'm trying to implement the sharing of cookies using the cordova-plugin-sfauthenticationsession in my ionic app.
Here is my code based on the documentation provided in this link:
SFAuthSession.start("myScheme://","https://www.facebook.com/",
function(data){
console.log(data);
},function(error){
console.log(error);
}
);
The problem is whenever I try to build my app, the terminal shows an error that it cannot find SFAuthSession. I don't have any idea what I need to import (if any) since it is not included in the documentation. Hope somebody can help me with this.
P.S.
I also tried the safari view controller following this documentation and it is working fine since it provides what is to be imported.
This is a common error. The docs tell you how to install that specific plugin but they don't tell you that you also need to update your module file to include it.
Look at this page:
Ionic Native Community Edition - Ionic Documentation
It explains that you need to import the plugin in a #NgModule and add it to the list of Providers. For Angular, the import path should end with /ngx. Angular's change detection is automatically handled.
To do this you do:
// app.module.ts
import { Camera } from '#ionic-native/camera/ngx';
...
#NgModule({
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }
So just import your Ionic Native module using that technique and you it should work.
When there is no Ionic Native wrapper
However, based on your comments below it is now clear that there isn't an Ionic Native wrapper for this Cordova plugin.
This means that you will have to either:
Access it without Ionic Native
OR write your own Ionic Native wrapper
It seems like this article on Medium has a great introduction to this:
Build your first Cordova plugin for Ionic Native – Sangkhim Khun – Medium
You have passed beyond my personal experience here but I'm trying to figure it out with you.
Part three of the tutorial has an interesting snippet for accessing a Cordova plugin directly:
declare var cordova: any;
var success = function(result) {
alert(JSON.stringify(result, undefined, 2));
}
var failure = function(result) {
alert(JSON.stringify(result, undefined, 2));
}
cordova.plugins.HelloWorld.coolMethod({
_sMessage: "Hello World"
}, success, failure);
You would have to compare the documentation of your Cordova plugin to adapt this yourself to get it working.
Alternatively, if you continue reading that tutorial it explains how to create an Ionic Native wrapper which you could even contribute back to the project so that everyone can use this feature.