New to React Native:
I started a brand new project with Expo init and then I followed the instructions mentioned inhttps://reactnavigation.org/docs/hello-react-navigation
I run the project with expo start and I get this error.
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.
invariant
browser.js:38:14
runApplication
AppRegistry.js:193:13
__callFunction
MessageQueue.js:425:19
__guard$argument_0
MessageQueue.js:112:6
__guard
MessageQueue.js:373:10
callFunctionReturnFlushedQueue
MessageQueue.js:111:4
callFunctionReturnFlushedQueue
[native code]:0
Any suggestions?
Open the index.js, the content of the file should be like this:
import { AppRegistry, Platform } from 'react-native';
import App from './App';
AppRegistry.registerComponent('X', () => App);
if (Platform.OS === 'web') {
const rootTag = document.getElementById('root') || document.getElementById('X');
AppRegistry.runApplication('X', { rootTag });
}
If you have this error Invariant Violation: “main” has not been registered you have to replace the 'X' by 'main'.
Another example :
If you have this error Invariant Violation: “app” has not been registered you have to replace the 'X' by 'app'.
For android :
Open ./android/app/src/main/java/[multiple folders]/MainActivity.java
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
#Override
protected String getMainComponentName() {
return "X";
}
The 'X' of MainActivity.java and index.js must match.
This worked for me:
delete node_modules and your lockfile (package-lock.json / yarn.lock)
change the expo package version in package.json to 38.0.8
run yarn or npm install
run expo install react-native-safe-area-context
The problem is that if you are using expo then you have to registerComponent differently. All the information is in the docs. https://docs.expo.io/versions/latest/sdk/register-root-component/
import { registerRootComponent } from 'expo';
import React from 'react';
import { View } from 'react-native';
class App extends React.Component {
render() {
return <View />;
}
}
registerRootComponent(App);
In my case, the problem was solved when I called
AppRegistry.registerComponent(appName.toLowerCase(), () => App);
in index.js. So it looks like the first parameter is to be passed based on what error message is shown. In my case, my project name was AwesomeProject and the error reported by Metro was:
Invariant Violation: "awesomeproject" has not been registered.
so I figured that adding toLowerCase() will solve the problem and it did!!
However, I was facing this problem when trying to run it on macos using npx react-native run-macos and after this was solved, I tried to invoke the iOS version, then I got Invariant Violation: "AwesomeProject" has not been registered.
So finally I got both working by registering the App twice as below:
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName.toLowerCase(), () => App);
The same also works with npx react-native run-android.
workarounded by:
AppRegistry.registerComponent('main', () => App);
In my case I was missing some packages which are mandatory to install.
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
index.js
AppRegistry.registerComponent("X", () => Root);
If you are facing this issue in Android then make sure that both mainactivity.java and index.js contains same "X"
mainActivity.java
#Override
protected String getMainComponentName() {
return "X";
}
If you are facing this issue in iOS then make sure that both AppDelegate.m and index.js contains same "X"
AppDelegate.m
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:#"X" initialProperties:nil];
Change your index.js .
import { AppRegistry, Platform } from "react-native";
import { registerRootComponent } from "expo";
import App from "./App";
import { name as appName } from "./app.json";
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
if (Platform.OS == "android") {
registerRootComponent(App);
} else {
AppRegistry.registerComponent(appName, () => App);
}
In my case, I had a class that existed solely to model the structure of a meal i.e not a react class component. I forgot to export that class but was calling it in the application new Meal(foo, bar .....) and that triggered this error. I found it by just tracing my steps to the most recent addition I had made before I started getting this error.
In my case it a specific package called graphql-type-json that was the problem.
So the 2nd part of the error was referring to the real issue:
A module failed to load due to an error and AppRegistry.registerComponent wasn't called."'
The loading of the incriminated package was throwing an error 'GraphQLError: Syntax Error: Expected Name, found "}".' which stopped the App loading and threw the Invariant Violation error.
After removing precisely the graphql-type-json (yarn remove graphql-type-json) package, expo loaded fine again.
If you're using react-native-reanimated and Expo, make sure to install it using:
expo install react-native-reanimated
See the documentation for further help
import app name from app.json like this:
import {name as appName} from './app.json';
then add appname in registerComponent
AppRegistry.registerComponent(appName, () => App);
The main reason to get this error is that, for some reason, App.js is not functioning properly. It may be because that you are running the server from a wrong folder. In my case, I always got another error along with this error, so I kept fixing those and this error got resolved automatically.
It can happen after you've used expo prebuild --clean and when in your Podfile/AppDelegate.m was some 3rd party library specific import, like react-native-maps, or Google Maps API Key.
You'd need to put back these imports into Podfile/AppDelegate.m, next cd ios, next pod install. Still, expo start might be not enough and you'd need to build your project using Xcode. After building & running your code on Xcode, the error will be gone and the emulator will start.
There is some difference between how Expo and Xcode build/simulate the app, but I'm at quite an early stage regarding distinguishing these differences. I've also noticed sometimes you need to first build the project on Xcode first, if the app isn't installed on the simulator yet, and only then running the app from simulator launched via expo start --dev-client. Otherwise, I was getting an error Error: The development client (com.XYZ.ABC) for this project is not installed. Please build and install the client on the simulator first. or Invariant Violation: Native module cannot be null. or Invatian Violation: 'main' has not been registered....
If you have changed the application and package name using react-native-rename,
in the file ios/AppName/AppDelegate.mm
Synchronize the application name with the app.json file by finding the lineUIView *rootView = RCTAppSetupDefaultRootView(bridge, #"AppName", nil);
I'm not great at diagnosing these stack traces but my project just suddenly started throwing this error. I installed react-native-skeleton-content which then threw errors for react-native-gesture-handler here I am thinking that gesture handler was just a result of some other peer dependency updating.
I uninstalled both and voila. The expo server runs again and processes the app just fine. Had I slept on it I never would have known but yeah, as a newbie, try deleting a new package you just installed and it's dependencies. It's likely the cause of a new issue.
I finally found a solution that worked for me!
I just execute it again:
npm install -g expo-cli
ps.: In my case, it may have happened because I tried to install Turtle CLI and had to remove it to free disk space. This may have corrupted the expo files.
For iOS, we need to make one additional change in ios>appName>AppDelegate.mm file,
Search for RCTAppSetupDefaultRootView and update old_app_name to new_app_name
It is hard to comprehend the complexities of webpack and I need some help getting HMR to work, I have started a new project using electron-forge using the typescript-webpack template.
The project got created with the following structure:
You can see the ts-loader configuration is already in there, afterwards I added react and react-dom and set up a hello world App component, the problem is now, when I change that component, I get a webpack HMR error:
not sure how to solve this issue, react-hot-loader seems to be the library to go to get this working but not sure how to make it work with ts-loader, could anybody point out how to get this set up working? Thanks!
Edit 1: I tried adding react-hot-reload but I get a require is not defined error...
Well, after fumbling around with the react-hot-loader package I just could not get it to work, so I stumbled upon the default webpack hot reloading way:
on the index file (where you import your root react component, you can use something like:
declare let module: { hot: any };
if (module.hot) {
module.hot.accept("./App", () => {
const NewApp = require("./App").default;
render(<NewApp />, document.getElementById("app"));
});
}
At least it seems to be working so far
I have been trying to execute a very simple react application, but for some reason I'm unable to compile it. When i try to compile it in bash using "npm start", i get the error stating "Failed to compile: ./src/index.js
Module not found: Can't resolve './registerServiceWorker' in '/Users/Pruthvi/Desktop/ReactApplication/my-app/src'"
can anybody help me as I am a new bee to react application!
By default, create-react-app will create a progressive web app, as documented here. The progressive web app relies on registerServiceWorker() in the registerServiceWorker.js file. You have apparently deleted this file, so your project no longer builds.
You have two choices:
Keep your project as a progressive web app, in which case you should simply restore the original state you had after first creating.
Opt out of the progressive web app features.
In order to opt out of the progressive web app features, you need to modify your src/index.js file as follows:
Delete the import of the registerServiceWorker.
Delete the registerServiceWorker() call.
Your src/index.js will then look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Deleted -- import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// Deleted -- registerServiceWorker();
Once you've made those modifications to your index.js, you can safely delete the registerServiceWorker.js file (which it appears you've already done based on the error message you've posted).
The documentation gives a more complete description of how to opt out and some of the consequences of having a progressive web app.
If you are new to react and need to build apps fast you can try
create-react-app by facebook
it a command line tool that will help you build better react app fast with zero configuration you can learn more from the link above and its easy to use
also make sure that you use a good editor that can help you catch errors
and to help you and give you good answer the second time please provide your code to understand the problem well .
Just ran an npm update on my web application and now Moment JS appears to be failing with the following message:
Error: Cannot find module "./locale"
\node_modules\moment\src\lib\moment\prototype.js:1
> 1 | import { Moment } from './constructor';
Not sure what version of Moment JS I had prior to my update, but my application has been working for months.
I created another react app and ran an npm install moment --save and modified the source to display the time and ended up with the same error described above.
Not sure if there is a fail-proof way to integrate Moment JS using Create-React-App currently short of ejecting to manage the webpack settings myself, but I really don't want to do this. Anyone else seeing these issues or having success? If so, a short write up would go along way to helping out.
Appears this has already been identified as an issue for Moment JS version 2.19. If you have upgraded to 2.19 run npm install moment#2.18.1 to revert back to previous version until it is fixed!
See thread: https://github.com/moment/moment/issues/4216
Application built with Create React App and using Moment 2.24.0, the following seems to be working fine:
import moment from 'moment';
import 'moment/min/locales';
Instead of importing moment-with-locales directly. Alternatively, also possible to only import required locales:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/ru';
The answer above, though I have no doubt works for some, does not work for me. The solution I found is fairly quick and easy, but is a little more complicated than simple downgrading.
This problem originates as a result of and can be fixed with webpack. So we're going to have to add a few lines of code to our webpack.config.js file. If you don't have one yet, you can add one to the root webpack directory:
YOURAPPNAME/node-modules/webpack/
So now that you're inside your webpack.config.js file, you need to add a few lines of code. Just copy and paste this inside the new file or adapt it to the code you already have in webpack.config.js.
module.exports = {
resolve: {
alias: {
moment$: 'moment/moment.js'
}
}
};
Your import statement of moment in your index.js (or otherwise named) file should look like this:
import moment from 'moment'
You should now be able to use moment completely normally. For example:
var tomorrow = moment().add(1, "day")
If you have a fresh install, or upgraded moment to 2.25 and are getting this warning now, try forcing all your packages to use 2.24.
UPDATE: New release 2.25.3 has been reported to fix this problem! Try to first just update.
If you depend on some library that didn't upgrade yet, tell them to upgrade. And in the meantime, if you need 2.25, you can force also your sub-dependencies to use this version.
If you're using yarn add these lines into package.json
"resolutions": {
"**/moment": ">=2.25.3"
},
This is to be added inside packages.json at the top level, i.e. with the same indentation as "dependencies".
I'm working an a React-Native app, and am writing my components into different files, exporting them and importing them wherever they're needed. This is working fine in all instances instead of one, where npm keeps throwing a 'Requiring unknown module'-error.
My structure is as follows:
navigator
Navigator.js
NavBar.js
In NavBar.js, I am exporting my component like so:
class NavBar extends Component {
...
}
export default NavBar;
And importing it in Navigator.js like so:
import NavBar from './NavBar';
The complete message I get on my device when trying to run the app is as follows:
Requiring unknown module "./NavBar". If you are sure the module is there, try restarting the packager or running "npm install".
I have tried both those things (multiple times) to no avail.
I must be looking over something stupid, but can't seem to find it. Can anyone else see what I'm doing wrong here?
What I did to get it fixed:
I refactored the file to something else, and back to NavBar.js.
This was probably just caused by me misspelling something in the first place.
So don't forget to check, double check and double check again.