I try to use swiper from this library https://github.com/leecade/react-native-swiper
Here is my dependencies:
"react": 16.3.1,
"react-native": "~0.55.2",
"react-native-swiper": "^1.5.13"
But when i just add this code import Swiper from 'react-native-swiper';
My component like:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Swiper from 'react-native-swiper';
class Welcome extends Component {
render() {
return (
<View>
<Text>Welcome</Text>
</View>
);
}
}
export default Welcome;
It will shows error even i don't use the <Swiper />
error:
Failed to load bundle
Check my terminal error shows:
error: bundling failed: Error: While trying to resolve module `react-native-swiper` from file `/Users/huaweb/ReactNativeProject/Huaweb/src/components/Welcome.js`, the package `/Users/huaweb/ReactNativeProject/Huaweb/node_modules/react-native-swiper/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/huaweb/ReactNativeProject/Huaweb/node_modules/react-native-swiper/index.js`. Indeed, none of these files exist:
I don't know what is However, this package itself specifies amainmodule field that could not be resolved
I can't figure it out. Is any thing i miss it ?
Any help would be appreciated, thanks in advance.
In node_modules find the folder react-native-swiper and do so, It worked for me
replace :
module.exports = Swiper;
module.exports.default = Swiper;
by
export default Swiper
export {Swiper}
try with:
import Swiper from 'react-native-swiper/src';
Related
I have this basic React Native Code which fails to compile as soon as I import anything from react-native-router-flux. It throws Module not found: Can't resolve '#react-navigation/core'
If I uncomment line import { Router, Scene } from "react-native-router-flux";, everything works fine. I also manually did npm install #react-navigation/core but to no avail
import React from "react";
import { Router, Scene } from "react-native-router-flux";
class Index extends React.Component {
render() {
return <div></div>
}
}
export default Index;
What could I be missing?
Versions
React v17.0.2
react-native-router-flux v4.3.1
React-native v0.66.3
The latest react-native version (v0.66.3) is incompatible with react-native-router-flux (v4.3.1) which is pretty old. Its better to look for #react-navigation/native
Thanks #XplosiVe06 for pointing out
Getting this warning in the console when React Native app gets built initially.
Can anyone help me with the reason why I am getting this?
Following are the specifications
react-native-cli: 2.0.1
react-native: 0.62.0
Node: v12.9.1
There are generally two categories of cycle warning: one from our own codebase, and another from node_modules packages such as react-navigation-fluid-transitions. In this case, I think it is react-native paper.
We could hardly do anything about the require cycle in node_modules unless the package authors fix it.
But you still wish to keep the package and ignore the warning:
import { YellowBox } from 'react-native'
YellowBox.ignoreWarnings([
'Require cycle:'
])
I fixed it by importing each component separately like this:
import Button from 'react-native-paper/src/components/Button';
import IconButton from 'react-native-paper/src/components/IconButton';
do similar wherever you are using sth from react-native-paper
in your package.json ensure react-native-paper is "react-native-paper": "^4.5.0",
Then
rm -rf node_modules
npm install
npm start --reset-cache
your react-native-paper warning will disappear
If you have multiple Providers wrapping your app, make sure your Provider imported from react-native-paper is way up above in the Hierarchy (there are exceptions like Redux's Provider).
I had multiple providers and had it between other providers, which I think created cycle imports. Fixed the problem when I moved it above the tree, just below redux's provider().
import React from 'react';
import { StatusBar } from 'react-native';
import { Provider } from 'react-redux';
import { Provider as PaperProvider} from 'react-native-paper';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { store } from './your/reduxStore';
import { someTheme } from './your/apptheme';
const App = () => (
<Provider store={store}>
{/* Make sure react-native-paper provider is high up the tree */}
<PaperProvider theme={muiTheme}>
<SafeAreaProvider>
<StatusBar translucent />
{/* Your other App Stuff Here */}
</SafeAreaProvider>
</PaperProvider>
</Provider>
);
export default App;
YellowBox is deprecated, use LogBox:
import { LogBox } from 'react-native';
LogBox.ignoreLogs([
'Require cycle:'
])
sadly the "Require cycles are allowed" warning is still shown in the logs
You can go to each path and remove the cycle.
For example, in node_modules\react-native-paper\src\components\Checkbox\Checkbox.tsx, remove the reference of CheckboxItem.
However, I don't know what the impact of this is.
The code in app.js file with import statements for react redux is created to display a header with a text called "Tech stack".
App.js
import React from 'react';
import { View } from 'react-native';
import { Header } from './components/common';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
const App = () => {
return(
<Provider store={createStore(reducers)}>
<View>
<Header headerText="Tech Stack" />
</View>
</Provider>
);
};
export default App;
This is the index file
index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent(tech_stack, () => App);
While running this on the terminal, it throws a error saying unable to resolve module 'react-redux'.
Close the JS bundle(a terminal starts when you run app for first time) and rerun it using the command react-native start from the project path. Basically, you need to rerun the JS bundle after every package installation.
Install 'react-redux' by using
npm install --save react-redux
if you not installed it. By seeing your comment as you mentioned that you installed redux only.
Then restart the JS bundle by using
react-native start --reset-cache
I've faced this issue just now. actually, Our (you and I) main issue is naming the global state folder name is redux and the bundler falls in a conflict because there is a folder inside node_modules that name is redux too.
In fact, the main issue is this line:
import { createStore } from 'redux';
I renamed the resux stuffs folder to reduxStore instead of redux and then everything works properly.
This error occurs because you do not have Redux-Thunk middleware installed on your application. To install run:
npm install redux-thunk
Then, restart your application:
react-native start
More information: https://github.com/reduxjs/redux-thunk
I just ran into this problem and solved it by installing redux in addition to react-redux. Apparently, react-redux requires it.
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
I'm new to react native so this must be easy:
My (simple) application:
index.android.js
import SearchContainer from './components/SearchContainer.jsx';
AppRegistry.registerComponent('MyFirstApp', () => SearchContainer);
and in components/SearchContainer.jsx:
import React, { Component } from 'react';
export default class SearchContainer extends Component {
....
}
but I'm getting
Requiring unknown module "./components/SearchContainer.jsx".If you are sure the module is there, try restarting the packager or running "npm install".
I've tried a moving the SearchContainer to the same directory as index.android.js and I get the same thing.
Thanks a bunch in advance, friends!
Ok, I found out a way this will work, but I'm not sure what the science behind it is - I guess "jsx" is a take over from React that simply doesn't belong.
I simply changed "jsx" to "js" and it worked.