I have created a custom npm module (will use xxx instead of its name) and link it manually using npm install.
I tried very hard and searched :
[Workarounds] Packager unable to resolve module from /Users/node_modules/
Error: jest-haste-map: #providesModule naming collision when using a local dependency
before raising a question. I would be thankful if someone tell me what wrong with my code or my approach or any error in my code.
When I run react-native run-android following error is raised by metro bundler
Error: jest-haste-map: Haste module naming collision:
Duplicate module name: react-native
Paths: E:\cdg-native\CDG\node_modules\react-native-XXX\node_modules\react-native\package.json collides with E:\cdg-native\CDG\node_modules\react-native\package.json
This error is caused by `hasteImpl` returning the same name for different files.
My custom module package.json is
{
"name": "react-native-xxx",
"version": "1.0.0",
"description": "Library to render xxx",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"react native xxx"
],
"author": "Firdous Nath",
"license": "ISC",
"peerDependencies": {
"react": "*",
"react-native": "*"
},
"devDependencies": {
"react": "^16.6.1",
"react-native": "^0.57.5",
"babel-cli": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1"
}
}
index.js of the custom module is very simple as below
import React from "react";
import { Text } from "react-native";
export default class XXXView extends React.Component {
render() {
return (
<Text> From custom module </Text>
);
}
}
file where I am using custom module is
import React from "react";
import {StyleSheet, View} from "react-native";
import XXXView from "react-native-xxx"
//import {XXXView} from "react-native-xxx" -> I tried this as well
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<XXXView/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f5fcff"
}
});
I tried npm install /absolute/path/to/xxx and it linked module correctly. By correctly I mean I can see react-native-xxx package in nodemodule directory.
I did all possible ways but nothing worked.
I also tried but got no success
yarn add /absolute/path/to/react-native-xxx
react-native link react-native-xxx
react-native run-android
Add rn-cli.config.js In the root project
const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
resolver: {
blacklistRE: blacklist([
/node_modules\/.*\/node_modules\/react-native\/.*/,
])
},
};
see this issue
Hope it works for you
The error you get indicates that you have two react-native dependencies. One in your main project, one in your xxx module, thus creating a conflict between their package.jsons. seems like if you install a package from a local path, it copies its node_modules directory.
As you already have react-native as peer dependency in your custom module's package.json, try removing E:\cdg-native\CDG\node_modules\react-native-XXX\node_modules, this should solve the conflict.
It looks like you have a 2 different react-native project folders where one is dependent over another (it's getting included as node_module dependency) and it seems you are running your server start ("react-native start") command from the library folder.
Related
While trying to resolve module idb-keyval from file C:\Users\ADMIN\Desktop\Fintech\node_modules\parse\lib\react-native\IndexedDBStorageController.js, the package C:\Users\ADMIN\Desktop\Fintech\node_modules\idb-keyval\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:\Users\ADMIN\Desktop\Fintech\node_modules\idb-keyval\dist\compat.cjs. Indeed, none of these files exist:
C:\Users\ADMIN\Desktop\Fintech\node_modules\idb-keyval\dist\compat.cjs(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
C:\Users\ADMIN\Desktop\Fintech\node_modules\idb-keyval\dist\compat.cjs\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
You need to modify the metro.config.js file.
Add the cjs extension in the resolver part
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
},
};
I think you have same issue as here
you will most likely find that somewhere along the line your auto import imported useEffect, useState etc from there instead of from "react" itself.
I use this boilerplate. I nearly got React Native working on my Android device. But somehow it fails in the last step because it does not find an index.js file. But that file is located in my project.
So when I now run this in src/
yarn react-native run-android
this is the Node CLI window:
So my issue is:
Error: Unable to resolve module `./index` from ``:
None of these files exist:
* index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
From the console itself I cannot see any issue:
So somehow it does not find the index.js file for some reason.
I already tried yarn react-native start -- --reset-cache but it did not change anything.
Edit #1:
When I add a fake empty index.js file on root folder, the error is gone and in the emulator I get this one:
Edit #2:
I'm getting nearer to a solution. I just added this to the fake index.js in the root:
import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './src/app.json';
AppRegistry.registerComponent(appName, () => App);
and there I got:
Edit #3:
Now it helped me to overwrite the app.json with the following:
{
"name": "test",
"displayName": "test"
}
and new error is:
Edit #4:
I now moved all back to the src folder. So in the root there is no index.js anymore. Now this works pretty good. The usual react-scripts start is running. Also react-native start runs. And the issue with run-android was fixed with this in the MainApplication.java
protected String getJSMainModuleName() {
return "index.android";
}
to
protected String getJSMainModuleName() {
return "src/index.android";
}
I think this is another issue with the location...
So the main issue is fixed relatively easy. All that needs to be done is having a placeholder App.js file and another index.js file. How to do that in detail here. Here is the short description:
First move your existing App.js file to src/App.js.
Now create a new App.js in the main folder:
import React from 'react';
import HybridApp from './src/App';
const App = (props) => {
return (
<HybridApp />
);
}
export default App;
Also create a new src/index.js file:
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.getElementById("root"));
And all the other issues are related to using the wrong technology. Like you cannot use window in React Native. Here the code needs to be rewritten to be working again.
According to the react-native cli documentation we can specify custom configuration based on each platform for RN cli.
I want to change the default location of each platform folders so I added my custom react-native.config.js to the root of the project which you can find here:
module.exports = {
project: {
ios: {
project: './example/ios/example.xcworkspace',
},
android: {
sourceDir: './example/android/',
},
},
};
If I run react-native config in the root folder, I can see the correct configuration:
{
...
"project": {
"ios": {
"sourceDir": "path-to-project-directory/example/ios",
"folder": "path-to-project-directory",
"pbxprojPath": "path-to-project-directory/example/ios/example.xcworkspace/project.pbxproj",
"podfile": "path-to-project-directory/example/ios/Podfile",
"podspecPath": null,
"projectPath": "path-to-project-directory/example/ios/example.xcworkspace",
"projectName": "example.xcworkspace",
"libraryFolder": "Libraries",
"sharedLibraries": [],
"plist": [],
"scriptPhases": []
},
"android": {
"sourceDir": "path-to-project-directory/example/android/",
"isFlat": true,
"folder": "path-to-project-directory",
"stringsPath": "path-to-project-directory/example/android/app/src/main/res/values/strings.xml",
"manifestPath": "path-to-project-directory/example/android/app/src/main/AndroidManifest.xml",
"buildGradlePath": "path-to-project-directory/example/android/build.gradle",
"settingsGradlePath": "path-to-project-directory/example/android/settings.gradle",
"assetsPath": "path-to-project-directory/example/android/app/src/main/assets",
"mainFilePath": "path-to-project-directory/example/android/app/src/main/java/com/example/MainApplication.java",
"packageName": "com.example",
"packageFolder": "com/example",
"appName": "app"
}
}
}
The problem is whenever I run react-native run-ios I get this error:
error iOS project folder not found. Are you sure this is a React Native project?. Run CLI with --verbose flag for more details.
NOTE: I installed all the dependencies properly. Here is the result of the react-native --v command:
react-native-cli: 2.0.1
react-native: 0.62.0
"react-native": "0.63.4"
For iOS you need to specify the --project-path prop in your run script, not in react-native.config.js
Your run script should look like this:
"ios": "react-native run-ios --project-path './<new folder>/ios'"
But after that you need to update paths to ../../node_modules/ located modules in a lot of native files like Podfile, ios/<your project name>.xcodeproj/project.pbxproj
You can check more here
I have use react-native, the version is "version": "0.57.1". I have installed react-navigation via:
npm install --save react-navigation
The react-navigation version is react-navigation#3.4.0. The content of app.js file is below:
import * as React from 'react';
import { Text, View } from 'react-native';
// import { createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
export default HomeScreen;
This sample works fine on expo. But when I run third line, an error occurs.
[16:57:50] While trying to resolve module react-navigation from file
/home/ubuntu/workspace/App.js, the package
/home/ubuntu/workspace/node_modules/react-navigation/package.json
was successfully found. However, this package itself specifies a
main module field that could not be resolved
(/home/ubuntu/workspace/node_modules/react-navigation/src/react-navigation.js.
Indeed, none of these files exist: [16:57:50] [16:57:50] *
/home/ubuntu/workspace/node_modules/react-navigation/src/react-navigation.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
[16:57:50] *
/home/ubuntu/workspace/node_modules/react-navigation/src/react-navigation.js/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
This is odd you should not need to install react navigation specifically this should be installed automatically when making an expo project I would recommend deleting your node-modules and installing again with the following
rm -rf node_module && npm install
npm audit fix
expo start
If this doesn’t do the trick try making a new project and just copy your class to it hope this helps
While trying to run my project on an android emulator, the device throws this error emulator screenshot. I cannot seem to figure out what I am doing wrong. I am still quite new to react
firstly install babel polyfill
npm install --save #babel/polyfill
then import on top of index.js .
i mean on very top before any import
import "#babel/polyfill";
if got no answer
so
module.exports = {
entry: ["#babel/polyfill", "./app/js"],
};
use it this way on your webpack.config.js
For anyone coming across this post later, #babel/polyfill has been deprecated in favour of core-js. See https://babeljs.io/docs/en/babel-polyfill
If you're using >7.4.0 babel, you should be able to configure this using #babel/env. Set your targets in .babelrc (or whatever you call your babel config)
{
"presets": [
[
"#babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
}
}
]
]
}
https://babeljs.io/docs/en/usage#configuration