When attempting to use the AppBar in version 0.16.6 of Material UI, I get the following error
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
which looks like a react conflict error.
My code is as follows:
App.js
import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
import {deepOrange500} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const muiTheme = getMuiTheme({
palette: {
accent1Color: deepOrange500,
},
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar/>
</MuiThemeProvider>
);
}
}
export default App;
index.js
import injectTapEventPlugin from 'react-tap-event-plugin';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Has anyone encountered this, or does anyone know how to fix the problem?
In the index.js file you will need this before the ReactDOM.render call:
// Needed for onTouchTap event handling
injectTapEventPlugin();
See if that clears up the issue. If not, then try deleting the node_modules folder and running npm install again.
Related
Makes the Redux store available to the connect() calls in the component hierarchy below.
'Provider' cannot be used as a JSX component.
Its instance type 'Provider' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/Nilay/Desktop/nilay/src/pages/Home/Reel/node_modules/#types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.ts(2786)
can anyone can tell how to fix this i have tried npm install again my node version is 18plus
img here
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { ApolloProvider } from "#apollo/client";
import { apolloClient } from "./utils/index";
ReactDOM.render(
<React.StrictMode>
<Router>
<ApolloProvider client={apolloClient}>
<Provider store={store}>
<App />
</Provider>
</ApolloProvider>
</Router>
</React.StrictMode>,
document.getElementById("root")
);
serviceWorker.unregister();
It seems like #types/react problem with multiple versions.
Try to uninstall react-redux and react (check that the dependencies removed) and install again.
Also try to install #types/react, its installed through dependencies.
Some workarounds can be found here: https://github.com/facebook/react/issues/24304#issuecomment-1094565891
Code of Login Component:
import Grid from '#material-ui/core/Grid';
import Paper from '#material-ui/core/Paper';
const Login=()=>{
return (
<Grid>
<Paper>
Sign in
</Paper>
</Grid>
)
}
export default Login
Code for App.js
import './App.css';
import Login from './components/Login';
function App() {
return (
<div className="App">
<Login></Login>
</div>
);
}
export default App;
Code for app.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
There's no problem with your code try restart your server it will solve the issue. I am attaching a code sandbox link where you can see it running fine.
Do one thing which is recommended change your app.js to index.js
https://codesandbox.io/s/exciting-thompson-u1rxk?file=/src/index.js
I am totally new to React and i'm following tutorials (Programming with MOSH) in youtube but i'm stuck with this error, unable to resolve after finding similar questions.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import "bootstrap/dist/css/bootstrap.css";
import Counter from './components/counter';
//import * as Counter from './components/counter'; //tried this method too
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
counter.jsx
import React, { Component } from 'react';
class Counter extends Component {
render() {
return <h1> Hello world</h1>;
}
}
export default Counter;
in command prompt i had done npm install and npm start after deleting package-lock.json but still the same error
folder structure
Thanks in advance.
Move your components folder inside the SRC this will fix it
Either move components folder inside src folder or change the reference in the import statement to '../component/counter'
I just upgraded react-navigation to v2.0-rc9, and it complains that
You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator.
I have only one navigator, as shown below, and I can't understand where that comes from. Could you please point to a possible cause for that error ? Below are my root component and the way I create the navigator.
Root.js:
import React, { PureComponent } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import AppNavigation from './AppNavigation';
class Root extends PureComponent {
render() {
return (
<Provider store={store}>
<AppNavigation/>
</Provider>
);
}
}
export default Root;
AppNavigation.js:
import { createStackNavigator } from 'react-navigation';
const AppNavigation = createStackNavigator({
home: HomePage
});
export default AppNavigation;
Try updating the react-navigation to 2.0.2 as according to this issue it is a bug with react-native and not react-navigation. The author seems to have added a patch in version 2.0.2.
Check if it works for you and post any further error on the issue there.
Thanks.
Learning ReactJS with ES6. Trying to implement React-Bootstrap components. I am also using the react router. I am trying to implement the Navbar component.
It will just be a nabber with the brand and a search box. I aim to expand and use the search box component a lot more so I have put it in its own separate component below.
LocationSearchBox.js
import React, {PropTypes} from 'react'
import Form, {FormGroup, FormControl} from 'react-bootstrap'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit">Submit</Button>
</FormGroup>
)
}
The navber will be on all pages so I have put it in the topmost route and its component is the Main.js file shown below along with routes.js to manage client side routes.
import React, {Component} from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
export default class Main extends Component{
constructor(props) {
super(props);
this.props = props;
}
render() {
return(
<Navbar>
<NavbarHeader>
<NavbarBrand>
React-Bootstrap
</NavbarBrand>
</NavbarHeader>
<NavbarCollapse>
<Search/>
</NavbarCollapse>
</Navbar>
)
}
}
routes.js
import React from 'react';
import ReactRouter, {Router, Route, IndexRoute, browserHistory} from 'react-router';
import Main from '../components/Main';
export var routes = (
<Router history={browserHistory}>
<Route path='/' component={Main} />
</Router>
);
Index.js is below and is the entry file to use in Webpack/babel
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from './config/routes';
ReactDOM.render(routes, document.getElementById('root'));
So when i run web pack-dev-server, go to localhost:8080 as the default port the main route should be hitting. I believe it does but I get errors, namely 3 of the same kind.
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Main`.
I believe it might be due to the way I am importing the Navbar components in Main.js, such as NavbarHeader, NavbarCollapse etc but that is a guess. I would really appreciate any help in solving this issue, thank you.
You are using the Button component without importing it:
<Button bsStyle="success" type="submit">Submit</Button>
Import it correctly and the issue should be resolved.