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';
Some unwanted import can be causing the issue.
For me, this state was creating the issue.
import { exec } from "child_process";
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';
Related
I upgraded React Native to 0.70.3, but in this upgrade, React Native has an issue getting the path of the component. I used to create an index.js file within the component directory and from there I reference component names so I can easily import them as below:
// ./src/components/index.js
export {default as Container} from './general/Container';
export {default as Wrapper} from './general/Wrapper';
export {default as Toast} from './general/Toast';
export {default as Box} from './general/Box';
then I import them as:
import {Container, Wrapper, Toast, Box} from '../components';
I wasn't getting any error in React Native below 0.70 but now I am getting the following error:
Cannot read property 'Container' of undefined
and when I change the above imports as below then it works fine.
import Container from '../../components/Container';
import Wrapper from '../../components/Wrapper';
import Toast from '../../components/Toast';
import Box from '../../components/Box';
Any idea how I can fix it?
Thank you in advance!
React-native app can't find my ".js" files path and I'm not sure why. I try couple of ways, for example:
1- '../components/LoginScreen' 2- './LoginScreen' 3-
'./LoginScreen.js'
but same result.
Here is the error if someone can help me:
Looking for JS files in
C:\Users\<User>\reactnewapp
Loading dependency graph, done.
DELTA [android, dev] ..\..\../index.js ▓▓▓▓▓▓▓▓▓▓▓░░░░░ 70.6% (526/626)::ffff:127.0.0.1 - - [08/Jun/2019:16:39:15 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
error: bundling failed: Error: Unable to resolve module `./LoginScreen` from `C:\Users\<User>\reactnewapp\App.js`: The module `./LoginScreen` could not be found from `C:\Users\<User>\reactnewapp\App.js`. Indeed, none of these files exist:
* `C:\Users\<User>\reactnewapp\LoginScreen(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
Even when I put the './' it doesn't offer me a path.
App.js :
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import MainNavigator from './LoginScreen';
export default class App extends Component {
render() {
return (
<React.Fragment>
<MainNavigator/>
</React.Fragment>
);
}
}
Folders screenshots:
You are trying to import a file called "LoginScreen" located in the same folder. But your file is in the /components directory.
Change your import to:
import MainNavigator from './components/LoginScreen';
One dot is to indicate the current directory, which is what you want here. Two dots would be to indicate the parent directory.
I'm adding an audio module in my current react-native project. I have tried installing several modules (react-native-sound, react-native-track-player). Getting in both modules the same Error output, which is always pointing in the 'react-native/Libraries/Image/resolveAssetsource' as module not found.
ERROR in ./node_modules/react-native-track-player/lib/index.js
Module not found: Error: Can't resolve 'react-native/Libraries/Image/resolveAssetsource' in 'D:\workspaces\web\react\blink\node_modules\react-native-track-player\lib'
# ./node_modules/react-native-track-player/lib/index.js 1:401-459
# ./node_modules/react-native-track-player/index.js
# ./components/ui/BlinkAudio/BlinkAudio.web.js
# ./components/ui/BlinkAudio/index.web.js
# ./components/dialogs/ResourceDetails/ResourceDetails.js
# ./components/dialogs/ResourceDetails/index.js
# ./components/panels/catalog/CatalogPanel.js
# ./components/parts/Main/Main.js
# ./components/parts/Main/index.js
# ./index.web.js
This is the current imports in the index file of the audio module react-native-track-player:
import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetsource';
I have tried to fix this including 'resolveAssetsource' from the imports of 'react-native' as below:
import {
Platform,
AppRegistry,
DeviceEventEmitter,
NativeEventEmitter,
NativeModules,
resolveAssetsource
} from 'react-native';
But I am not pretty sure if it would be the best way and normally I don't like to touch package node-modules directly.
I also tried to exclude the audio module from webpack loaders with no result.
module: {
loaders: [
{
test: /\.js?$/,
exclude: function (modulePath) {
return (
/node_modules/.test(modulePath) &&
!/node_modules(\\|\/)react-native-track-player/.test(modulePath)
);
},
I wonder if someone could help me to find an answer and if is possible to deal with this react-native issue, as I'm thinking that these audio modules are calling wrongly the resolveAssetsource, or in the other hand, react-native doesn't provide this specific Library for third parties, I don't know.
This seems to be a syntax error issue. There is no file nor module named resolveAssetsource, the module and filename is resolveAssetSource with a capital S.
Try to remove react-native-track-player with yarn remove react-native-track-player and install it again (or delete the entire node_modules directory and run yarn install again) as the source code under react-native-track-player/lib/index.js has it properly without any errors:
import { Platform, AppRegistry, DeviceEventEmitter, NativeEventEmitter, NativeModules } from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
If you use it elsewhere, you'll have to import it like this:
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
But that is not the prefered way to do it, as this method is a member of the RN Image class/component Image.resolveAssetSource(source), so, it's better to just import the Image component and use it like this:
import {
Platform,
AppRegistry,
DeviceEventEmitter,
NativeEventEmitter,
NativeModules,
Image // Add Image import
} from 'react-native';
// and use the function as of Image method
let audioAssetSource = Image.resolveAssetSource(audioSource);
Either way, you'll have the method working and resolve the asset source information.
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
I created a fresh react native project (version 0.47.1). Now I'm trying to write a new component for my react native app.
/my-component.jsx
import React from 'react';
import {Text} from 'react-native';
export default class MyComponent extends React.Component {
render() {
return <Text>My Component</Text>
}
}
/index.android.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import MyComponent from './my-component';
export default class Test extends Component {
render() {
return (
<MyComponent />
);
}
}
AppRegistry.registerComponent('test', () => Test);
The packager throws the following error:
error: bundling failed: "Unable to resolve module `./my-component` from `<project_root_dir>/index.android.js`:
could not resolve `<project_root_dir>/my-component' as a folder: it did not contain a package, nor an index file"
Adding the file extension to the import results in the same error, except with the file extension appended to the paths in the error.
The same error goes for dependencies added via npm. In any case the path shown in the error exists.
It seems like you have moved the entry file i.e index.android.js into a custom directory i.e test => (test/index.android.js). For this purpose it cannot locate the entry file. Placing the index.android.js again into the root directory will solve the problem.
If you want to change the entry point of the project you can refer the following:
https://github.com/facebook/react-native/issues/3442
Change entry file path of android and ios in react-native project