React Native: Can't find variable: require - javascript

I am trying to modify a react native boilerplate so that I can be run on Android platform.
I installed the expo package and added an index.js file on the root directory. But when I run the android code, it raised Can't find variable: require on the bundling phase
I uploaded my code here. Does anyone have an idea what I missed here?

resetting the cache worked for me.
On expo
expo r -c
for pure react native
react-native start --reset-cache

For those whose cache clearing didn't work. Try deleting .bablerc file. It has its own ways of effecting cache. My issue was only resolved after i deleted this.
I came across this when i was porting my react native app to web using react-native-web .
Platforms:
expo
react native
react native web

You should import your server.default in es6 style. require is a node.js method, in es6 modules you should use import instead. See here for more info on the usage of import.
Here you did
const newApp = require('./server').default;
When you should have
import {default} from './server'

Related

Unable to fix Node Path in packaged Electron App

I'm building a simple Electron app for MacOS (using React as the frontend). The purpose of the app was to make executing certain terminal commands a lot easier (using child_process.spawn. Primarily I am interested in using the sfdx Salesforce CLI commands.
When I run the app in dev, everything works fine. However when I package the app, the PATH variable gets changed and I'm no longer able to locate the sfdx library. (*note it is still able to find git commands though).
I found a very similar issue here and a bug report in GitHub, both of which recommend the use of the fix-path package. This is where I run into another issue. According to the docs, I should import the package like this:
import fixPath from 'fix-path';
However when I do that inside of my electron.js file I get this error: SyntaxError: Cannot use import statement outside a module. I've seen other resources that use require to bring in the package:
const fixPath = require('fix-path');
But again, when I do that I get this error require() of ES Module not supported.
I tried adding "type": "module" to my package.json file, but that breaks my app as well.
I feel like there is something simple that I am missing here, but can't seem to figure out. I believe that if I could import and use the fix-path package, then this would solve my problems. But if that isn't possible, does anyone know of a way for me to fix the path in my app so that it works in prod?
Thank you in advance!
Some extra details:
The two dependencies I check for are git and sfdx. The following image shows where both of those live on my machine:
And this is the response to the same commands within the packages asar file:
I found a workaround, it looks like fix-path made a move to ESM during the last release. Because I am using CJS modules I just needed to install version 3 of fix-path by running npm install fix-path#3.0.0 --save

How to convert expo app to react native cli? without re-coding it?

How to convert expo app to react native cli? without re-coding it? I have a old expo app which I want to run but when i am running it with new react native version its showing too much errors now it has many deprecated functions is their any way to convert that app to react native cli? or any way to run that project without expo go? because expo go dont support SDK version 37
It seems like you can convert your expo project to a react-native-cli project using expo eject.
You should check out #deadcoder0904's answer to this question: Convert Expo project to Original React Native project
But, I'd definitely make a backup of your project before trying such things. Because this is a one way fix and we should be maintaining a older version in case of disaster.

index.tsx in package react-router has 152 problems

Everything seems to work fine, I just see those errors. Is this normal? How can i fix this.
My react application is written in Javascript, not in Typescript, but I do not think that this should matter, should it?
Are you using a package manager like npm/yarn/pnpm for installing react-router? Looking at that pathname it kinda looks like you're not and you should be.
If you're trying to import the index.tsx file directly in your JavaScript it won't work, you'll need the transpiled version which would be available automatically by installing it through a package manager (something like npm install react-router). The plain js files would then be available under node_modules/react-router in the root directory of your project.
To import it somewhere in a React project you could then use:
import { Route } from 'react-router'
(no need for the full path name including node_modules - more info on npm install here: https://docs.npmjs.com/cli/v6/commands/npm-install)
I've just restarted Visual Studio Code and the errors disappeared.
For context, I had Visual Studio running for some days now, so I can see how this could lead to some bugs.

Loading #polkadot packages in react native app with expo

I am currently working on a react application to complement a web application, and have been tasked with implementing an self-sovereign identity solution using the Kilt.io protocol. This worked fine for the web app, however I am running some issues when it comes to the react native app. I initially wanted to use Expo, however the #kiltprotocol/sdk-js package depends on #polkadot packages to function, which in turn depends on the NodeJS crypto package. However, as it is a NodeJS package, the module cannot be found when trying to run my expo app. It seems like it is possible to load the crypto module using the rn-nodeify package when not using expo (although I have not actually tested this myself for this use case yet), however I was wondering if anyone knows of a solution that would work for an expo project.
Try
expo install expo-crypto
then create a "metro.config.js"
put in
module.exports = {
resolver: {
extraNodeModules: {
crypto: require.resolve('expo-crypto'),
}
}
};

Can anyone help me to detach expo app

I have little bit queries about detach expo app :
Am done app requirement but i have one thing that support only react native.
So i read about detach expo app and i think its mean if you done your coding in expo app and after detach you got android or ios folder and then copy these two folder and paste into react native project and then run command npm install.
But in above query i have one question in my mind .
Is expo coding that i done is available and its working as expo app in react native app or not ?
And now am continue coding after detach expo app in react native like add native module in react native app.
Detach or in actual terms, ejecting of your expo, in a React-Native project is a one way function. You cannot go back to the original setup once you eject.
After you eject, you get vanilla react native structure, which means separate folders for iOS and Android. This also means you lose access to expo API's you previously used. You can code or keep working on your project the same way as you were working before ejecting the app. Only your expo API's will change(if you have made use of them). Rest of your work flow will remain the same.

Categories

Resources