Vercel hosted Create React Apps - dynamic routes dont work - vercel

I have a Create React Apps app which works fine locally, but when deployed to Vercel any dynamic route breaks with the following error message shown in the console:
Uncaught SyntaxError: Unexpected token '<' (at main.3f8e065c.js:1:1)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
Anyone know why this happens? their instructions for deploying a Create React Apps project don't seem to cover this.

Related

How do I resolve, " 'main' has not been registered "

I have been continuously getting the error below. I have a Mac and have been trying to create a react native app with React CLI, but I have been continuously running into errors. My app is building but then when I open it I get the following error. I am not sure what to do because my Metro is running from the right folder. All the other solutions I found online are not working for me or they are outdated and are not in my code.
image of error

Error connecting web3js to react native application

I ran into a problem connecting web3 to a React Native app.
Initially, the connection was made according to this guide.
Everything worked, but as soon as I restart the application, an error appears:
ReferenceError: Property 'Buffer' doesn't exist, js engine: hermes
ERROR Invariant Violation: Module AppRegistry is not a registered
callable module (calling runApplication). A frequent cause of the
error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine:
hermes
Then I comment on these lines in Live reloading mode
const Web3 = require('web3')
const web3Rospen = new Web3('https://ropsten.infura.io/v3/myKey')
I save the code, the application works, again, in Live reloading mode, I uncomment these lines back - the application works.
But initially, just taking and running the application from web3 does not work. Maybe someone faced such a problem?
Versions:
"react-native": "0.66.4",
"web3": "^1.7.3"

React native app to react native web problem (typescript, babel)

Hello so I'm working on an app for android and iOS which is quite developed by now and I'd like to activate react-native-web on it. the problem is that I have a bug when I try to run the script to launch the web development server :
The first error at the top is the one I'm struggling with I've tried updating my babel config :
I tried deleting the babel config at the root of my project and it changed nothing like the babel config has no importance
It is being used though to build the android app i know that, but for the react native web build it seems he has no importance
But is still get the same error again and again
please let me know if you need any more information's on this issue

Troubleshooting Maximum Stack Call Size Exceeded Error in Expo App

I'm getting the infamous Maximum Stack Call Size Exceeded error in Expo app.
I understand that it's caused by code that keeps calling itself, creating an infinite loop.
Does Expo or React Native provide more information about where this error is? I've already been through my code and didn't find anything. Something a bit more specific would be helpful in narrowing down the issue.
What's evn more interesting in this case is that I only get the error in the Expo Go app. When I run the app in Android Emulator, I don't get the error and the app works fine.
Any suggestions?
I found the culprit and it's totally unexpected.
I develop web front-end in React and mobile in React Native. One of the primary reasons is code sharing.
I have a file that contains all the action types I use in managing the state of my app. Technically not but kind of an enum file. They look like this:
export const SET_IS_AUTHENTICATED = 'SET_IS_AUTHENTICATED';
export const SET_USER_INFO = 'SET_USER_INFO';
In this file, I have exactly 486 action types and this is exactly what was creating the error.
I don't need all of these action types in my mobile app but I'd decided to keep things consistent and I thought this was totally harmless so I've been sharing this enum file in all my React and React Native apps.
Here are two interesting observations:
I just started developing with Expo. Prior to that I was using straight React Native -- created through React Native CLI and I NEVER got any errors for using this file.
Even more interesting is that the Android Emulator does NOT throw any errors in the same project. Only the Expo Go app throws this error.
This may even be by design and not necessarily an undesired side effect of the Expo Go app. Not sure. I'd love to know if others have had similar experiences with the Expo Go app.
This is probably not helpful, but when I upgraded from expo sdk 41 to 43 then I started getting this error. I made no code changes besides the upgrade and now when my app loads I get the error Unhandled promise rejection, [RangeError: Maximum call stack size exceeded.]. I get the error on expo go on both platforms

"Application ... not registered" with React Native app on AWS Mobile Hub

I'm trying to learn and understand how AWS Mobile Hub works.
Based on I'm trying to create a React Native app from scratch and connect to a AWS Mobile Hub.
I followed the steps in the AWS Mobile React Native Starter # Use features in your app to create a React Native app from scratch.
Setup a new project in AWS Mobile Hub.
Used awsmobile init <ID> to setup the react project for AWS Mobile Hub.
Enabled User Sign-in on AWS Mobile Hub project.
Setup Authentication in the React Native project.
(ps. there is an error in the guidelines because 'Amplify' import is missing)
Run the app with npm run ios
No matter what I do, I alway get a 'Application ... has not been registered' error.
The example backend from 'AWS Mobile React Native Starter' does work.
I have tried to compare both AWS Mobile Projects, but cannot find what causes the 'Application ... has not been registered' error.
I want to understand this AWS Mobile Hub thing and want to be able to setup projects myself and know how to integrate it into apps.
Any help to solve this error is greatly appreciated.
Finally found the problem.
First I thought it was because index.ios.js and index.android.js were missing, but then saw those are not needed anymore.
Aparently, when doing an application from scratch, the created 'index.js' does not have the correct component name. Changing the wrong name in AppRegistry.registerComponent('wrongname', () => App); to the correct application name, matching aws_project_name in aws-exports.js, fixed the issue.
The app now loads. Hurray!
Next problem: when signing in I get a 'No Userpool' message. Checked all config and Mobile Hub project, but the user pool seems correctly configured...
Update: also found the issue with 'No userpool'. When debugging the application, I noticed that the configuration received by Amplify.configure function was undefined. But I copied this code:
import { withAuthenticator } from 'aws-amplify-react-native';
import {awsmobile} from './aws-exports';
from this AWS React Native Starter App tutorial. But apparently it is not working.
Replacing that bit by this:
import Amplify from 'aws-amplify-react-native';
import aws_exports from './aws-exports';
from
AWS Documentation » AWS Mobile » Developer Guide » AWS Amplify Library for React Native » Get Started
. Now it suddenly works.
Thanks AWS! Took me couple of nights to find :-/
I saw that problem before when there is a version of aws-amplify installed under aws-amplify-react-native. That happens when the version of aws-amplify installed on the project is not the one that requires aws-amplify-react-native. I hope everything goes well with your app.