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
Related
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';
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
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'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 {
}
react/redux newbie here. Trying to build a todo app and have a container component like this:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Input from '../components/InputText'
import addTodo from '../actions/addTodoAction'
export class InputText extends Component {
static propTypes = {
prop: PropTypes
}
}
export default connect(null, {addTodo})(Input)
The 'stateless' component Input looks like this:
import React from 'react'
import PropTypes from 'prop-types'
const InputText = ({addTodo}) => {
return (
<div>
<input type='text'></input>
<button onClick={this.props.addTodo}>add todo</button>
</div>
)
}
//question :define proptype for action?
InputText.propTypes = {
addTodo: PropTypes.func.isRequired
}
export default InputText
This is the actioncreator:
const addTodo = (param) => ({
type: 'ADD_TODO',
payload: param.text
})
export default addTodo;
When I run the app I get this error:
TypeError: Cannot read property 'addTodo' of undefined
So looks like the props are not passed in. What am I doing wrong? Link to
githubrepo
You don't have to use this.props.addTodo, just use it simply <button onClick={addTodo}>add todo</button>.
You have directly taken addTodo by destructuring the props.