Im having this issue where even though I'm exporting both components
SearchBar & MainCard I keep getting this error message in my
App.js file. Any feedback is appreciated!
Error:
./src/App.js - Attempted import error: 'MainCard' is not exported from './components/ui-componets/SearchBar'.
App.js
import React, { Component } from 'react';
import { Container, Theme } from '#customLibrary/core'
import { connect } from 'react-redux';
import { fetchComponent } from './actions';
import TopMenu from './components/ui-componets/TopMenu';
import {SearchBar,MainCard} from './components/ui-componets/SearchBar';
class App extends Component {
state = {
visible: true,
width: 13,
}
handleClick = () => {
this.setState({ visible: !this.state.visible, width: 16 })
}
render() {
const { userData } = this.props;
const { visible } = this.state;
return <Theme>
<Container width='3379px'>
</Container>
<Container width='3379px'>
<TopMenu onClick={this.handleClick} userData={userData} />
</Container>
<Container width='3379px'>
<SearchBar />
</Container>
<Container width='3379px'>
<MainCard/>
</Container>
</Theme>
}
}
const mapStateToProps = (state) => {
return {
userData: state.user
}
}
export default connect(mapStateToProps, { fetchComponent })(App);
SearchBar.js
import React, { Component } from 'react';
import { IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS, IS_FETCHING_ROLES, FETCH_ROLES_SUCCESS, IS_FETCHING_RESOURCES, FETCH_RESOURCES_SUCCESS } from '../../actions/keys';
import { users, Roles, Resources } from '../../actions/URI';
import { fetchComponent } from '../../actions/index';
import { connect } from 'react-redux';
import _ from 'lodash';
import {
Theme,
Grid, Form, Icon, Container, Loader,
Card, Typography, Tabs
} from '#customLibrary/core';
class SearchBar extends Component {
...
}
class MainCard extends Component {
...
}
const mapStateToProps = state => {
return {
Users: state.users,
roles: state.roles,
resources: state.resources,
}
}
export default connect(mapStateToProps, { fetchComponent })(SearchBar,MainCard);
import {SearchBar,MainCard} from './components/ui-componets/SearchBar';
You have used default export while exporting, but using the syntax for named imports while importing.
import CustomName from './components/ui-componets/SearchBar';
should work
Issue: You've not correctly exported MainCard, and you export them as a default export (i.e. only one component is exported), but you import them as named exports.
export default connect(mapStateToProps, { fetchComponent })(SearchBar,MainCard);
Solution: From what I know, the connect HOC can only decorate a single component at a time. If you want to export both then you'll need to connect both individually as named exports (i.e. remove the default keyword.
export const ConnectedSearchBar = connect(mapStateToProps, { fetchComponent })(SearchBar);
export const ConnectedMainCard = connect(mapStateToProps, { fetchComponent })(MainCard);
Now the import in App will work
import { SearchBar, MainCard } from './components/ui-componets/SearchBar';
Related
For some reason my "secondComponent" isn't actually having mapStateToProps invoked at all, even with a console.log() in it and I am actually quite confused as to why this might be. Redux is working perfectly with my "App" component, but without mapStateToProps being called in the child component it's left in the dark.
Hoping someone could help me here!
1: Index.tsx, where I do make sure to have a Provider for the store.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import configureStore from './store';
const store = configureStore;
ReactDOM.render(
<Provider store={store()}>
<App />
</Provider>,
document.getElementById('root')
);
2: My "App" component that works with the redux store without issue.
import * as React from 'react';
import { connect } from 'react-redux';
import { addItemToCart, removeItemFromCart } from './store/cart/actions';
import { Button, Grid } from 'semantic-ui-react';
import { RootState } from './store';
import { SecondComponent } from './components/SecondComponent';
export interface IAppProps {
addItemToCart: typeof addItemToCart,
removeItemFromCart: typeof removeItemFromCart,
userId: number,
selectedItems: number[]
}
export class App extends React.Component<IAppProps> {
onClickAdd() {
this.props.addItemToCart(5);
}
public render() {
return (
<Grid centered>
<SecondComponent/>
</Grid>
);
}
}
const mapStateToProps = (state: RootState) => {
return {
userId: state.cart.userId,
selectedItems: state.cart.selectedItems
};
}
export default connect(
mapStateToProps,
{ addItemToCart, removeItemFromCart }
)(App);
3: The second component that doesn't have "mapStateToProps" invoked at all. :(
import * as React from 'react';
import { RootState } from '../store';
import { connect } from 'react-redux';
import { addItemToInventory, removeItemFromInventory } from '../store/inventory/actions';
import { Item, ItemTypesAvaliable } from '../store/inventory/types';
import { Fragment } from 'react';
import ItemTypeSection from './ItemTypeSection';
import { Grid } from 'semantic-ui-react';
export interface ISecondComponentProps{
removeItemFromInventory?: typeof removeItemFromInventory,
addItemToInventory?: typeof addItemToInventory,
items?: Item[],
itemTypesAvaliable?: ItemTypesAvaliable[]
}
export class SecondComponentextends React.Component<ISecondComponentProps> {
public render() {
let { itemTypesAvaliable } = this.props;
console.log(this.props);
return (
<Grid>
ok?
{itemTypesAvaliable != null ? itemTypesAvaliable.map(individualItemType => {
return <ItemTypeSection itemType={individualItemType} />
}) : <h1>doesn't work</h1>}
</Grid>
);
}
}
const mapStateToProps = (state: RootState) => {
console.log(state);
console.log("no???")
return {
// items: state.inventory.items,
// itemTypesAvaliable: state.inventory.itemTypesAvaliable
};
}
export default connect(
mapStateToProps,
{ addItemToInventory, removeItemFromInventory }
)(SecondComponent);```
Please make sure that you are importing the required instance. In your case, you need the redux connected instance of SecondComponent with the code
Right:
import SecondComponent from <pathToSecondComponentFile>
which is generating through
export default connect(
mapStateToProps,
{ addItemToInventory, removeItemFromInventory }
)(SecondComponent);
if you are importing the component like this
Wrong:
import {SecondComponent} from "<pathToSecondComponentFile>"
then please remove the braces of SecondComponent to get the default instance of export from file.
The component for route 'Feed' must be a React component.
I've checked most of the other similar questions here but the majority of them are due to basic syntax (which maybe I have too but am blind to!). I've removed chunks of code that aren't relevant to this issue (navigationOptions and other screens) and can still reproduce the error with just the below:
./navigators/AppNavigator.js
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import { FeedScreen } from '../screens/FeedScreen';
const FeedStack = createStackNavigator({
Feed: FeedScreen,
});
const DashboardTabNavigator = createBottomTabNavigator(
{
FeedStack
}
);
const DashboardStackNavigator = createStackNavigator(
{
DashboardTabNavigator: DashboardTabNavigator
}
);
const AppContainer = createAppContainer(DashboardStackNavigator);
export default AppContainer;
./screens/DashboardScreen.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import AppContainer from '../navigators/AppNavigator';
class DashboardScreen extends Component {
render() {
return (
<AppContainer />
);
}
}
export default DashboardScreen;
./screens/FeedScreen.js
import React from 'react';
import { View } from 'react-native';
export default class FeedScreen extends React.Component {
render() {
return (
<View>
</View>);
}
}
Any idea what I've done wrong here?
You have a default export for FeedScreen ... not a named export:
Try this:
import FeedScreen from '../screens/FeedScreen';
import { FeedScreen } from '../screens/FeedScreen'
You cannot importe like this if you re exporting by default.
Remove your default export or do replace your importe like this :
import FeedScreen from '../screens/FeedScreen'
You are using export default statement, that means you can´t import like that, you should provide a variable to store the component.
import Component from 'defaultexport'
I wonder how to use Inject without decorator.
First, I made this as Store.
//Data/imagedb
import { decorate, observable } from 'mobx';
class imageStore {
list = {
keyword : 'yoyo',
}
}
decorate(imageStore, {
list: observable,
})
export default imageStore;
Second, I made this code to inject Store on it.
//components/Image
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
class Image extends Component {
render() {
const onPut2 = {onPut};
return (
<div>
{onPut2}
</div>
);
}
}
export default inject(({ imSt }) => ({
onPut: imSt.list.keyword,
}))(observer(Image));
And finally, this is my last code.
The error is "Onput is not defined" in second code.
import React from 'react';
import Image from 'components/Image';
import { Provider } from 'mobx-react';
import imageStore from 'Data/imagedb'
const imSt = new imageStore();
const Home = () => {
return (
<div>
<Provider imSt={imSt}>
<Image />
</Provider>
</div>
);
};
export default Home;
I have the following parent component:
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import _ from "lodash";
import ChildComponent from "./ChildComponent";
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
I'm at Parent
<ChildComponent/>
</div>
);
}
}
function mapStateToProps(state) {
return { }
}
export default connect(mapStateToProps, null)(ParentComponent);
Inside the parent has a component called ChildComponent that looks like this:
import React, { Component, PropTypes } from "react";
import { connect } from "react-redux";
import { reduxForm } from "redux-form";
import { bindActionCreators } from "redux";
class ChildComponent extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
}
render() {
return (
<div>
at the child
</div>
);
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(
{
},
dispatch
);
}
function mapStateToProps(state) {
return {
};
}
export default connect(mapStateToProps, mapDispatchToProps)(
ChildComponent
);
When I try adding the child component I keep getting this error:
But if I click continue the page turns back to normal. I don't understand how the child component is undefined. It's just embedded and does not include any props.
UPDATE:
I'm not getting the error anymore but I notice my page turns blank when I open this particular component. I'll be doing a bit more troubleshooting.
I tried out your code, and it works fine for me. My thought was maybe what your entry file looks like? or file structure? If you like you can try the following syntax for the parent and child - it worked this way as well:
Child:
const mapStateToProps = () => {
return {}
}
const ConnectedChildComponent = connect(
mapStateToProps,
{})(ChildComponent)
export default ConnectedChildComponent;
Parent:
const mapStateToProps = () => {
return {}
}
const ConnectedParentComponent = connect(
mapStateToProps,
{})(ParentComponent)
export default ConnectedParentComponent;
In your ParentComponent change:
import ChildComponent from "./ChildComponent";
to
import ChildComponent from "./ChildComponent.jsx";
i.e. add the missing ".jsx" extension. Your code is most likely determining the import to be a ".js" file by default, whereas it's actually a ".jsx" file.
I was doing a bit of refactoring and tried connecting a higher level component to redux using connect() but the component I'm connecting keeps giving me empty props.
I've included the relevant code, I've structured my redux reducers into a ducks format, so the actions/creators and reducers are in one module file.
The files are containers/login.js, presentation/login.js, presentation/logins.js, app.js and the root index.js.
When I decided to rename some actions, files and reducers, moved the connect to a higher component, the connection stopped working and now I have empty props.
Help much appreciated.
// containers/login.js
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'
import { fetchPage } from '../redux/modules/Login';
import Login from '../presentation/Login';
const mapStateToProps = (state) => {
return {
page: state.page,
forms: state.forms
}
}
const mapDispatchToProps = (dispatch) => {
return {
fetchPage: () => dispatch(fetchPage())
} // here we're mapping actions to props
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Login);
// redux/modules/login.js
import fetch from 'cross-fetch';
const RECIEVE_FORM = 'RECIEVE_FORM';
export const receiveForm = (response) => ({
type: RECIEVE_FORM,
forms: response.forms
})
const initialState = {
page: "",
forms: []
}
// MIDDLEWARE NETWORK REQUEST DISPATCHER
export const fetchPage = () => {
return dispatch => {
return fetch('http://localhost:3001/login')
.then(
response => response.json(),
)
.then(
response => dispatch(receiveForm(response))
)
}
}
// REDUCER COMPOSITION CALL EXISTING REDUCERS
// REDUCER COMPOSITION PATTERN
// ACCUMULATIVE ACTION REDUCER
export default function Login(state = initialState, action){
switch (action.type){
case RECIEVE_FORM:
return {
...state,
forms: action.forms
}
default:
return state;
}
}
// presentation/login.js
import React, { Component } from 'react';
import styled from 'styled-components';
import Wrapper from '../components/Wrapper';
import Card from '../components/Card';
import Text from '../components/Text';
import Logo from '../components/Logo';
import FormGroup from '../components/FormGroup';
const WrapperLogin = styled(Wrapper)`
.login__card{
padding: 4.5rem 2.5rem 2rem 2.5rem;
}
`;
const BoxLogo = styled.div`
.login__logo{
display: block;
margin: 0 auto;
}
`;
export default class Login extends Component{
componentDidMount() {
console.log(this.props)
//this.props.fetchPage();
}
render(){
return(
<main>
<WrapperLogin className="login">
<Card className="login__card">
<BoxLogo>
<Logo className="login__logo" width={187.36} height={76.77} />
</BoxLogo>
<FormGroup name="login" className="login_formGroup" />
</Card>
<Text primitive="p" margin='4px 0 0 0' size="0.8rem" textAlign="center" display='block'>Brought to you by WORLDCHEFS</Text>
</WrapperLogin>
</main>
)
}
}
// app.js
// manage routes here
//import _ from 'lodash';
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import Login from './presentation/Login';
type Props = {
}
type State = {
mode: string
};
export default class App extends Component <Props, State> {
constructor(){
super();
this.state = {
...this.state,
mode: 'mobile'
}
}
render(){
return(
<ThemeProvider theme={{ mode: this.state.mode }}>
<Login />
</ThemeProvider>
)
}
}
// root
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import registerServiceWorker from './registerServiceWorker';
import App from './App';
import { injectGlobal } from 'styled-components';
import styles from './assets/styles';
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root')
);
The reason your props in Login component are empty is because you are not actually using the connected Login container, As you have mentions its in containers/login
So in your App.js change the import of login from ./presentation/login to
import Login from '/path/to/containers/Login';
You have imported presentation component in your app.js rather than container component. Please import your container component like below
import Login from './containers/login.js';
This will solve the problem as per my understanding from your code