I have installed react-router-native in my project using npm and I am getting an error saying:
E:/myapp/node_modules/react-router-native/NativeRouter.js,
11:9 Module parse failed: Unexpected token (11:9).... You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file. See
https://webpack.js.org/concepts#loaders
package.json :
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#material-ui/core": "^4.11.2",
"expo": "~40.0.0",
"expo-status-bar": "~1.0.3",
"firebase": "^8.2.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-vector-icons": "^7.1.0",
"react-native-web": "~0.13.12",
"react-router-native": "^5.2.0"
},
"devDependencies": {
"#babel/core": "~7.9.0"
},
"private": true
}
The file where react-router-native is giving an error (NativeRouter.js):
import React from "react";
import { Alert } from "react-native";
import { MemoryRouter } from "react-router";
import PropTypes from "prop-types";
/**
* The public API for a <Router> designed for React Native. Gets
* user confirmations via Alert by default.
*/
function NativeRouter(props) {
return <MemoryRouter {...props} />;
}
NativeRouter.defaultProps = {
getUserConfirmation: (message, callback) => {
Alert.alert("Confirm", message, [
{ text: "Cancel", onPress: () => callback(false) },
{ text: "OK", onPress: () => callback(true) }
]);
}
};
const __DEV__ = true; // TODO
if (__DEV__) {
NativeRouter.propTypes = {
initialEntries: PropTypes.array,
initialIndex: PropTypes.number,
getUserConfirmation: PropTypes.func,
keyLength: PropTypes.number,
children: PropTypes.node
};
}
export default NativeRouter;
Related
I am creating a project on a React Native application, and I am using Expo. I would like to add ads, so I'm using Google Ad Mob. So I created my account on the site. I have a problem and it's been a long time that I can't solve it.
I have this error:
` ERROR Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist.
If you're trying to use a module that is not supported in Expo Go, you need to create a development build of your app. See https://docs.expo.dev/development/introduction/ for more info.
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.`
here is my package.json:
{
"name": "front",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"#expo/vector-icons": "^13.0.0",
"#react-navigation/drawer": "^6.5.7",
"#react-navigation/native": "^6.1.2",
"#react-navigation/native-stack": "^6.9.8",
"axios": "^1.2.2",
"expo": "~47.0.12",
"expo-build-properties": "~0.4.1",
"expo-dev-client": "~2.0.1",
"expo-secure-store": "~12.0.0",
"expo-splash-screen": "~0.17.5",
"expo-status-bar": "^1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"react-native-animated-loader": "^1.0.0",
"react-native-gesture-handler": "~2.8.0",
"react-native-google-mobile-ads": "^9.1.1",
"react-native-infinite-scroll-view": "^0.4.5",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-toast-message": "^2.1.5",
"react-navigation": "^4.4.4",
"react-router": "^6.6.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"react-native-secure-store": "^1.0.3"
},
"private": true
}
and here is the file in which I use ad mob:
import React, { useState } from "react";
import { View, Text, Button, Alert, TouchableOpacity } from 'react-native';
import { SafeAreaView } from "react-native-safe-area-context";
import { RewardedAd, RewardedAdEventType, TestIds } from 'react-native-google-mobile-ads';
const adUnitId = __DEV__ ? TestIds.REWARDED : 'ca-app-pub-blablabla';
const rewarded = RewardedAd.createForAdRequest(adUnitId, {
requestNonPersonalizedAdsOnly: true,
keywords: ['fashion', 'clothing'],
});
const Video = () => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const unsubscribeLoaded = rewarded.addAdEventListener(RewardedAdEventType.LOADED, () => {
setLoaded(true);
});
const unsubscribeEarned = rewarded.addAdEventListener(
RewardedAdEventType.EARNED_REWARD,
reward => {
console.log('User earned reward of ', reward);
},
);
// Start loading the rewarded ad straight away
rewarded.load();
// Unsubscribe from events on unmount
return () => {
unsubscribeLoaded();
unsubscribeEarned();
};
}, []);
if (!loaded) {
return null;
}
return (
<View style={{alignItems: "center", justifyContent: "center"}}>
<TouchableOpacity style={{borderColor: "blue", padding: 30}}>
<Text onPress={() => rewarded.show()}>Watch Rewarded Ad</Text>
</TouchableOpacity>
</View>
);
};
export default Video;
I re-installed the nodes modules, I added this to my app.json file:
"plugins": [
[
"expo-build-properties",
{
"android": {
"compileSdkVersion": 31,
"targetSdkVersion": 31,
"buildToolsVersion": "31.0.0"
},
"ios": {
"deploymentTarget": "13.0"
}
}
]
]
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-2973173763441523~2444055698",
"ios_app_id": "ca-app-pub-2973173763441523~5693853805"
}
I followed the installation guide, so if anyone can help me to use Ad mob I would love it, thanks!
i followed a tutorial for adding web support using to a expo project **. using typescript, react-native-web and webpack. looks like it works for everyone. but for me, i get a blank web page after Web Bundling complete.
Started Metro Bundler
Web Bundling complete
even though it works just fine on the emulator. i get no error in the console.
package.json:
{
"name": "imibonano",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest --watchAll",
"deploy": "gh-pages -d web-build",
"predeploy": "expo build:web",
"commit": "node scripts/github.js"
},
"dependencies": {
"#expo-google-fonts/poppins": "^0.2.2",
"#expo/webpack-config": "^0.16.24",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/slider": "4.2.1",
"#react-native-firebase/app": "^14.2.3",
"#react-native-picker/picker": "2.4.0",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/material-bottom-tabs": "^5.3.15",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"dotenv": "^14.2.0",
"expo": "~45.0.0",
"expo-app-loading": "^2.0.0",
"expo-cli": "^5.4.8",
"expo-font": "~10.1.0",
"expo-google-app-auth": "^8.1.7",
"expo-linear-gradient": "~11.3.0",
"expo-modules-core": "~0.9.2",
"expo-splash-screen": "^0.15.1",
"expo-status-bar": "~1.3.0",
"firebase": "^9.6.4",
"jest": "^28.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-custom-swiper": "^1.0.16",
"react-native-flipper": "^0.146.1",
"react-native-gesture-handler": " ~2.2.1",
"react-native-pager-view": "5.4.15",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-swiper-flatlist": "^3.0.16",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "0.17.7",
"react-native-web-swiper": "^2.2.2",
"react-query": "^3.39.1",
"react-query-native-devtools": "^4.0.0",
"react-redux": "^8.0.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~17.0.21",
"#types/react-native": "~0.66.13",
"ts-node": "^10.8.1",
"typescript": "^4.7.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
"private": true
}
app.tsx:
import { StatusBar } from "expo-status-bar";
import React from "react";
import NavigationStack from "./navigation/NavigationStack";
import Providers from "./navigation/index";
import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import AppLoading from 'expo-app-loading';
import { AuthProvider } from "./navigation/AuthProvider";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import AppNavigation from './navigation';
import {
useFonts,
// Poppins_100Thin,
// Poppins_100Thin_Italic,
// Poppins_200ExtraLight,
// Poppins_200ExtraLight_Italic,
// Poppins_300Light,
// Poppins_300Light_Italic,
Poppins_400Regular,
// Poppins_400Regular_Italic,
Poppins_500Medium,
// Poppins_500Medium_Italic,
Poppins_600SemiBold,
// Poppins_600SemiBold_Italic,
// Poppins_700Bold,
// Poppins_700Bold_Italic,
// Poppins_800ExtraBold,
// Poppins_800ExtraBold_Italic,
// Poppins_900Black,
// Poppins_900Black_Italic
} from '#expo-google-fonts/poppins';
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const [loaded] = useFonts({
title: require('./assets/fonts/klarissa.regular.ttf'),
Poppins_400Regular,
Poppins_600SemiBold,
Poppins_500Medium
});
if (!isLoadingComplete || !loaded) {
return <AppLoading />;
} else {
return <Providers />;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#0a0a0a",
alignItems: "center",
justifyContent: "center",
}
})
index.js:
import React from "react";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import { AuthProvider } from "./AuthProvider";
import NavigationStack from "./NavigationStack";
export default function Providers() {
return (
<AuthProvider>
<SafeAreaView style={styles.container}>
<NavigationStack />
</SafeAreaView>
</AuthProvider>
);
}
The code was working fine in react-redux v5 but when I upgraded to v7 I obtained the following runtime error when navigating to the page with the CartContainer:
react-dom.development.js:11102 Uncaught Error: Could not find "store" in the context of
"Connect(CartContainer)". Either wrap the root component in a <Provider>, or pass a custom
React context provider to <Provider> and the corresponding React context consumer
to Connect(CartContainer) in connect options.
Now I do wrap the root-level component in a Provider, in the typical gatsby way,
Here is the ReduxWrapper.js file:
import React from 'react';
import { Provider } from 'react-redux';
import { getAllProducts } from './src/actions'
import { createStore, applyMiddleware } from 'redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import rootReducer from './src/reducers';
const middleware = [ thunk ];
if (process.env.NODE_ENV !== 'production') {
middleware.push(createLogger());
}
const store = createStore(rootReducer,applyMiddleware(...middleware))
store.dispatch(getAllProducts())
export default ({ element }) => (
<Provider store={store}>{element}</Provider>
);
The store instance should run downstream into any container that has connect() called on it.
additionally both gatsby-Browser.js and gatsby-ssr.js have the following:
export { default as wrapRootElement } from './ReduxWrapper';
the connected component in question, CartContainer.js is given below:
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { checkout } from '../actions'
import { getTotal, getCartProducts } from '../reducers'
import Cart from '../components/checkout/Cart'
const CartContainer = ({ products, total, checkout }) => (
<Cart
products={products}
total={total}
onCheckoutClicked={() => checkout(products)} />
)
CartContainer.propTypes = {
products: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
quantity: PropTypes.number.isRequired
})).isRequired,
total: PropTypes.string,
checkout: PropTypes.func.isRequired
}
const mapStateToProps = (state) => ({
products: getCartProducts(state),
total: getTotal(state)
})
export default connect(
mapStateToProps,
{ checkout }
)(CartContainer)
I am expecting CartContainer to have access to the store, and I suspect the problem lies with the fact I upgraded react-redux from v5 to v7, Since everything was working fine until that moment.
My dependencies:
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "1.0.0",
"author": "David W",
"dependencies": {
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/fontawesome-free": "^5.12.1",
"#fortawesome/fontawesome-svg-core": "^1.2.27",
"#fortawesome/free-brands-svg-icons": "^5.12.1",
"#fortawesome/free-solid-svg-icons": "^5.12.1",
"#fortawesome/react-fontawesome": "^0.1.9",
"#reach/router": "^1.3.3",
"bootstrap": "^4.4.1",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"gatsby": "^2.19.45",
"gatsby-background-image": "^0.10.2",
"gatsby-image": "^2.2.43",
"gatsby-plugin-env-variables": "^1.0.1",
"gatsby-plugin-manifest": "^2.2.39",
"gatsby-plugin-offline": "^3.0.32",
"gatsby-plugin-react-helmet": "^3.1.23",
"gatsby-plugin-sass": "^2.1.29",
"gatsby-plugin-sharp": "^2.4.3",
"gatsby-source-filesystem": "^2.1.46",
"gatsby-transformer-sharp": "^2.3.13",
"google-map-react": "^1.1.6",
"jquery": "^3.4.1",
"node-sass": "^4.13.1",
"nodemailer": "^6.4.3",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0-beta.17",
"react-dom": "^16.13.1",
"react-fontawesome": "^1.7.1",
"react-helmet": "^5.2.1",
"react-map-gl": "^5.2.3",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"typescript": "^3.8.3"
},
"devDependencies": {
"prettier": "^1.19.1"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"heroku-postbuild": "gatsby build",
"start": "gatsby serve",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-default.git"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-default#readme",
"main": "gatsby-browser.js"
}
My app uses CRNA and Expo, and my issue is that the Font.loadAsync() asynchronous function can't locate a .otf font file in the assets/fonts/ folder in my project directory. I am absolutely sure that the directory and file names are correct. I receive this error.
link to image of my error screen
Here is my code:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font, AppLoading } from 'expo'
import Root from './js/Root';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
fontLoaded: false
}
}
async componentDidMount() {
await Font.loadAsync({
"Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})
this.setState({ fontLoaded: true })
}
render() {
if (!this.state.fontLoaded) {
return <AppLoading />
}
return <Root />;
}
}
Here is my package.json:
{
"name": "Zumer",
"version": "0.1.0",
"private": true,
"devDependencies": {
"flow-bin": "^0.40.0",
"jest-expo": "^0.4.0",
"react-native-scripts": "0.0.28",
"react-test-renderer": "16.0.0-alpha.6"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch",
"flow": "flow"
},
"packagerOpts": {
"assetExts": ["ttf", "otf"]
},
"jest": {
"preset": "jest-expo",
"tranformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-navigation)"
]
},
"dependencies": {
"#expo/vector-icons": "^4.0.0",
"expo": "^16.0.0",
"native-base": "^2.1.2",
"react": "16.0.0-alpha.6",
"react-native": "^0.43.4",
"react-native-elements": "^0.11.1",
"react-navigation": "^1.0.0-beta.8",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-observable": "^0.14.1",
"redux-persist": "^4.6.0",
"rxjs": "^5.3.0"
}
}
Could it be that the .otf file format isn't supported by Expo?
I fixed this issue by converting the otf files to ttf
I had a similar issue and I was able to resolve it by removing the quotes around the key that requires the font source.
Before:
await Font.loadAsync({
"Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})
After
await Font.loadAsync({
Light: require('./assets/fonts/SemplicitaPro-Light.otf')
})
And using it in the stylesheet like so
const styles = StyleSheet.create({
text: {
fontFamily: 'Light'
}
});
Everything worked fine after that.
I'm building a React/Redux/ReactRouter/Jest boilerplate but I'm having an issue when testing a component with react-test-renderer.
I have put in place two kind of tests: unit tests for my redux actions and snapshot tests as a form of functional tests for my components.
First of all, my unit tests work perfectly. Here's one:
import mockStore from 'redux-mock-store';
import {fetchWordDefinitions} from '../src/actions';
describe('Async fetch of word definitions', () => {
it('fetches a word definitions', async () => {
const mockedResponse = [
{text: 'First definition'},
{text: 'Second definition'},
{text: 'Third definition'}
];
fetch.mockResponse(JSON.stringify(mockedResponse));
const store = mockStore({});
await store.dispatch(fetchWordDefinitions('whatever'));
expect(store.getActions()).toEqual([
{type: 'ERROR', error: null},
{type: 'FETCHING', fetching: true},
{
type: 'WORD_DEFINITIONS',
word: 'whatever',
definitions: [
"First definition",
"Second definition",
"Third definition"
]
},
{type: 'FETCHING', fetching: false}
]);
});
});
As you can see I'm using ES6 there (both in the test and in the tested action) and everything works fine.
The problem is when I try to test a component by creating it with react-test-renderer. Here's the broken test:
import React from 'react';
import {Provider} from 'react-redux';
import renderer from 'react-test-renderer';
import mockStore from 'redux-mock-store';
import Home from './../src/containers/Home';
test('test', () => {
const store = mockStore({});
const container = renderer.create(
<Provider store={store}>
<Home/>
</Provider>
);
// some assertions - execution does not get here
});
Here's what I get in the CLI:
FAIL __tests__/Home.test.js
● Test suite failed to run
/data/src/containers/Home.js: Unexpected token (8:11)
6 |
7 | class Home extends ReduxComponent {
> 8 | search = (value) => {
| ^
9 | if (value !== this.status().selectedWord) {
10 | this.dispatch(fetchRelatedWords(value));
11 | }
And this is my .babelrc file (which is sitting in the root of my project folder):
{"presets": ["es2015", "react"]}
And finally the packages.json file:
{
"name": "vocabulary",
"version": "0.1.0",
"author": "Francesco Casula <fra.casula#gmail.com>",
"license": "MIT",
"private": false,
"dependencies": {
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "^19.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"jest-fetch-mock": "^1.0.8",
"react-scripts": "^0.9.5",
"react-test-renderer": "^15.5.4",
"redux-logger": "^3.0.1",
"redux-mock-store": "^1.2.3",
"regenerator-runtime": "^0.10.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest"
},
"jest": {
"verbose": true,
"setupFiles": [
"./config/jest/setup.js"
]
}
}
By looking at the error it seems like babel may not be doing its magic?
What I find weird though is that is transpiling correctly in the other tests (the action ones).
Hope you guys can help me figure this out :-)
You will need the class-properties transform. Class properties are not yet in the ECMAScript spec but there are Babel plugins to allow this behavior.