I don't see any problem with my code, App is a component and it's used, but eslint gave me this warning
./src/containers/app/index.js
Line 6: 'App' is assigned a value but never used no-unused-vars
my code
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import store, { history } from './store'
import App from './containers/app'
import './index.css'
const target = document.querySelector('#root')
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<App />
</div>
</ConnectedRouter>
</Provider>,
target
)
Any clue how to fix that for react?
The standard ESLint rules don't know anything about JSX. You'll need to use https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md in order to get the behavior you want.
Related
I have a project using react-router v6, and I am getting an error stating useNavigate() may be used only in the context of a <Router> component.
For some background, I have two projects that live in the same repo and get built together. We leverage code splitting and import them as needed, not sure if this matters.
Now, I have a setup that is pretty simple:
(in the #dummyInc/components project)
Dummy.tsx
import React from 'react'
export function Dummy() {
const navigate = useNavigate()
return <div> Hello World <button onClick={() => navigate('/someRoute')}> </div>
}
Then my code uses it in a different project that is just imported.
(in the #dummyInc/site project)
App.js
import React from 'react'
import Dummy from '#dummyInc/components'
export function App() {
return <div> <Dummy /> </div>
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './src/App'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
Now I have the above and when I try to render it in the browser, it says the following, but I'm not sure how that's possible, it's being rendered in that context.
Error: useNavigate() may be used only in the context of a <Router> component.
Am I missing something? Any help is appreciated.
I am trying to figure out React and am not sure what is wrong here, as the browser shows a blank.
Here is the Code.
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import Home from './Home';
function App() {
return (
<>
<Router>
<Routes>
<Route exact path="/" element={<Home />}/>
</Routes>
</Router>
</>
);
}
export default App;
Update 1 -
The code as viewed on index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
This is a react#18 change in how React apps are rendered. createRoot takes a DOMNode reference, not JSX. Once the root is created, then you can call a render method on it.
Example:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
See react-dom-client for more in-depth detail.
I don't find any error in this page. Check whether you have imported the home component properly here. If it is imported properly, Check the home component for errors. You can also check whether you are getting any errors or warnings in the console.
I have the following ReactJS project structure and I'm getting the following error:
./src/index.js
Attempted import error: './components' does not contain a default export (imported as 'App').
My goal is to import components like this: import { App, Navbar } from 'components'; (notice the 'components') and not like ./components/App, ./components/App/index or so. To do that, I needed to add index.js in the components directory. I tried doing that by the following code, but I'm receiving the error above.
What's the reason? How do I solve it?
There are similar threads, but I'm already exporting it by export default App; in ./components/App/index.jsx. Maybe the reason is the .jsx extension?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
components/index.js
export App from './App';
components/App/index.jsx
import React, { Fragment } from 'react';
import './style.css';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import NotAuthorizedRoute from '../../common/NotAuthorizedRoute';
import { Navbar, Home, User, Login } from 'components';
const App = () => {
return (
<Fragment>
<Router>
<Navbar />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={User} />
<NotAuthorizedRoute path="/sign-in" component={Login} />
<Redirect from="*" to="/" />
</Switch>
</Router>
</Fragment>
);
};
export default App;
components/App/style.css
What I tried:
I tried doing the following, like people said in this thread: Attempted import error: 'App' is not exported from './App'.
components/index.js
export { App } from './App'; // note the brackets
But then I got:
./src/components/index.js
Attempted import error: 'App' is not exported from './App'.
It seems you are having some confusions with ES6 export/import syntaxes. MDN documentation is very explicative, I would recommend you to check it.
The most important thing is to remember the difference between default and named export/import. (HINT: When you see brackets in export/import statements you are dealing with named ones)
In your specific case, you will have to do as follows:
./components/component-a.jsx
const ComponentA = () => {
return (
<MyComponent/>
);
};
export {ComponentA};
./components/component-b.jsx
const ComponentB = () => {
return (
<MyComponent/>
);
};
export {ComponentB};
./components/index.js
import {componentA} from './component-a.jsx';
import {componentB} from './component-b.jsx';
export {componentA, componentB};
./some-file.jsx
import {componentA, componentB} from './components';
./some-other-file.jsx
import {componentA} from './components';
This is the typical pattern to create a virtual export/import namespace for logical module classification.
Please note that I've not used default exports. There are several opinions about this, but I would recommend to not use them to avoid errors like the one you are having.
Please also note that you'll always have to specify the full relative path to the components directory. The only way to import things from 'components' is by having a components package installed in your node_modules directory.
Make sure you are not using the exported value componentA in {componentA}
remove `{}` and check
I am trying to add the react sticky header to my stepper.
but the problem is if I add inside my App.js its not rendering.
so I started debugging the App.js code.
if I give console inside my render method of App.js its not displaying console.log("App---->");
right now I am getting Cannot read property 'getState' of undefined error
can you tell me how to fix it.
so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/6zv5n0ro9z
App.js
import React from "react";
import { StickyContainer, Sticky } from "react-sticky";
// ...
class App extends React.Component {
render() {
console.log("App---->");
return (
<StickyContainer>
{/* Other elements can be in between `StickyContainer` and `Sticky`,
but certain styles can break the positioning logic used. */}
<Sticky>
{({
style,
// the following are also available but unused in this example
isSticky,
wasSticky,
distanceFromTop,
distanceFromBottom,
calculatedHeight
}) => <header style={style}>{/* ... */}</header>}
</Sticky>
{/* ... */}
</StickyContainer>
);
}
}
index.js
import React from "react";
//import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { logger } from "redux-logger";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
//import reducer from "./reducers";
import thunk from "redux-thunk";
//const store = createStore(reducer, applyMiddleware(thunk, logger));
//ReactDOM.render(<Demo />, document.querySelector("#root"));
render(
// <Provider store={store}>
<Provider>
<App />
</Provider>,
document.getElementById("root")
);
You need to either pass a store to the Provider as Mark suggests, or if you have simplified your example to the point of not needing it, then remove the Provider element entirely so you are just rendering the App element. The current stack trace shows that the error is in Provider.
You also need to add:
export default App;
to the bottom of App.js.
You need to pass your store as props to the wrapping Provider
render(<Provider store={store} >
<App />
</Provider>,document.getElementById("root"));
If you're going to render a React-Redux <Provider>, you must create a Redux store and pass it as a prop named store. I see you've got those lines in there - you should uncomment them.
Chances are that you would have not set the store property correctly.
Make sure that store is imported this way.
import store from './store';
and not the below way
import {store} from './store';
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
import store from './store';
Running code should look like below
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
enter code here
For anyone else stumbling on this, try to pull your <Provider> up a level and make use of your getters from a child.
Make sure you have imported import store from './redux/store' and pasing provider as <Provider store={store}> here I am emphasizing on `store' file and import must be small letter must not be camel or uppercase. This is what i have found during redux learning.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
I'm newbie in reactjs, I tried build something with it but I had problem with react-router-redux. I get React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. in console. Here is my code :
App.js
import React, { PropTypes } from 'react';
class App extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default App;
Routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router'
import App from './components/App';
import Login from './components/login/Login';
import Register from './components/register/Register';
export default (
<Route path="/" component={App}>
<IndexRoute component={Login}/>
<Route path="register" component={Register}/>
</Route>
);
And Index.js
...
import { syncHistoryWithStore } from 'react-router-redux'
import { Router } from 'react-router'
import { createBrowserHistory } from 'history';
import routes from './routes';
const store = configureStore();
const history = syncHistoryWithStore(createBrowserHistory(), store)
ReactDOM.render(
<Provider store={store}>
<Router history={history} routes={routes}>
</Router>
</Provider>,
document.getElementById('app')
);
Where is my wrong? Please explain for me why I get this error. Thank in advance
React-router-redux is no longer maintained and support only 3.x and 2.x React-router versions
Repo authors suggest using connected-react-router for React-rotuer 4.x bindings
There are different routers for different environments, you want to use BrowserRouter instead of Router.
See React Training BrowserRouter for more information.
index.js
// change this line
import { Router } from 'react-router';
// to
import { BrowserRouter as Router } from 'react-router-dom';
NOTE: You might also have to pass in your routes in a different way. This is shown in the React Training page provided above.