I am new to React Native.
When I go to run project on Android emulator this error displayed.
I tried many solutions but didn't work.
Error log:
Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function
(for composite components) but got: undefined.
LoginForm.js codes:
import React, {Component} from 'react';
import {View} from 'react-native';
import {Button,Card,CardSection} from './components'
class LoginForm extends Component{
render(){
return(
<Card>
<CardSection>
<Button>
Log in
</Button>
</CardSection>
</Card>
);
}
}
export default LoginForm;
App.js codes:
import React,{Component} from 'react';
import {View} from 'react-native';
import {Header} from './components';
import LoginForm from './components';
class App extends Component{
render(){
return(
<View>
<Header headertext="Test"/>
<LoginForm />
</View>
);
}
}
export default App;
index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('second', () => App);
components/index.js
export * from './Button';
export * from './Card';
export * from './CardSection';
export * from './Header';
In your components/index.js, you are exporting everything except LoginForm.js
So, when you're importing LoginForm from "./components" in App.js, it looks in the index.js file and doesn't find a default export.
You can add export * from "./LoginForm" in your components/index.js and import it as a named import in App.js, such as: import {LoginForm} from "./components".
Or maybe you could import LoginForm from "./components/LoginForm" directly.
Related
I am getting;
Encountered error "#<ExecJS::ProgramError: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.>
I only get it, once I switch to prerender:true, before that I was not getting any import related errors.
How could I debug this? What might be the cause of the problem?
The component throwing the error looks like:
import React from "react";
import { configureStore } from "#reduxjs/toolkit";
import { Provider } from 'react-redux'
import {
myReducer,
} from "./redux/reducers/reducers";
import Main from "./Main";
const store = configureStore({
reducer: {
myReducer: myReducer,
},
});
function App(props) {
return (
<Provider store={store}>
<Main current_user={props.current_user}></Main>
</Provider>
);
}
export default App;
So the question is: Can i render the response from the back(html page) with react-native-webview?
I think this example will help you
In web
<script>
window.postMessage("Sending data from Web");
</script>
In React Native
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
}
render() {
return (
<WebView
ref="webview"
onMessage={this.onMessage}
/>
);
}
onMessage(data) {
alert(data);
}
}
yes you can render whole html page with react-native-webview
I am trying server side rendering using react-router 4. I am following the example provided here https://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together
As per the example on server we should use StaticRouter. When I import as per the example I am seeing StaticRouter as undefined
import {StaticRouter} from 'react-router';
After doing some research online I found I could use react-router-dom. Now my import statement looks like this.
import {StaticRouter} from 'react-router-dom';
However when I run the code I am getting Invariant Violation: Browser history needs a DOM in the browser.
my server.js file code
....
app.get( '*', ( req, res ) => {
const html = fs.readFileSync(path.resolve(__dirname, '../index.html')).toString();
const context = {};
const markup = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context} >
<App/>
</StaticRouter>
);
if (context.url) {
res.writeHead(302, {
Location: context.url
})
res.end();
} else {
res.send(html.replace('$react', markup));
}
} );
....
And my client/index.js code
....
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), root);
....
Update v1
Reduced my example to a bear minimum and still getting the same error.
clientIndex.js
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from '../App'
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById('app'))
serverIndex.js
import { createServer } from 'http'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { StaticRouter } from 'react-router'
import App from '../App'
createServer((req, res) => {
const context = {}
const html = ReactDOMServer.renderToString(
<StaticRouter
location={req.url}
context={context}
>
<App/>
</StaticRouter>
)
res.write(`
<!doctype html>
<div id="app">${html}</div>
`)
res.end()
}).listen(3000);
App.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import routes from "./client/routes";
const App = ( ) => (
<Router>
<Route path="/" exact render={( props ) => ( <div>Helloworld</div> )} />
</Router>
)
export default App;
You need to use different history provider for server side rendering because you don't have a real DOM (and browser's history) on server. So replacing BrowserRouter with Router and an alternate history provider in your app.js can resolve the issue. Also you don't have to use two wrappers. You are using BrowserRouter twice, in app.js as well as clientIndex.js which is unnecessary.
import { Route, Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
const history = createMemoryHistory();
<Router history={history}>
<Route path="/" exact render={( props ) => ( <div>Helloworld</div> )} />
</Router>
You can now replace StaticRouter with ConnectedRouter which can be used both in client and server. I use the following code to choose between history and export it to be used in ConnectedRouter's history.
export default (url = '/') => {
// Create a history depending on the environment
const history = isServer
? createMemoryHistory({
initialEntries: [url]
})
: createBrowserHistory();
}
In clientIndex.js
Rather than BrowserRouter use StaticRouter.
import { BrowserRouter } from 'react-router-dom';
import { StaticRouter } from 'react-router-dom'
As is essentially noted in the comments, one may hit this error (as I have) by accidentally wrapping your App component in a <BrowserRouter>, when instead it is your client app that should be wrapped.
App.js
import React from 'react'
const App = () => <h1>Hello, World.</h1>
export default App
ClientApp.js
import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import ReactDOM from 'react-dom'
import App from './App'
const render = Component => {
ReactDOM.render(
<BrowserRouter>
<Component />
</BrowserRouter>,
document.getElementById('app')
)
}
render(App)
See also the React Router docs.
How do I get meteor to re-render my components when I sign in using the accounts-password package?
My react-router routes are:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import App from './containers/App'
import Recordings from './containers/Recordings'
import LandingPage from './containers/LandingPage'
import { BloodPressure } from '../collections/BloodPressure'
const routes = (
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={LandingPage} />
<Route path="dashboard" component={Recordings} />
</Route>
</Router>
)
Meteor.startup( ()=> {
ReactDOM.render(routes, document.querySelector('.render-target'))
})
My App component is:
import React, { Component } from 'react'
import { createContainer } from 'meteor/react-meteor-data'
import { browserHistory } from 'react-router'
import Header from './Header'
class App extends Component {
constructor(props) {
super(props)
}
render() {
return(
<div>
<div className="ui four container">
<Header />
{this.props.children}
</div>
<div className="footer">
<p>Designed and Developed by Thomas Hoadley</p>
</div>
</div>
)
}
}
export default createContainer(() => {
return {
signedIn: Meteor.userId()
}
}, App)
When I sign in, I expect the page to automatically reload with the correct routes, however I am having to reload the page manually to redirect it.
Any help on this issue would be greatly appreciated!
So as the title describes im doing an app available on github at denlillemand/react. It has a express backend that just serves a simple html template that imports my bundle.js. And the app initially renders just fine, but none of the routes seem to work.
Below is the components that are involved:
./Application.js
import React from "react";
import Marty from "marty";
import actions from "./actions";
import stores from "./stores";
import queries from "./queries";
import sources from "./sources";
import Router from "./Router";
import RealApp from "./components/App";
class Application extends Marty.Application {
constructor(options) {
super(options);
this.register(actions);
this.register(stores);
this.register(queries);
this.register(sources);
this.router = Router;
}
}
var app = new Application();
var { ApplicationContainer } = require('marty');
app.router.run(function(Handler,state){
React.render((
<ApplicationContainer app={app}>
<Handler{...state} />
</ApplicationContainer>
), document.getElementById("app"));
});
./components/App.js
import React from "react";
import Router from "react-router";
import Header from "./core/Header";
import Footer from "./core/Footer";
var RouteHandler = Router.RouteHandler;
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div>
<Header />
<RouteHandler />
<Footer />
</div>
);
}
}
./Routes.js
import React from "react";
import {Route} from "react-router";
import {DefaultRoute} from "react-router";
import App from "./components/App";
import About from "./components/About";
import ChapterOne from "./components/chapterone/ChapterOne";
import ChapterTwo from "./components/chaptertwo/ChapterTwo";
import ChapterThree from "./components/chapterthree/ChapterThree";
import ChapterFour from "./components/chapterfour/ChapterFour";
export default (
<Route name="app" path="/" handler={App}>
<Route path="/about" handler={About}/>
<Route path="/chapters/chapterone" handler={ChapterOne} />
<Route path="/chapters/chaptertwo" handler={ChapterTwo} />
<Route path="/chapters/chapterthree" handler={ChapterThree} />
<Route path="/chapters/chapterfour" handler={ChapterFour} />
<DefaultRoute name="default" handler={About}/>
</Route>
);
./Router.js
import Router from "react-router";
import routes from "./Routes";
let location = () => {
if(typeof window !== undefined){
return Router.historyLocation;
}
}
export default Router.create({
routes:routes,
location:location()
});
The default route seems to be the only one that works, since im hitting the About component. This app worked when it was SSR not long ago, and im kind of wondering if ive setup react-router correctly, but looking at the DOCS it seem like i have.
i guess i have to answer my own question,
The creator of MartyJS recently killed off his own project,
if you follow his twitter he announced it ..
so i guess im moving to redux since it has like 3500+ github starts i suppose it will be easier to find support for redux issues that arise .
Thanks .