So after playing with Expo for a bit I've decided that I'd rather develop with the option for native features if needed.
I've followed all the steps here: https://reactnative.dev/docs/environment-setup and double checked them.
I ran npx react-native init <myprojectname> which was create successfully. I've then copied my minimal existing code to my new project, and now I can't run the app. I was able to run my code when it was on expo, and I was able to run the initial native setup before copying my code.
The issue doesn't seem to be related to the code itself though. Maybe some configuration?
It says it is Unable to resolve module.. and that None of these files exist.
These files most definitely exist.
I've tried cleaning the app's cache from my phone. Completely deleting it and reinstalling.
I've tried renaming my screen name from HomeScreen.tsx to HomeScreen.native.tsx.
Nothing seems to work. What is the issue here?
This is the error screen
And this is my files structure:
Related
so I am making an application that requires a backend API, and it uses certain node_modules which don't work when compiling with Electron. To fix this, I put the API code into a separate JavaScript file, which I am attempting to fork using child_process.
I have gotten this to work when compiling, but it immediately stops working after I move the "win-unpacked" folder or try to install the app using the compiled installer.
I have checked, and it is not the path that is wrong, it is correctly pointing to the file. From testing, it appears that the file actually does get forked, but immediately exits with the status code 1.
I can't use require(./filepath.js) because that will just include the code in the compiler, which doesn't work with the modules I am using.
I am hoping someone knows what is wrong and what I should do to fix it, or have any ideas for other ways to run the server code without including it in the compiler.
I am using Vue.js 3 and vue-cli-electron-builder version 2.1.1
The server I am attempting to run is a express server.
TL;DR
Similar questions have been asked before on SO (such as Convert Expo project to Original React Native project, Commands to use after converting from expo to react-native-cli, and Expo to react native init) but none of them explain how to completely remove all Expo modules and dependencies from my project, so that I end up with a pure React Native app (the same as if I had run react-native init... in the first place).
So is it possible to remove all of this extra crap that I never asked for or expected to be installed, with one simple command? MTIA! :-)
Background
Basically I got into this mess by ejecting from a managed Expo project, then customising the android folder a lot before realising that my build/install times were ludicrously slow.
So to fix this, I ran yarn global add depcheck and depcheck, which suggested that I could/should remove all of the following packages (the most seemingly-important ones are marked with an asterisk):
expo-updates*
filtrex
firebase-admin
lodash
mathjs
moment
native-base
nodemailer
react-native-android-location-enabler
react-native-credit-card-input
react-native-document-picker
react-native-fast-image
react-native-geolocation-service
react-native-image-crop-picker
react-native-js-bottom-sheet
react-native-reanimated
react-native-signature-capture
react-native-unimodules*
react-native-web
react-timer-mixin
recyclerlistview
shortid
stripe-client
styled-system
#babel/core
#react-native-community/eslint-config
babel-jest
jest
prettier
react-test-renderer
So I blindly ran yarn remove ... on all of those packages, and now I get a ton of errors on attempting to build. I won't list them here since it's obvious that they're mostly (if not entirely) related to the expo-updates and react-native-unimodules packages marked above.
I'm not explicitly using anything Expo-related in my code, so this should be a cake walk IMO, but is proving to be quite difficult!
So how can I remove this extra cruft properly? Do I need to start fresh with react-native init? MTIA :-)
Ejected expo projects needs unimodules to function properly.so i don't think there is a simple command that does everything you asked for. You can follow some steps to get it working.
Branch out for safety.
Eject, check if it is working and commit.
Delete all except .git folder in the project(also can keep a copy of .git somewhere else if project is not stored remotely).
Do initiate a bare react-native project to the same folder(have to do it from parent folder with same project name as the current project folder name, it will prompt the folder is not empty. choose to continue).
Discard the deletion of the files with your Codes.
Add packages that use in project(for expo packages, find replacement packages. Most probably will be mentioned in expo documentation).
Run Project, (might get some missing dependencies.if so, add and rerun)
I have finally acheived this almost 6 hours later by:
Creating a new React Native app from scratch (react-native init MyAppName).
Finding replacements for all the Expo modules that were being used (not by me directly, but by other packages).
Reconfiguring my Firebase project to play nice with the app (particularly the SHA keys).
Uninstalling the old app, installing the new and clearing caches for the "new" app (I say "new" because I didn't expect this step to be necessary, but somehow, for some stupid reason, Android was trying to use the old, cached app files).
The last step was absolutely crucial; it took me about 2 hours of head scratching and screaming at the PC before I finally stumbled upon this: React Native white blank screen issue. Many thanks to #DiwakarPrasad for this absolute gem of knowledge!
I am quite new to react (and still learning), so I apologize if the problem is too basic.
I have created a shoe store App (inspired by this tutorial on React Router v6)
The problem I am facing is that the App works perfectly on development build.
But when I create a production build (yarn build) and serve it using npx serve -s build, I get an empty page
The console gives an error that shoeData (a javascript object on a separate shoeData.js file with named export.) is not defined. There was no such error on development build. In fact, just before the errors on the console in the production build, an array has been logged twice using the following code
console.log(Object.keys(shoeData).filter((productId) => shoeData[productId].featured));
The above code uses the shoeData object, therefore the object is available to the component at least initially.
I have also modified the package.json to add "homepage": "." since people have solved similar issues using this fix, but it doesn't work in this case.
The complete project is available on GitHub here
Any help in this regard would be highly appreciated
What I can see on url is that, ReferenceError: shoeData is not defined is being shown. Please look after it.
I'm also looking what's the reason just cloning the repo
This line looks weird，you should pass string to src rather than require a file.
I just clone the repo and make sure the problem is cause by require().
Steps to fix:
Move images/ into public/ folder
Replace all require('...').default with image url, such as /images/${shoeData[productId].gender}/${productId}/01.jpg.
Remove homepage field from package.json
I have created a simple application using Create-React-App (CRA). The problem is that even though the app runs perfectly fine on my localhost (ie, after using npm start), when I try to publish my pages to gh-pages (npm run build, and npm run deploy), I am not able to load the page using the URL. I don't even see any errors in console at first, but after a while (or more specifically, after I open the Timeline tab in console), I see the following error.
Failed to create temp file 18 : It was determined that certain files
are unsafe for access within a Web application, or that too many calls
are being made on file resources.
I do see this warning on my local dev environment,
[Violation] Long running JavaScript task took 229ms
and the minified bundle.js file goes to about 4MB in size. But I guess this is not the issue because my other projects have the same warning and they are published just fine.
I'm also fairly confident that this is a more JavaScript related issue, rather than CRA related. I read somewhere that this might be a network mapping of resources issue. But so far, I'm not really sure what this means or how to resolve it.
Just to answer my own question, in case anybody else lands up here.
The issue was in the way I was using react-router. I was initially using browserHistory instead of hashHistory.
As per the docs,
GitHub Pages doesn’t support routers that use the HTML5 pushState
history API under the hood (for example, React Router using
browserHistory). This is because when there is a fresh page load for a
url like http://user.github.io/todomvc/todos/42, where /todos/42 is a
frontend route, the GitHub Pages server returns 404 because it knows
nothing of /todos/42.
More information can be found here.
I am trying to figure out how I would go about adding cordova to my project which has angular.js and lungo.js included in it. Here's the error I get :
Error: Current working directory is not a Cordova-based project.
How would I make it a Cordova project?
I also tried the other way around. That was : By creating a cordova project first, then adding angular.js and lungo.js in it. I'm using grunt to init the scaffold template.
Here's the error:
Philippes-MacBook-Pro:hello Phil$ grunt-init lungo-angular-bridge
Running "init:lungo-angular-bridge" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.
Warning: Existing files may be overwritten! Use --force to continue.
Aborted due to warnings.
Now, I'm not sure how I could make cordova, angular.js, lungo.js all be included correctly.
Any help would be appreciated.
Thank you,
Phil.
First thing I would check is if the .cordova file is being created.
If not, try running this command from the repository: cordova create