undefined is not an object ( evaluating 'react2.propTypes.oneOfTypes') - react-native

Getting
undefined is not an object ( evaluating '_react2.PropTypes.oneOfType')
While using react-native-camera .
using react-native-camera#0.6 with following react native version.
react-native-cli: 2.0.1
react-native: 0.55.2
What i tried inside app.js is
import React, { Component, PropTypes } from 'react';
and
import PropTypes from 'prop-types';
But not worked.

PropTypes package has been separated from react since v15.5 as mentioned here
Since you're using an older version of react-native-camera, therefore they contain old dependencies in their index.js
react-native-camera index.js v0.6 contains
import React, { Component, PropTypes } from 'react';
Therefore you need to update the package since they have major changes and revamped folder structure as seen in Camera.js

Related

React Native: 'React' refers to a umd global but the current file is a module consider adding an import instead

I was getting this error while adding a View component in .tsx file.
I raised this question and answered myself as I thought it will help others who are facing similar issue.
Please import 'React' in your code import statements:
import * as React from 'react';
Reference:
https://github.com/Microsoft/TypeScript/issues/14118

Can't resolve 'react-addons-css-transition-group'

I am a newbie to react.js. I have import React and a UI framework based on React in my project. But when I try try to compile my project with webpack, I get this:
Can't resolve 'react-addons-css-transition-group'
this is my index.js related to React
import React from "react";
import { render } from "react-dom";
Do I need to import something others?
You've to add these lines to make sure CSSTransitionGroup is accessible by your program.
import CSSTransitionGroup from 'react-addons-css-transition-group';

what different import 'react' and 'react-native' in same file

In some example, I saw :
import React, {
Component
} from 'react';
import {
StyleSheet, Text,...
} from 'react-native';
I know the 'react-native' purpose, but I don't understand why they import 'React' in some example? it makes me confused...
Thanks for your time :)
import React from 'react' is required for JSX to work.
Under the hood, JSX is being transpiled to React.createElement(...) invocations. So, even though you don't have to type React.createElement(), JSX still requires React to be active in the module namespace so that it can do it for you.
Example of what React looks like without the transpilation step.

“Module does not exist in the module map or in these directories” in react native

I have started learning react native. I am struggling in the simple react native project while importing new js [example Home.js] in index.android.js
I'm getting the following error"
Module does not exist in the module map or in these directories.
UnableToResolveError: Unable to resolve module .src/Components/home/Home/Home.js from C:\Users\Magi\Dictionary1\index.android.js: Module does not exist in the module map or in these directories:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Home from '.src/Components/home/Home/Home.js';
If Home.js and index.android.js are in the same directory, you can replace
import Home from '.src/Components/home/Home/Home.js';
with
import Home from './Home.js';
But if your src folder is at the same level as index.android.js, src needs to be preceded by ./ instead of .:
import Home from './src/Components/home/Home/Home.js';
Some unwanted import can be causing the issue.
For me, this state was creating the issue.
import { exec } from "child_process";

Does the use of es6 named imports reduce the bundle size when using webpack

I need to understand when I use a named import like this
import { render } from 'react-dom'
does webpack include in the bundle only the render method or the whole module especially when using tree shaking by setting module to false in babel configuration and let webpack take care about them?
Also in the case of importing react
import React from 'react'
&&
import React, { Component, PropTypes } from 'react'
what's the right way?
Tree-Shaking is applicable for modules which can be statically analysed (to get the entire dependency tree without running the code) -
and it is ONLY for ES2015 Modules and NOT CommonJS(node) modules.
react, react-dom, as of this writing (react#15.4.x), are NOT published as ES2015 modules. So either of these -
import { render } from "react-dom";
or
import ReactDOM from "react-dom";
will result in the entire react-dom being included in your bundle. The same applies for react and other libraries which are published as CommonJS modules or UMD.

Resources