I have a strange problem related to the function ‘connect’ and a presentational component
import React from 'react';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
import * as optionGroupActions from 'actions/optionGroupActions';
import OptionGroupForm from 'components/optionGroup/OptionGroupForm';
const mapDispatchToProps = (dispatch, ownProps) => {
return {
saveOptionGroup: (optionGroup) => {
dispatch(optionGroupActions.fetchSaveOptionGroup(optionGroup));
},
onClickCancel: () => {
ownProps.router.push('/product/options');
}
};
};
const OptionGroupAddContainer = connect(
null,
mapDispatchToProps
)(OptionGroupForm);
export default OptionGroupAddContainer;
This works but if I change the import with this
import { OptionGroupForm } from 'components’;
I got this error:
connect.js:57Uncaught TypeError: Cannot read property 'displayName' of undefined
components/index.js looks like
// OptionGroups
import OptionGroupForm from 'components/optionGroup/OptionGroupForm';
export {
OptionGroupForm
};
if you want to import like below
import { OptionGroupForm } from 'components’;
you have to use resolve in your build process config file to define the path variable,
or you can just import it like below
import { OptionGroupForm } from './components’;
EDIT: Your components/index.js should look like below
import OptionGroupForm from './optionGroup/OptionGroupForm';
export {
OptionGroupForm
};
Depending on your build process, you may need to specify your import like this in order to have the source be treated as a relative path rather than an npm module name:
import { OptionGroupForm } from './components’;
Related
I struggle to use a function of an indirectly imported class.
The components/SignUpForm component looks roughly like this and..
import React from 'react';
import Firebase from "components/firebase/index"
const submitForm = (event) => {
event.preventDefault();
Firebase.testmest("aaaaaaa");
}
.. as you see it imports a component component/firebase/index.js.
That index.js component has one default export and one named export:
import FirebaseContext from 'components/firebase/Context';
import Firebase from 'components/firebase/Firebase';
export default Firebase;
export { FirebaseContext };
The default export refers to a class component/firebase/Firebase.js:
import app from 'firebase/app';
import 'firebase/auth'
const firebaseConfig = {
...
};
class Firebase {
constructor(){
app.initializeApp(firebaseConfig);
this.auth = app.auth();
}
testmest = (hello) => {
alert(hello);
}
}
export default Firebase;
Whenever I try calling testmest from the SignUpForm Component as you see in the first code block I get the following error message:
TypeError: components_firebase_index__WEBPACK_IMPORTED_MODULE_2__.default.testmest is not a function
I have developed an component in React Typescript which is working perfectly fine. Also, I have written an Unit Test for same, but we are getting below error for the Unit Test page
TS2305: Module '"/app/containers/OrderFailure"' has no exported member
'OrderFailure'.
OrderFailure Compontent:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';
class OrderFailure extends Component<Props, State> {
}
const mapStateToProps = (state: any) => ({
orderDetails: state.orderReducer,
});
const mapDispatchToProps = {
push,
};
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
export default withConnect(OrderFailure);
Unit Test For Compontent:
import React from 'react';
import { IntlProvider } from 'react-intl';
import { render, fireEvent } from '#testing-library/react';
import { expect } from 'chai';
import { spy, assert } from 'sinon';
import { OrderFailure } from '../index';
describe('<OrderSuccess />', () => {
});
it('should call push with parameter on submit click', () => {
});
What I am missing, that while creating build I am getting error of no export
I'm trying to export initial component, but all the time I'm getting Invariant Violation error:
Is there any better way to export my HMAPP component and import it inside App.js?
Error image:
Error screen
Here is my App.js:
import HMAPP from './app/HMAPP';
export default HMAPP;
Here is my HMAPP component:
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { Navigation } from 'react-native-navigation';
import Mapbox from '#mapbox/react-native-mapbox-gl';
import { registerScreens } from './screens';
import store from './store/configureStore';
import { appInit, getInitialScreen } from './appInit';
import { handleErrorObject } from './lib/handleError';
Mapbox.setAccessToken('pkaeda324234');
const persistor = persistStore(
store,
null,
() => {
registerScreens(store, Provider);
appInit(store)
.then(() => {
const initialScreen = getInitialScreen(store.getState());
Navigation.startSingleScreenApp({
screen: {
screen: initialScreen,
},
passProps: {
persistor,
},
drawer: {
left: {
screen: 'DrawerMenuScreen',
},
},
appStyle: {
orientation: 'portrait',
},
});
})
.catch((error) => {
handleErrorObject('Error initializing app', error);
});
},
);
According to the docs of export and import, to externalize something inside one .js file, you need to use export. Once your module is exported, you can import him and use anywhere you want inside another .js files, for example.
So, in your HMAP.js file you'll need to export your const like this:
const persistor = persistStore( ... )
export default persistor;
and if you want to export more than one, you can export an object like this:
const persistor = persistStore( ... )
const persistor2 = persistStore2( ... )
export { persistor, persistor2 };
With your content exported, you can import it now on your App.js file:
import persistor from './app/HMAPP'; // use it when you exported with "default"
or
import { persistor1, persistor2 } from './app/HMAPP';
you could also import everything inside that file:
import * as persistors from './app/HMAPP';
Hope it helps someway.
In React Native, If you want to use your child component in other parent component then you have export that child component and import child component in parent component.
Else,
you declare your component with only class name, but in this way you can not use that component in any where.
Ex:
class Test extends React.Component {
}
I am using react native and redux, this is my action:
import EMPLOYEE_UPDATE from './types';
export const employeeUpdate = ({ prop, value }) => {
return (
{
type: EMPLOYEE_UPDATE,
paylaod: { prop, value }
}
);
};
but i get this error:
Actions may not have an undefined "type" property. Have you misspelled a constant?
EDIT:
the types.js file is:
export const LOGIN_USER_FAILED = 'loing_user_failed';
export const SHOW_SPINNER = 'show_spinner';
export const EMPLOYEE_UPDATE = 'employee_update';
You need to import EMPLOYEE_UPDATE from types file like this
import { EMPLOYEE_UPDATE } from './types';
You need to import the const as a named import rather than a default import since you have exported it as a named const.
import {EMPLOYEE_UPDATE} from './types';
See this answer for details on named and default exports:
in reactjs, when should I add brackets when import
I am importing multiple multiactions into my component and using connect. I have import one multaction and it works just fine, but I can't figure out how to do multiple. Here is my code.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import * as actions from '../../actions/posts_actions';
import * as actionsIndex from '../../actions/index';
import * as actionsComments from '../../comments_actions';
function mapStateToProps({ posts }, ownProps) {
return { post: posts[ownProps.match.params.id] };
}
export default connect(mapStateToProps, actions)(ShowPosts);
You can pass create a mapDispatchToProps that uses bindActionCreators and pass that as a second argument to connect instead of actions.
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(Object.assign({}, actions, actionsIndex,
actionsComments), dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(ShowPosts);