We Keep Coding

Exporting Text is showing a Render Error in React Native

I have made a components library for ReactNative using react-native-builder-bob for packaging. With some components like Button, Image, etc is working great, but when I try to import a Text component is failing and showing this error:
View config getter callback for component 'RCTTEXT' must be a function
(receive undefined)
If in the project where I import this component do some change, the view is refreshed and the error dissapears, but every time I run the project for first time this error is shown.
Here is the imported component:
import {Text} from 'react-native';
export const MyText = ({...props}) => <Text {...props} />;
And after, this is the way I import this component in another app:
import { MyText } from 'my-library'
export const Example = () => {
return <MyText>Hello</MyText>
}
I was searching for the error of 'View config getter....' and the only I found is, provocated by importing error, but only happens with this component.
What thing could be provocating this error?
Thanks in advance

Try using your custom text component like this.
import {Text} from 'react-native';
export const MyText = ({children, ...props}) => <Text {...props}>{children}</Text>;
Hope it will solve your problem.

well....finally I found the error. Everything is all great from my library of components, but, apparently, in my component library I have the react-native version 0.68.0 and, in the app where I was importing this components I had a lower version (0.67.3). If I use the same version, it is working!

TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function. How do I solve this?

I was using React when I got the following error.
TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function
How do I solve this?
I have added the code below.
import React from 'react';
import LoginForm from './loginForm'
import useState from "react"
function LoginPage(){
const[details, setDetails] = useState({
username: '',
password: ''
});
function handleChange(event){
const updatedDetails = {...details, [event.target.name]: event.target.value};
setDetails(updatedDetails)
}
return(<LoginForm details={details} onChange={handleChange}/>)
};
export default LoginPage;
The other component is :-
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Jumbotron, Container } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
function FormPage(props){
return (
<Jumbotron fluid>
<Container fluid>
<center><h1 className="display-3"> Log IN</h1></center>
<p className="lead">Please Enter your Details Here</p>
</Container><br />
<Container fluid>
<Form>
<FormGroup>
<Label for="username">Username</Label>
<Input type="textarea" name="username" id="username" placeholder="Enter your Username Here" value={props.details.username} onChange={props.onChange}></Input>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<Input type="password" name="password" id="password" placeholder="Enter your Password Here" value={props.details.username} onChange={props.onChange}></Input>
</FormGroup>
<Button color="success">Submit</Button>
</Form>
</Container>
</Jumbotron>
);
};
export default FormPage;
PS: I am typing this because StackOverflow is asking me to add some more details as my question is mostly code. Sorry.

I am just going to point out you are importing from "react" lib twice
// You have: (look closely at libs you are importing from and how)
import React from 'react';
import LoginForm from './loginForm'
import useState from "react"
// Should be:
import React, { useState } from 'react';
import LoginForm from './loginForm'
// Why?
// Because useState is one of React libs' export default's apis / methods
// aka useState is just a part of the React default export but also is itself, an export
// React.useState() is how it would look if you just imported the React lib itself and nothing else
// how I personally handle any react apis is via ==>
import React, { useState } from 'react
// apart from loving seeing all libraries and individual apis imported
// as soon as I see a file to get a sense of its potential functionalities,
// read my detailed explanation below
Here, you are literally importing (export default react) from the entire React lib and simply naming it a random string useState and then trying to use that how you use the real React.useState() api/method.
So you trying to use useState like the actual React useState api in this manner will absolutely cause an error because you are basically saying this require('react')() when you import the default import of react lib versus an api that is part of that default export, or it is itself an export in which you need to deconstruct from the lib in the import statement, not sure related but you 100% have malformed code I cannot believe no one even mentioned this?
For further example, for it to work as you have it (although eslint should be screaming about duplicate imports by now before you even hit save) you would have to do useState.useState(), which clearly is not what you want. Some people don't mind React.useState() but I personally will shun you haha jk, but destruct from import!!! please (:
Using Best Coding Standards is key to being a great software engineer on a team and even in your own personal projects for all of the reasons, and will absolutely increase your DX and output overall.
Hope this helped my dude. We all have gone through these little quirks that once you learn, add that to your "things I know for sure" list and keep trucking

Please add more information. Like what was the API/module you choose to import and is it using
export default function
vs
export function
How you are consuming it?
You might have importing it as
import Something from './something';
Whereas, your something.js might look like:
export function Something(){
}

If you updated webpack to version 5.x.x, then this might be related to output.library setting issue
so if you have library setting in webpack output try to remove it:
output: {
path: path.resolve(__dirname, 'build'),
filename: 'painterro.commonjs2.js',
library: 'Painterro', // ⏪ this is the issue
libraryTarget: 'commonjs2',
},

It would be useful to post the code in the file throwing this error.
With this info as it is, it is possible that you imported something as a default import yet there is nothing exported as default from the module in question. Try to investigate the default exports and see if one of them has no default exports. You could look up the module documentations.

Under similar circumstances I got the above error on Next running under Yarn. When I added a new page the issue appeared. The only thing that solved it was running
yarn upgrade.

I don't know if this will help anyone but one of the reasons for this error is that you are trying to initialize a function which is not defined. Usually this happens because you are not importing a function properly. You can try importing a function as import {function} from "library" instead of import function from "library". In my case, the error was occurring because I imported getCookie function from next-cookies as - import getCookie from 'cookies-next'. getCookie is not an export default function. All I needed to do was to import it like - import {getCookie} from 'cookies-next' to fix the problem.

after installing new package maybe you haven't re-run the project

Well...in my case ... I realized that I forgot to to put the extension of the file. so the compiler was acting weird.. I put myfilename.js and everything worked well

How to make react-datepicker display properly?

I cannot make the component react-datepicker display properly.
it actually displays like this.
I wish it could display at least like the documentation for the component does.
I first thought it was a dependency problem, and added all the dependencies the doc says are needed. The result is still the same.
Some stackoverflow questions talked about this and referred to a missing stylesheet. However I imported everything with npm, so that shouldn't be the problem.
My class component looks like this :
import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";
class Filters extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate : new Date()
};
this.handleStartChange = this.handleStartChange.bind(this);
}
handleStartChange = (date) => {
this.setState({
startDate : date
})
}
render() {
return (
<div className="filters">
<div id="filterbox">
<p id="titre">Filtres</p>
<DatePicker
selected={this.state.startDate}
onChange={this.handleStartChange} />
</div>
</div>
)
}
}
export default Filters;
I apologize in advance if the problem is very obvious, I'm quite new to reactjs.

You forgot to import the package css.
From the documentation:
import "react-datepicker/dist/react-datepicker.css";

I think you have to import the react-datepicker.css too, not only the package itself.
import "react-datepicker/dist/react-datepicker.css";
Below is a simple example of how to use the Datepicker in a React
view. You will also need to require the CSS file from this package (or
provide your own). The example below shows how to include the CSS from
this package if your build system supports requiring CSS files
(Webpack is one that does).

you haven't imported their css file.
import "react-datepicker/dist/react-datepicker.css";

VSCode bad javascript formatting

I am editing some javascript files (particularly, reactjs coed) in VS Code on Ubuntu 18.04. However, the "formatting" is really terrible.
Before:
import React, { Component } from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return (
<div className="App">
<Dropzone onDrop={this.onDrop} />
</div>
);
}
}
export default App;
After:
import React, {
Component
} from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return ( <
div className = "App" >
<
Dropzone onDrop = {
this.onDrop
}
/> <
/div>
);
}
}
export default App;
Previously, I was editing these files on Windows 10 in VS Code, and the formatter was great. Is there an extension I am missing? Or what am I doing wrong here. To format, I am using the "Format Document" keyboard shortcut.
Here are my current extensions:

The culprit for this behavior was Beatify extension on Vscode in my case. Disabling resolved the issue.

Here is the solution,
change the language manually to "javaScript React"
try with your favorite formatter(you can install vs code extensions such as "Prettier","beautify")
Cheers !

I personally use Prettier for JS and CSS formatting, and JS JSX Snippets for JSX in React. I have tried a lot of others, but with those 2 I can assure you your React code will look beautiful.

ApolloClient is not a constructor react-apollo

I am following this tutorial and trying to implement graphQl. There is an issue with the following line:
const client = new ApolloClient();
Strangely I cannot find anything in the react-apollo GitHub page for this. Is there something stupid that I am doing wrong.
import React, { Component } from 'react';
import ChannelsList from './ChannelsList.js';
import './App.css';
import {
ApolloClient,
gpl,
graphql,
ApolloProvider
} from 'react-apollo';
//issue with this line
const client = new ApolloClient();
const channelsListQuery = `
query ChannelsListQuery {
channels {
id,
name
}
}
`;
const ChannelsListWithData = graphql(channelsListQuery)(ChannelsList);
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<ChannelsListWithData />
</ApolloProvider>
);
}
}
export default App;

To provide a straightforward answer - ApolloClient is no longer a part of the react-apollo package, but made it to a package of it's own: apollo-client.
You may also see it being imported from apollo-boost, a convenience which "includes some packages that we [Apollo's authors] think are essential to developing with Apollo Client."

having the same issue here and actually following the same article (https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b) as the OP. The issue is that the article is really old and out of date and I would not recommend using it as a guide (take a look at the comments in the article).
For a start I'd recommend looking at the docs. This link (http://graphql.org/graphql-js/) in particular is a good starting place for getting something up and running.