I am doing a simple chat React Native (0.59) app for practicing purpose. But App.js constantly threw Null is not an object error. Then I commented out all components and just leave a createStackNavigator and createAppContainer. Here is the App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
* #lint-ignore-every XPLATJSCOPYRIGHT1
*/
import codePush from "react-native-code-push";
import Chat from './src/components/Chat';
import Event from './src/components/Event';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
//create the navigator
const navigator = createStackNavigator({
//Event: { screen: Event },
//Chat: { screen: Chat },
});
//export it as the root component
export default createAppContainer(navigator);
There still is an error of
Requiring module "App.js", which threw an exception: TypeError: Properties can only be defined on Objects`
What is missing here?
Here is the index.js
/**
* #format
* #lint-ignore-every XPLATJSCOPYRIGHT1
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Related
I have an app that works well locally. But on production, I am getting this error.
enter image description here
enter image description here
I thought it is related to webpack but could not find any clue. I am stuck with that.
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import * as styled from 'styled-components';
import NotificationContext from 'og-merchant-portal-react-library/lib/NotificationContext/NotificationContext';
import FetchContext from 'og-merchant-portal-react-library/lib/FetchContext';
import { UserInfoContext } from 'og-merchant-portal-react-library';
import App from './App';
import { unregister } from './serviceWorker';
window.IngenicoLib = {
React,
ReactDOM,
moment,
NotificationContext,
FetchContext,
UserInfoContext,
'styled-components': styled,
};
the error
./src/App.js
Module not found: Can't resolve './components/MainComponent' in 'C:\Users\TiZuM\Desktop\NucampFolder-copy\3-React\nucampsite\src'
app.js
import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
main.js
import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Directory from './DirectoryComponent';
import { CAMPSITES } from '../shared/campsites';
import CampsiteInfo from './CampsiteInfoComponent';
i'm facing this issue when i tried to run the example code about Navigator tag from React-Native docs.
This is my App.js file:
import React, { Component } from 'react';
import { Navigator } from 'react-native';
export default class App extends Component {
render() {
return (
<Navigator
initialRoute={{title: 'Awesome Scene', index: 0}}
renderScene={(route, navigator) => <Text>Hello {route.title}!</Text>}
/>
)
}
}
And this is my index.js file:
/**
* #format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
And this is the problem:
The problem is that react-native has deprecated Navigator, so you're most likely using a version that doesn't support it, I believe version 0.46 supports it but the most recent versions do not.
I would recommend you take a look at react navigation
React Native 0.61 Documentation Here you can see on the left that there's no Navigator.
I'm trying to setup Helmet npm using SSR within my meteor application and I'm getting the error, Error running template: TypeError: Cannot read property 'renderStatic' of undefined at sink. I'm new to using SSR so I'm not following what I'm missing here. Very nooooob question.
Path: server/main.js
import React from "react";
import PropTypes from 'prop-types';
import { onPageLoad } from "meteor/server-render";
import { renderToNodeStream } from "react-dom/server";
import { ServerStyleSheet } from "styled-components"
import { Helmet } from 'react-helmet';
import App from "/imports/server/app/App";
onPageLoad(sink => {
const sheet = new ServerStyleSheet();
const appJSX = sheet.collectStyles(
<App location={sink.request.url} />
);
App.propTypes = {
location: PropTypes.object,
};
const htmlStream = sheet.interleaveWithNodeStream(
renderToNodeStream(appJSX)
);
sink.renderIntoElementById("react-root-app", htmlStream);
const helmet = Helmet.renderStatic();
sink.appendToHead(helmet.meta.toString());
sink.appendToHead(helmet.title.toString());
});
Since Helmet is default export you need to import it like
import Helmet from 'react-helmet';
But not
import { Helmet } from 'react-helmet';
However, the latest version does not have a default import.
You must import it like this.
import { Helmet } from 'react-helmet';
This is as per the version
"react-helmet": "^6.0.0",
I've just started to learn React-(Native) and I'm not feeling comfortable to debug errors. Mostly all of them doesn't point to any line from my code and this makes really hard to find solutions.
For example:
In this case, how could I find from what of my lines this exception was called?
Also, if you know how to solve this problem heres the code:
index.js
import {
StackNavigator,
} from 'react-navigation';
import LoginScreen from './loginView'
import HomeScreen from './homeView'
export default screens = StackNavigator({
Home: { screen: HomeScreen },
Login: { screen: LoginScreen },
});
loginView
import {StackNavigator,} from 'react-navigation';
import LoginScreen from './loginView'
import HomeScreen from './homeView'
export default screens = StackNavigator({Home: { screen: HomeScreen },Login: { screen: LoginScreen },});
homeView
(paste not working)
https://pastebin.com/YsnVkinQ
index.android.js
import React, { Component } from 'react';
import screens from './app/index';
import {AppRegistry,StyleSheet,Text,View} from 'react-native';
AppRegistry.registerComponent('estudo1', () => screens);