I'm trying to import a style variable from another file but it tells me that it's undefined
My directory:
Components
Login
LoginForm.js
appstyle.js
appstyle.js
export default AppStyles = {
colour: {
custom: 'rgb(86,200,95)'
}
}
Login.js
import React, { Component } from 'react';
import AppStyles from '../appstyle';
class LoginForm extends Component {
render() {
const header = {
color: AppStyles.color.custom
}
return (<div ><p style={header}> test </p></div>)
}
error:
./src/components/appstyle.js
Line 1: 'AppStyles' is not defined no-undef
Search for the keywords to learn more about each error.
What is wrong? I honestly cant see what i did that's making it not recognize it.
Your export statement is wrong, if you want to name something you need to declare a variable:
Or you can also NOT name it, as it is a default export, and name the import only in your Login file.
export default {
[...]
}
export default AppStyles = {
colour: {
custom: 'rgb(86,200,95)'
}
}
AppStlyes Is not defined. You have no variable declaration.
Instead it should look like this.
const AppStyles = {
colour: {
custom: 'rgb(86,200,95)'
}
};
export default AppStyles;
Rewrite appstyle.js:
const AppStyles = ...;
export default AppStyles;
Spelling error:
AppStyles sets a property colour:
export default {
colour: {
custom: 'rgb(86,200,95)'
}
}
And you are looking for a property named color:
AppStyles.color.custom
EDIT:
You also need to directly export the object. The way you are attempting to export is causing the undefined issue.
Related
I'm trying to extend default theme, extending colors works like a charm, but if I try to extend Text component with more text styles, this doesnt work, I don't understand what I'm doing wrongm. This is my react-native-elements.d.ts file:
react-native-elements.d.ts
import 'react-native-elements';
import { ColorValue, StyleProp, TextStyle } from 'react-native';
type ColorSwatch = {
otherColor: string;
};
declare module 'react-native-elements' {
export interface Colors extends ColorSwatch {}
export interface TextProps {
h5Style: StyleProp<TextStyle>;
}
export interface FullTheme {
colors: RecursivePartial<Colors>;
Text: Partial<TextProps>;
}
}
I'm trying to implement the theme like this:
import { FullTheme } from 'react-native-elements';
export const theme: FullTheme = {
Text: {
h5Style: {
fontFamily: '',
},
}
}
This is the TS error in console:
Object literal may only specify known properties, but 'h5Style' does not exist in type 'Partial<TextProps>'. Did you mean to write 'h1Style'?
Looks like h5Style doesn't exist on the TextProps interface.
This is my initial screen:
LoginScreen.js
import { Toast } from 'native-base'
class LoginScreen extends Component {
showError(error) {
Toast.show({
text: error
})
}
.....
}
export default connect(mapStateToProps)(LoginScreen)
I am trying to invoke the showError function below like this:
loginAction.js
import LoginScreen from './LoginScreen'
let a = LoginScreen.showError('Testing')
I am getting an error saying:
LoginScreen.showError() is not a function
Since showError isn't related to LoginScreen and doesn't use its instance, it shouldn't be its method. The use of classes as namespaces is antipattern in modern JavaScript, ES modules serve this purpose:
export function showError(error) {
Toast.show({
text: error
})
}
class LoginScreen extends Component {...}
Since showError doesn't do anything that would be specific to login screen and may be reused in other places, it could be moved from LoginScreen to common module.
You can statically define the method you want to call in another file.
In your case :
import { Toast } from 'native-base'
class LoginScreen extends Component {
static showError(error) {
Toast.show({
text: error
})
}
.....
}
export default connect(mapStateToProps)(LoginScreen)
And then just call it like :
import LoginScreen from './LoginScreen'
let a = LoginScreen.showError('Testing')
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 still getting a hang of react+redux, and ES6. I am trying to implement socketio, and I come across the problem of having to export socketio connect with my redux's connect.
redux connect
export default connect(mapStateToProps, matchDispatchToProps)(UserList);
socketio connect
export default socketConnect(App);
Question
What is the correct syntax to make them work together?
You can't have more than one default export.
Instead, use named exports.
// moduleName.js
export const ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)
export const RealTimeApp = socketConnect(App);
Require the exports by name.
// otherModule.js
import { ConnectedUserList, RealTimeApp } from "./moduleName"
You can mix default export and named export.
export default ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)
export const RealTimeApp = socketConnect(App);
And after, you can import your exports :
import ConnectedUserList, { RealTimeApp } from "./moduleName"
One possibility I've not seen mentioned. You can have only one default export, but what you export can be an object with multiple members:
// MyModule.js
const componentA => () => {return <div>Component A</div>;}
const componentB => () => {return <div>Component B</div>;}
export default { componentA, componentB };
And then:
import MyModule from "./MyModule";
MyModule.componentA();
export default () => {
return {export1, export2};
}
export default { constOne, constTwo } and import data from './data.js' will do the trick. To access the data in the target file, it would be like so: {data.constOne} or {data.constTwo}
Example
Lets say we have the following data.js file:
const summary = [
{ label: 'Turned pro', content: '2020' },
{ label: 'Profession', content: 'Engineer' }
]
const reputation = [
{ community: 'Code Review', points: 176 },
{ community: 'Game Development', points: 101 }
]
export default { summary, reputation }
One way to import and use the data, would be like so:
import data from './data.js'
function App(){
return (
<div>
{data.summary.map((el) => <p>{el.label}</p> )}
</div>
)
}
I cant get why following approach doesn't work:
constants.js
import { createConstants } from '../utils';
export default createConstants(
'LOGIN_REQUEST',
'LOGIN_SUCCESS',
'LOGIN_FAILURE',
'LOGOUT',
'FETCH_DATA_REQUEST',
'RECEIVE_DATA'
);
utils.js
import React from 'react';
export function createConstants(...constants) {
return constants.reduce((acc, constant) => {
acc[constant] = constant;
return acc;
}, {});
}
Next i want to import LOGIN_REQUEST for example as redux action.
import { LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT } from '../constants';
But i'm getting undefined each time for all imported constants.
It works only when i'm defining like this:
export const LOGIN_REQUEST = 'LOGIN_REQUEST';
Maybe somebody has some ideas?
Your first approach is called a default export. It doesn't work because the syntax you're using is not correct.
From the MDN export entry, that's how you write a default export:
// module "my-module.js"
export default function cube(x) {
return x * x * x;
}
Your second approach is called named export and it works because it has the right syntax. Again from MDN:
export const foo = Math.sqrt(2); // exports a constant
Hope it helps.
Export doesnt work like that. You can try something like:
import allConstants from '../constants';
Then use a constant like:
allConstants.LOGIN_REQUEST