We Keep Coding

Babel - Import a function from a JS file and use it in a React component in another JS file

(Babel libraries and ReactDOM are in the HTML file)
regin.js
function hello(){
alert("hello");
}
export default hello;
hello.js
import hello from "./regin";
class Post extends React.Component {
constructor(props){
super(props);
}
doit = () => {
hell();
}
render(){
return (
<div>
<img alt="userimg" onClick={this.doit} src={this.props.img}/>
</div>
)
}
}
This gives me errors:
Uncaught ReferenceError: require is not defined
and
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Why doesn't this work?

Try this way
import {hello} from "./regin";

Getting Invariant Violation while making routes in react-native-tab-view

Current behaviour
While using react-native-tab-view v1.0.0, getting error:
Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `SceneComponent`.
This error is located at:
in SceneComponent (at SceneMap.js:16)
in RCTView (at View.js:43)
in AndroidViewPager (at ViewPagerAndroid.android.js:247)
in ViewPagerAndroid (at PagerAndroid.js:154)
in PagerAndroid (at TabView.js:59)
in RCTView (at View.js:43)
in RCTView (at View.js:43)
in TabView (at UnderlineTabbar.js:76)
Expected behaviour
Should not throw error and run.
Code sample as below
/* #flow */
import * as React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import {
TabView,
TabBar,
SceneMap,
type Route,
type NavigationState,
} from 'react-native-tab-view';
import LinearGradient from 'react-native-linear-gradient';
import CategoryPage from './CategoryPage';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import ButtonWithIcon from '../../components/ButtonWithIcon';
type State = NavigationState<
Route<{
key: string,
title: string,
}>
>;
const initialLayout = {
height: 0,
width: Dimensions.get('window').width,
};
export default class UnderlineTabbar extends React.Component<*, State> {
constructor(props) {
super(props);
this.state = {
index: 0,
routes: [],
scenes: {}
};
props.categories.forEach(category => {
this.state.routes.push({ key: category.description, title: category.name });
});
let scenes = {};
props.categories.forEach(category => {
if(category.assets.length > 0) {
const FirstRoute = () => (
<View style={[styles.container, { backgroundColor: '#ff4081' }]} />
);
scenes[category.description] = FirstRoute;
}
});
this.state.scenes = scenes;
}
_handleIndexChange = index =>
this.setState({
index,
});
_renderTabBar = props => (
<TabBar
{...props}
scrollEnabled
indicatorStyle={styles.indicator}
style={styles.tabbar}
tabStyle={styles.tab}
labelStyle={styles.label}
/>
);
render() {
const config = {
velocityThreshold: 0.1,
directionalOffsetThreshold: 800
};
return (
<TabView
style={[styles.container, this.props.style]}
navigationState={this.state}
renderScene={SceneMap(this.state.scenes)}
renderTabBar={this._renderTabBar}
onIndexChange={this._handleIndexChange}
initialLayout={initialLayout}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
tabbar: {
backgroundColor: '#3f51b5',
},
tab: {
width: 120,
},
indicator: {
backgroundColor: '#ffeb3b',
},
label: {
color: '#fff',
fontWeight: '400',
},
});

Your code sample is incomplete, so it's hard to say, but the error suggests that you may be importing the TabView or View components incorrectly (possibly referring to a default export instead of a named export, or vice versa). I'll update this answer with something more helpful if you can provide the full code sample for that file (don't cut off the imports).

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

ForwardRef error with typescript and react-native

I'm getting a ts error when using forwardRef
// [ts] Property 'forwardRef' does not exist on type 'typeof React'.
const MyComponent = React.forwardRef((props: Props, ref: any) => ...
In React Native the parent component is throwing this error:
Invariant Violation: Element type is invalid: expected a string (for build-in components) or a class/function (for composite components) but got: object
Any idea on how to solve it?

According to the definitions:
function forwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ComponentType<P & ClassAttributes<T>>;
interface RefForwardingComponent<T, P = {}> {
(props: P & { children?: ReactNode }, ref?: Ref<T>): ReactElement<any> | null;
propTypes?: ValidationMap<P>;
contextTypes?: ValidationMap<any>;
defaultProps?: Partial<P>;
displayName?: string;
}
ref is an optional argument, try the following:
Inside a class create a ref object with a type parameter equal to your desired target (in my case div but View also works in react-native)
private divRef: React.RefObject<div> = React.createRef();
In the interface that represents the props for the forwarded component expose it as an optional property
interface Props {
ref?: React.RefObject<div>;
}
Declare the forwarded component with the type React.ComponentType
const ComponentWithForwardedRef: React.ComponentType<Props> =
React.forwardRef((props: Props, ref?: React.Ref<div>) => (
<div ref={ref}>{props.message}</div>
));
When an instance of the component with the forwarded ref is created send the created ref object as a prop
<ComponentWithForwardedRef ref={this.divRef} />
All in one:
import * as React from "react";
import { render } from "react-dom";
interface Props {
message: string;
ref?: React.RefObject<div>;
}
const ComponentWithForwardedRef: React.ComponentType<Props> =
React.forwardRef((props: Props, ref?: React.Ref<div>) => (
<div ref={ref}>{props.message}</div>
));
class App extends React.Component<Props> {
private divRef: React.RefObject<div> = React.createRef();
public componentDidMount() {
const div = this.divRef.current;
// check the console!
console.log(div);
}
public render() {
return (
<ComponentWithForwardedRef ref={this.divRef} {...this.props} />
)
}
}
render(<App message="hello world" />, document.getElementById("root"));
Link for posterity: https://codesandbox.io/s/6v152q394k
Dependencies (reference purposes)
"#types/react": "^16.3.11",
"#types/react-native": "^0.55.19",
"react-native": "0.55.2",
"typescript": "^2.8.1"

React Proptypes

React provides proptypes for type checking as the following code block demonstrates:
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
But I can do the following as well for the 'name' proptype:
Greeting.propTypes = {
name: String
};
In the later case i don't need to include the 'prop-types' module. Which one is the recommended approach?

The first way is the recommended way.
When you do
Greeting.propTypes = {
name: String
};
you are defining a javascript string field inside your proptypes object. Also, you will not be able to make the prop a required prop by using the above.
By using this
Greeting.propTypes = {
name: Proptypes.string.isRequired
};
you can make the proptype required and show a console warning if it is not supplied.

ReactJS export const and component from one module

I have two modules that I want to share a const array. One of these modules includes both the const array and a component, whilst the other module only includes a component.
This is what I have in module "A".
export const ORDER_COLUMNS = [
{ name: 'orderNumber', title: 'Order', width: '10%', type: 'string' },
{ name: 'orderType', title: 'Type', width: '10%', type: 'string' }
];
class OrderGridControl extends React.Component {
constructor(props) {
super(props);
this.state = {
orderColumns: ORDER_COLUMNS
};
}
...
}
export default OrderGridControl;
And in module "B".
import {OrderGridControl, ORDER_COLUMNS} from 'component/order-grid-control';
class OrderQueryPage extends React.Component {
constructor(props) {
super(props);
this.state = {
orderColumns: ORDER_COLUMNS
};
console.info(this.state.orderColumns);
}
...
render() {
return (
<div>
<PropertyGrid gridSetup={this.state.orderColumns} />
</div>
);
}
}
When I run this I get the following error. invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'moduleB'.
However, the console.info(this.state.orderColumns) line logs all the column objects I expect.
Interestingly, if I copy the array into module "B" and assign the columns in the constructor exactly the same way it seems to work. It only seems to be an issue when I'm importing from the other module.

You've got it almost right-- you're exporting a default export (OrderGridControl) and a named export (ORDER_COLUMNS).
However, in B.js, you're trying to import two named exports.
Modify your import to look like this:
import OrderGridControl, { ORDER_COLUMNS } from 'component/order-grid-control';
The advantage of having a default export is that you don't have to match its name exactly when importing it, so you could do something like
import GridControl, { ORDER_COLUMNS } from 'component/order-grid-control';