Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
All pages in my app render perfectly. I've just added another page called the Lightning page which looks like this:
import React from 'react'
class LightningPage extends React.Component{
render(){
return(<h1>Hello!</h1>)
}
}
export default LightningPage;
I then have an index.js file which has the following:
export { deafult as LightningPage } from './LightningPage.js'
I then import it into my App.js like so:
import React, { Component } from 'react';
import './App.css';
import { Header } from './header'
import { Route, Switch } from 'react-router'
... Import other page components ...
import { LightningPage } from './lightning'
const contentDivStyle = {
padding: "1rem"
}
class App extends Component {
render() {
return (
<div>
<Header />
<div id='content' style={contentDivStyle}>
<Switch>
<Route exact path="/lightningCounter" component={LightningPage} />
<Route exact path="/" component={Home} />
... Other routes ...
</Switch>
</div>
<Footer />
</div>
)
}
}
export default App;
For clarity my folder structure is:
/src
--/lightning
----index.js
----LightningPage.js
... Other Component folders ...
--App.js
When I view '.../lightningCounter' in my browser I see nothing and from the react developer console I can see that the component prop for Route is undefined. If I change the component to another (eg. Home) it displays. If I move my LightingPage component into the src/ root and modify the import ({ LightningPage } => LightningPage) it works aswell. What am I doing wrong here?
I used the create-react-app and the included npm scripts. Production build does not differ from development.
In the index.js file:
export { deafult as LightningPage } from './LightningPage.js'
Should be:
export { default as LightningPage } from './LightningPage.js'
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am a react beginner learner. I do try to create the first project in react. But I can not output my project.
My react index.js is:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js is:
import react from 'react';
import heard_title from './component/heard_title'
export default function App() {
return (
<div>
<test />
<heard_title />
</div>
);
}
my component is
import React from 'react'
export default function heard_title() {
return (
<div>
<h1>hi</h1>
</div>
)
}
But when the project is run why I can not show output hi?
First of all you should share file structure of your app so that we can understand the work flow of imports in your app.
for example
--- project
-- src
- App.js
- index.js
-- components
- heard_title.js
Once check your imports "components" or "component" directory name
You are violating one of React protocols!
Warning: <heard_title /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
To achieve your goal, update your App.js like below:
import react from 'react';
import HeardTitle from './component/heard_title'
export default function App() {
return (
<div>
<Test />
<HeardTitle />
</div>
);
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
while I tried to run my react-redux app using npm start it shows Attempted import error: 'store' is not exported from './app/store'.. error is in my index.js file.
this is my store.js file
store.js
import { configureStore } from '#reduxjs/toolkit';
import counterReducer from '../features/counterSlice';
export default configureStore({
reducer: {
counter: counterReducer,
},
});
this is my index.js file
index.js
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';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();```
[1]: https://i.stack.imgur.com/F1e6q.png
Use this instead:
import store from './app/store';
This is because in your app/store you are using export default on the object.
Objects that are exported by default, do not need to be specified within curly braces.
Read the top of this documentation to see various syntax styles.
If you were to export another object from the app/store file, then you'd have to specify it in the following way:
import store, { anotherObj } from './app/store';
You've got mismatched imports and exports.
store.js is doing a default export:
export default configureStore()
But index.js is doing a named import:
import { store } from './app/store';
You need to use the same pattern on both sides. Either export default configureStore() and import store, or export const store = configureStore() and import {store}.
Your import in index.js file for the store.js should be like:
import store from './app/store.js'; (Changes according to your file structure).
But do not use brackets.
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 want to create new Routes for my works web application, but the way that they are using the Routes is not the way I thought they would be used. Essentially I want to add new routes and be able to click on say like a button, and that will take me to the desired route that I want to go to.
The way it is set up in our application is that you actually have to manually go in the browser and type in the extended path to access that route, which doesn't seem like a good way of doing it.
Right now I have a route set up for our inventory system. You would access this route by typing in localhost::3000/inventory. There are buttons that come up on this main page which when clicked render that specific component. Instead of doing it that way, I would rather set up another route like /additem to the inventory path so that when I click on the Add Item button it will take me to the path localhost::3000/inventory/additem and render that component.
This is what our index.js file looks like for reference
import "babel-polyfill";
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ServiceReport from './imports/ServiceReportUI/ServiceReport'
import './StyleSheets/ServiceReport.css';
import InventorySystem from './imports/InventorySystem/InventorySystem.js';
import AddNewItemBtn from "./imports/InventorySystem/AddNewItemBtn";
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<Switch>
<Route exact path='/' component={App}/>
<Route path='/service' component={ServiceReport} />
<Route exact path='/inventory' component={InventorySystem} />
</Switch>
</BrowserRouter>), document.getElementById('appRoot'));
I'm thinking that adding another route like so will do the trick:
<Route exact path='/inventory/additem' component={AddItem} />
And I would access that route from within my InventorySystem.js file by doing something like this:
Class InventorySystem extends React.Component{
constructor(props){
super(props);
this.state = {}
}
goTo(e){
//go to Add Item path
}
render(){
return(
<button onClick={this.goTo.bind(this)}>Add Item</button>
)
}
}
I don't know much about React Router, and I'm also not sure if this is the right way of going about this, but any help or suggestions would be awesome!
The way to navigate within a React-Router setup is by using the Link component provided by the repo. Your first suggestion to create an additional Route for the AddItem component is correct. Simply import the Link component and define the expected path to go to.
import { Link } from "react-router-dom
class InventorySystem extends React.Component{
constructor(props){
super(props);
this.state = {}
}
render(){
return(
<Link to="/addItem">Add Item</Link>
)
}
}
You can style the Link to look like a button if needed as it does accept a className property.
You have 2 options, both included in example below
import { Link } from "react-router-dom";
class InventorySystem extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
goTo(e) {
// option 1
this.props.history.push('/inventory/additem');
}
render() {
return (
<div>
<button onClick={this.goTo.bind(this)}>Add Item</button> // option 1
<Link to="/inventory/additem">Add Item</Link> // option 2
</div>
)
}
}
I have parent component that shows an image at a specified path (note: the image is already saved in my project). This path optionally can have additional parameters. If the
For example, The image is displayed (image) if the html path is:
www.mysite.com/myPath
The component is displayed but image is broken (broken image) if the html path is:
www.mysite.com/myPath/someFilterForThisPage
Router
// Libraries
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { browserHistory } from 'react-router';
// Components
import Home from './containers/Home';
import NotFound from './components/NotFound';
import MyComponent from './components/MyComponent';
// Redux
import { Provider } from 'react-redux';
import {createStore} from 'redux';
import allReducers from './reducers';
const store = createStore(
allReducers,
window.devToolsExtension && window.devToolsExtension()
);
// Routes
const routes = (
<Router history={browserHistory}>
<div>
<Provider store={store}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/myPath/:filter?" component={MyComponent} />
<Route component={NotFound} />
</Switch>
</Provider>
</div>
</Router>
);
export default routes;
I don't think the issue is with my router.js file since the component still shows when a filter is applied in the html path (the image is just broken, ), but I am providing it just in case I am misunderstanding something.
My Component:
// React
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
<div>
<img src={"img/x.png"} id="someId" alt=""/> // ISSUE
// ...
// some divs that show/don't based on the filter of the html path
// ...
</div>
}
}
export default MyComponent;
I have looked at and tried some of the following, but with little luck:
React won't load local images
Dynamically Add Images React Webpack
I think these are different because these are mainly issues related to being unable to display images at all. I am able to display the image, but only when the optional html parameter is not set.
Does anyone know why the image is showing, but only if there is no extra html parameter?
Many thanks.
Any reason why {"img/x.png"} is not accessing root? Such as {"/img/x.png"} or setup your env domain as a global variable and add that in there otherwise you are looking inside every directory you hit for an img directory.