Good day, I'm using react native. I need to use two exports in a folder, but I get this error when using it. What is the problem?
import history from "./components/usrFirst";
import { withRouter } from "react-router-dom";
class LoginForm extends Component {
...
}
export default withRouter(LoginForm);
export default !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();
As the error states, you can't have multiple default exports. You can have one, and then used a named export for the other.
const FirebaseComponent = !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();
export {
FirebaseComponent
}
export default withRouter(LoginForm)
Then you would use it like so
import LoginForm, { FirebaseComponent } from 'foo.js'
Related
I can't figured out this warning . I examined import and exports but still I can't comprehend what warning means
Require cycle: src\components\index.ts -> src\components\LoadNavigation.tsx -> src\components\index.ts
//index.ts
export { default as LoadAssets } from "./LoadAssets";
export { default as Loading } from "./Loading";
export { default as LoadNavigation } from './LoadNavigation';
export { default as SafeAreaView } from "./SafeAreaView";
export { SocialIcon, SocialIconButton, SocialIcons } from "./SocialAuth";
//LoadNavigation.tsx
import { AuthenticationNavigator } from "../navigation/auth-navigation";
import { useTypedSelector } from "../redux";
import { Onboarding } from "../screens";
import { AppRoutes } from "../types/navigation-type";
import Loading from "./Loading";
import { useIsFirstLaunch } from "./../hooks/useIsFirstLaunch";
How can I fix this warning. Thanks for any help.
I followed a guide to implement REDUX in my react-native app. I am trying to implement actions but my eslintkeeps on giving this error on 8th line-
[eslint] Prefer default export. (import/prefer-default-export)
My code is -
import * as types from './types';
const incrementCounter = counterValue => ({
type: types.INCREMENT_COUNTER,
counterValue,
});
export { incrementCounter };
My question is what is the proper way to export this constant function in ES6 ?
The simplest change would be to add as default to your export { incrementCounter };. However, to export your function as the default export you'd rather write
import * as types from './types';
export default counterValue => ({
type: types.INCREMENT_COUNTER,
counterValue,
});
or
import * as types from './types';
export default function incrementCounter(counterValue) {
return {
type: types.INCREMENT_COUNTER,
counterValue,
};
}
In config.js
// Declaration of const
const config = {
name: 'test'
};
export default config
In another file
// Using const
import * as config from '../config';
let name = config.name;
import/prefer-default-export is a questionable rule,
using default exports you will lose type consistence and your IDE won't be longer able to help you with refactoring, inspection and code completion.
you will be always able to import with a different name using import aliases: import {incrementCounter as foo} from 'incrementCounter'
It may appear as a personal opinion, but, I strongly suggest you to keep named exports and edit your .eslintrc:
{
"rules": {
"import/prefer-default-export" : 0
}
}
Please, refer to this discussion:
https://github.com/airbnb/javascript/issues/1365
Early today try vuex 2.1.2 vue:2.1.0, the directory structure is as follows
store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import common from './common/store'
export default new Vuex.Store({
modules : {
common
}
})
mutations-types.js：
export const ADD_NUM = "ADD_NUM"
common/store.js：
import * as types from '../mutations-types'
const state = {
num : 1
}
const mutations = {
[types.ADD_NUM] : function(state){
state.num = state.num + 1;
},
}
export default {
state,
mutations
}
common/actions.js：
import * as types from '../mutations-types'
export default {
setNum : store => {
store.dispatch(types.ADD_NUM)
},
}
common/getters.js:
export default {
getNum : state => {
state.common.num
},
}
Then get the value of num in Hello.vue through getters
In the vue entry file main.js, a store is injected
run error:
Property or method "getNum" is not defined on the instance but
referenced during render
Why is this error reported? Does this directory structure and code correct?
First of all, I did not read the official documents
Using mapGetters solves the problem
THANKS #Potray
I refer to the official demo link
I'm trying to use propTypes for my RN application, but it never seems to be enforced. My component looks something like this:
import React, { Component } from "react";
import { Text } form "react-native";
export class Table extends Component {
render() {
return (<Text>...</Text>);
}
}
Table.propTypes = {
data: React.PropTypes.string,
};
This didn't warn I passed a number into the component from another file like this:
<Table data= { 2000 } />
So I tried making propTypes a static property of Table because I saw some stuff about ES6 working with propTypes that way:
import React, { Component } from "react";
import { Text } form "react-native";
export class Table extends Component {
static propTypes = {
data: React.PropTypes.string,
};
render() {
return (<Text>...</Text>);
}
}
Then I tried adding a plugin to my .babelrc file
"plugins": [
"transform-class-properties",
]
I've tried making the prop required
static propTypes = {
data: React.PropTypes.string.isRequired,
};
I've even tried changing the export class Table... to export default class Table... with no luck. I've tried every combination of the methods listed above to no avail. What am I missing?
The problem seemed to go away by itself when I was fiddling with the code. It may have been an env issue like #asaf david suggested, I'm not really sure. I tried to go back and change stuff back to see if I could reproduce, but I couldn't :(. I'm sorry to anyone searching this in the future.
I am struggling to figure out how to correctly redirect to a login page when the user is not logged in using React and Redux.
Currently, in the constructor of the component, I check to see if the username is set, and if not, I use the routeActions provided by redux-simple-router to redirect to the login page. However, I get this error:
Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
I understand that setting the state inside of the render function should be avoided. but I am not sure where I should detect and redirect. I have also tried checking the auth state in the componentWillReceiveProps and ComponentWillMount, but no luck.
// WordListContainer.js
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {routeActions} from 'redux-simple-router';
import WordList from '../components/Words/WordList';
import {addWord, editWord, deleteWord, fetchWords} from '../actions/words';
function mapStateToProps(state) {
return {
auth: state.auth,
words: state.words
};
}
function mapDispatchToProps(dispatch) {
return {
router: bindActionCreators(routeActions, dispatch),
actions: bindActionCreators({
addWord, editWord, deleteWord, fetchWords
}, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(WordList);
and
// WordList.js
import React, {Component} from 'react';
import {Link} from 'react-router';
import WordListItem from './WordListItem';
export default class WordList extends Component {
constructor(props) {
super(props);
if(!this.props.auth.username) {
// This redirection causes the error
this.props.router.push('/login');
}
}
render() {
...
}
}
Is there a good place where I can check the state and redirect before even trying to render the component? Perhaps somehow using the Container Object, though I am not quite sure how to do it where I have access to both state and dispatch.
try componentDidUpdate() as this lifecycle method will always be called whenever the state changes.