I'm trying to implement redux saga in a react native application, I followed the documentation but this error is appearing.
Error: While resolving module redux-saga/effects, the Haste package redux-saga was found. However the module effects could not be found within the package. Indeed, none of these files exist:
/Users/www/Desktop/redux-saga/effects(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
/Users/www/Desktop/redux-saga/effects/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
My dependences
"dependencies": {
"axios": "^1.1.3",
"expo": "~47.0.3",
"expo-splash-screen": "~0.17.4",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"react-redux": "^8.0.5",
"redux": "^4.2.0",
"redux-saga": "^1.1.3"
},
RootSaga
import { all } from "redux-saga/effects";
import { postSaga } from "./posts/saga";
export function* rootSaga() {
yield all([postSaga]);
}
Store Config
import { applyMiddleware, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import { rootReducer } from "./combineReducers";
import { rootSaga } from "./rootSaga";
const sagaMiddleware = createSagaMiddleware();
export const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);
Does anyone know how I can resolve it?
Related
I'm a react-native beginner.
I was doing stack screen. Then I've got the below error.
Error: Unable to resolve module react-navigation-stack from /Users/chosohee/app2/src/navigation/index.js: react-navigation-stack could not be found within the project or in these directories:
node_modules
../node_modules
1 | import { createAppContainer, createSwitchNavigator } from 'react-navigation';
> 2 | import { createStackNavigator } from 'react-navigation-stack';
| ^
3 | import LoginScreen from './LoginScreen';
4 | import HomeScreen from './HomeScreen';
5 |
at ModuleResolver.resolveDependency (/Users/chosohee/app2/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:178:15)
at DependencyGraph.resolveDependency (/Users/chosohee/app2/node_modules/metro/src/node-haste/DependencyGraph.js:264:43)
at Object.resolve (/Users/chosohee/app2/node_modules/metro/src/lib/transformHelpers.js:170:21)
at resolveDependencies (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:466:33)
at processModule (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:232:31)
at async addDependency (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:361:18)
at async Promise.all (index 7)
at async processModule (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:279:3)
at async addDependency (/Users/chosohee/app2/node_modules/metro/src/DeltaBundler/graphOperations.js:361:18)
at async Promise.all (index 7)
Here is my src/navigation/index.js
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';
const AuthStack = createStackNavigator(
{
LoginScreen: {screen: LoginScreen},
HomesScreen: {screen: HomeScreen}
},
{
initialRouteName: 'LoginScreen'
}
);
const AppNavigator = createSwitchNavigator(
{
Auth: AuthStack
},
{
initialRouteName: 'Auth',
}
);
export default createAppContainer(AppNavigator);
Here is my package.json
{
"name": "app2",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "0.1.11",
"#react-navigation/bottom-tabs": "6.5.2",
"#react-navigation/native": "6.1.1",
"#react-navigation/native-stack": "6.9.7",
"#react-navigation/stack": "6.3.10",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-gesture-handler": "2.8.0",
"react-native-reanimated": "2.13.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "3.18.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.72.3",
"react-test-renderer": "18.1.0"
},
"jest": {
"preset": "react-native"
}
}
I tried
Unable to resolve module 'react-navigation'
https://github.com/react-navigation/react-navigation/issues/9976
https://reactnavigation.org/docs/troubleshooting/
when I tried
npx react-native start --reset-cache
I got another error below.
error listen EADDRINUSE: address already in use :::8081.
Error: listen EADDRINUSE: address already in use :::8081
at Server.setupListenHandle [as _listen2] (node:net:1717:16)
at listenInCluster (node:net:1765:12)
at Server.listen (node:net:1853:7)
at /Users/chosohee/app2/node_modules/metro/src/index.flow.js:398:14
at new Promise (<anonymous>)
at earlyPortCheck (/Users/chosohee/app2/node_modules/metro/src/index.flow.js:394:11)
at exports.runServer (/Users/chosohee/app2/node_modules/metro/src/index.flow.js:155:9)
at Object.runServer [as func] (/Users/chosohee/app2/node_modules/#react-native-community/cli-plugin-metro/build/commands/start/runServer.js:123:49)
at async Command.handleAction (/Users/chosohee/app2/node_modules/#react-native-community/cli/build/index.js:142:9)
info Run CLI with --verbose flag for more details.
Your import is not correct according to the stack navigation documentation you need to import createStackNavigator from #react-navigation/stack not from react-navigation-stack like this:
import { createStackNavigator } from '#react-navigation/stack';
For more information you can check the documentation from here.
I am new to VueJs and working on migrating existing app from vue2 to vue3.
I did all steps mentioned on Vue's migration doc still facing this issue.
Let me know if I am missing something here.
package.json
"dependencies": {
"vue": "^3.1.0",
"vue-router": "^4.0.0",
"vuex": "^4.0.0",
"#vue/compat": "^3.1.0",
"#vue/runtime-core": "^3.2.37"
... and other deps
},
devDependencies: {
"#vue/cli-plugin-babel": "4.5.0",
"#vue/cli-plugin-eslint": "4.5.0",
"#vue/cli-service": "4.5.0",
"#vue/compiler-sfc": "^3.1.0",
"vue-loader": "^16.0.0"
...& other depns
}
main.js
import Vue, {createApp, configureCompat } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n';
import localdev from './localdev.js'
configureCompat({
OPTIONS_BEFORE_DESTROY: false,
WATCH_ARRAY: false,
RENDER_FUNCTION: false,
CUSTOM_DIR: false,
INSTANCE_EVENT_EMITTER: false,
ATTR_FALSE_VALUE: false
});
const app = createApp(App);
app.use(router);
app.use(i18n.i18n);
app.use(store);
app.mount('#app');
Getting this error in browser console.
I'm facing the problem as "react-navigation is not exist in the haste module map" eventhough I've installed "react-navigation" and "react-native-gesture-handler"
import {
createStackNavigator,
createAppContainer,
} from 'react-navigation'
const RootStack = createStackNavigator({
SplashScreen: { screen: SplashScreen },
MainScreen: { screen: MainScreen },
AddExpenseScreen: { screen: AddExpenseScreen },
}, {
initialRouteName: 'SplashScreen',
headerMode: 'none'
})
const App = createAppContainer(RootStack)
Package.json
------------
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-gesture-handler": "^1.5.0",
"react-native-navigation": "^3.3.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6"
},
In your package.json, it says "react-native-navigation", but you're importing from "react-navigation".
Make sure to follow the instructions properly https://reactnavigation.org/docs/en/getting-started.html
Instead of :
const App = createAppContainer(RootStack)
Try :
export default createAppContainer(RootStack);
Check this for details.
I'm trying to set up Enzyme testing for my React Native project. I've been getting various errors in various scenarios.
Scenario 1
When I try to set up a test for one of my components, I get this error:
/Users/TuzMacbookPro2017/Development/QMG-local/APPS/ELECTRO/node_modules/#expo/vector-icons/Zocial.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Zocial.json';
^^^^^^^^
SyntaxError: Unexpected identifier
Some relevant files
test file
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import LoginView from "../src/screens/LoginView";
describe("LoginView", () => {
const wrapper = mount(<LoginView />);
it("can get through the damn test file", () => {
expect(true).toBe(true);
});
});
jest.config.js
module.exports = {
setupFilesAfterEnv: ["<rootDir>setup-tests.js"],
transformIgnorePatterns: [
"node_modules/(?!(jest-)?react-native|#react-native-community|react-native-elements)"
],
preset: "react-native"
};
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ["babel-preset-expo"]
};
};
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll --bail",
"testff": "node ./node_modules/jest/bin/jest.js --watchAll --bail"
},
"jest": {
"preset": "jest-expo",
"testEnvironment": "node",
"globals": {
"__DEV__": true
}
},
"dependencies": {
"#expo/samples": "2.1.1",
"#react-native-community/async-storage": "^1.3.4",
"axios": "^0.18.0",
"expo": "^32.0.0",
"flow-bin": "^0.98.1",
"native-base": "^2.12.1",
"pluralize": "^7.0.0",
"react": "16.5.0",
"react-dom": "^16.8.6",
"react-native": "0.57",
"react-native-elements": "^1.1.0",
"react-native-geocoding": "^0.3.0",
"react-native-global-font": "^1.0.2",
"react-native-indicators": "^0.13.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-render-html": "^4.1.2",
"react-native-uuid": "^1.4.9",
"react-navigation": "^3.9.1",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-saga": "^1.0.2",
"redux-test-utils": "^0.3.0",
"redux-thunk": "^2.3.0",
"sugar": "^2.0.6"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"axios-mock-adapter": "^1.16.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-preset-expo": "^5.0.0",
"babel-preset-react-native": "^4.0.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"fetch-mock": "^7.3.3",
"jest": "^24.8.0",
"jest-enzyme": "^7.0.2",
"jest-expo": "^32.0.0",
"jsdom": "^14.1.0",
"mock-async-storage": "^2.1.0",
"prettier-eslint": "^8.8.2",
"react-test-renderer": "^16.8.6",
"redux-mock-store": "^1.5.3",
"redux-saga-tester": "^1.0.460"
},
"private": true,
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
setup.tests.js
import Adapter from "enzyme-adapter-react-16";
import { configure } from "enzyme";
import jsdom from "jsdom";
import "react-native";
import "jest-enzyme";
function setUpDomEnvironment() {
const { JSDOM } = jsdom;
const dom = new JSDOM("<!doctype html><html><body></body></html>", {
url: "http://localhost/"
});
const { window } = dom;
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: "node.js"
};
copyProps(window, global);
}
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === "undefined")
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
Object.defineProperties(target, props);
}
setUpDomEnvironment();
configure({ adapter: new Adapter() });
imports from the component under test
import React, { Component } from "react";
import {
Image,
Input,
Button,
ThemeProvider,
Overlay
} from "react-native-elements";
import { View, Text, Picker } from "react-native";
import { DotIndicator } from "react-native-indicators";
import { connect } from "react-redux";
import { login, assignUser } from "../redux/actions/authActions";
import F8StyleSheet from "../components/F8StyleSheet";
import { Dropdown } from "react-native-material-dropdown";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scrollview";
import User from "../models/User";
import uuid from "react-native-uuid";
Scenario 2
So that's a problem, but then something else interesting happens. When I swap out my LoginView for a super simple component, the test runs, but brings up some new errors that cast some suspicion on my rendering setup.
SimpleView.js
import React from "react";
import { Text, View } from "react-native";
export default (SimpleView = ({ params }) => (
<View>
<Text>SimpleView</Text>
</View>
));
test
import React from "react";
import renderer from "react-test-renderer";
import { mount, ReactWrapper } from "enzyme";
import SimpleView from "./__mocks__/SimpleView";
describe("LoginView", () => {
const wrapper = mount(<SimpleView />);
it("can get through the damn test file", () => {
expect(true).toBe(true);
});
});
errors
PASS tests/LoginView.test.js (6.058s)
LoginView
✓ can get through the damn test file (4ms)
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <Text /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in Text (created by Component)
in Component (created by SimpleView)
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: The tag <Text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in Text (created by Component)
in Component (created by SimpleView)
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <View /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: The tag <View> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
in View (created by Component)
in Component (created by SimpleView)
in SimpleView (created by WrapperComponent)
in WrapperComponent
One reason for your issue could be the "preset": "react-native" line in your jest.config.js. Try changing it to "preset": "jest-expo". This is the way the expo documentation (https://docs.expo.io/versions/v35.0.0/guides/testing-with-jest/) explains how to setup jest with your project.
I encountered the same issue, and can't find a solution. So I had to mute error output:
jest --silent
ref: https://stackoverflow.com/a/49591765/4975761
I am trying to build the taxi booking app. From i get the error
undefined is not an object (evaluating'_react2.Proptypes.store'). I have tried all the other solutions in previously asked but it was not helpful. Any help on this is appreciated.
import React, { Component, PropTypes} from "react";
import { Router } from "react-native-router-flux";
import scenes from "../routes/scenes";
import { Provider } from "react-redux";
export default class AppContainer extends Component{
static propTypes = {
store: PropTypes.object.isRequired
}
render(){
return(
<Provider store = {this.props.store}>
<Router scenes = {scenes} />
</Provider>
)
}
}
package.json
{
"name": "TaxiApp",
"version": "0.0.7",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^2.3.5",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-addons-update": "^15.6.2",
"react-native": "0.51.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.0.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.0.4",
"react-test-renderer": "16.0.0",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native"
}
}
Ever since react version 16.0.0 forward, prop types cannot be taken from React itself as you did on the first line. You need to do the following;
npm install prop-types --save
Add the following import and remove the PropTypes from first line:
import PropTypes from 'prop-types';
After this, it should work like a charm.