Requiring 'fetch' is returning an empty object in a React-Native app - reactjs

I'm currently working on my second react-native application. Previously I had simply required fetch like so:
var fetch = require('fetch');
I never installed it with npm, as it was already available by default.
I just started a new react-native project (after updating my react native cli) and now when I require fetch in the same fashion and try to call a fetch method my app crashes and I get an error that says
Object is not a function(evaluating 'fetch(API_URL, fetchObject)')
When I console out fetch with
console.log(fetch);
I get
{}
Any suggestions?

Alright, it looks you don't event have to require fetch any more. It's just available globally.

Try to include React/RCTNetwork subspec in native.

Related

MDbootstrap materialSelect is not a function Rails and Webpacker app

Im trying to figure out why the function materialSelect() is doesn't exist in the app context.
The MDboostrap select field is created correct with behaviour and style but I am trying to destroy and re-initialize using materialSelect() such as:
const $select = $('.mdb-select');
$select.materialSelect({destroy: true});
$select.materialSelect();
I get the follow error:
materialSelect is not a function
This app uses Rails 6/Webpacker. I think there is a file missing here since this app was created without the min.js file, instead each mdbootrap dependency was downloaded and added to the project.
The reason why this is not working is because of the MDBoostrap version. This project uses 2.2.1 and materialSelect() doesn't exist under this version. I was able to get it working on latest version 4.20.0

Why lodash get returns undefined for nested object in the react production build?

Actually, I know my question is s weird but really confused me. lodash functions are awesome and using them is a safe way to have a secure and clean code but in my react project when I use get function of lodash, in the development environment it works well as every developer expected.
import get from 'lodash/get';
const hostname = get(window, 'location.hostname');
// => returns the current hostname
But after I run yarn build && yarn start to make a production build of my ReactJS app and run it, its behavior is changed and returns undefined.
import get from 'lodash/get';
const hostname = get(window, 'location.hostname');
// => returns undefined
So in the production build, I try the get(window, 'location') and it returns the location object. but when I put a key of location the lodash get function returns undefined.
Actually, in the production and just for nested it returns undefined
Due to this issue, I just found this post, but no one answer it.
According to this comment I became passionate about testing my production build. So I listed all thing That happens on the production build of my project that maybe causes this issue.
At first, I doubted to babel plugins that I used for transpile, but none of them affect just on production, they affect for whole environments.
And at last, I find LodashModuleReplacementPlugin. this plugin causes this issue.
Based on its doc:
Deep property path support for methods like _.get, _.has, & _.set.
This plugin omit the deep path support on lodash get. That's the point.

How to prevent Create React App from forcing me to install TypeScript because a dependency has a ts file in it

I have a React app created using Create React App that was running fine until today. Something must have updated the last time I installed a new package. Anyhow, so whenever I try to start the app, it complains that there are .ts files (within node_modules folder) and forces me to install TypeScript.
Is there any way to stop this behaviour? Because currently, installing TypeScript just opens a bottle of worms, where I need to resolve the TypeScript errors that arises.
Also, as the screenshot suggests, removing the tsconfig.json file doesn't resolve the issue, it gets automatically created on every run..
Currently because it's preventing me to work, I've done the following modification until they fix it on the Create React App:
Current solution until they fix the create react app
On the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, find the definition of verifyNoTypeScript() (line 24). Replace the function to the following:
function verifyNoTypeScript() {
return true;
}

Source map generated by webpack works, but can't debug properly

I'm new to Webpack and React. I'm building an app using react, and today tried to create a build for the first time (i'm using create-react-app).
When trying to debug using Chrome dev tools, I can see all my Components using the map file generated by webpack/babel, however I get an error when placing a breakpoint inside a basic map method, and trying to access the value of the current item, or the mobx store items.
It's obviously working fine in development mode.
I guess i'm missing something with the configuration?
Thanks,
Currently fixed it by setting mangle=false in the uglify plugin. This causes uglify to not change variable names, so the map file has no problem to map to the real variables.

How do I use Google's gapi with Reactjs?

Google's gapi js library wants an onload function specified like this:
<script src="https://apis.google.com/js/client.js?onload=init"></script>
How do I interoperate this with ReactJS?
I tried using react-script-loader (https://github.com/yariv/ReactScriptLoader) which ran into some troubles because gapi doesn't yet exist when the script loader thinks it has completed returning it.
Don't know if you're still looking for this answer but I faced the same problem and the best option that I found was creating this package with all gapi script code, so now I just have to import it into my react app and I doesn't even have to wait the gapi script loaded from google apis link.
gapi-script package
I also created an example showing how you can use this package:
gapi-script example

Resources