Develop Reference

Getting "TypeError: (0 , _firestore.getFirestore) is not a function" When trying to perform integration testing with Jest, Firebase and Expo

I am getting the error "TypeError: (0 , _firestore.getFirestore) is not a function" When trying to run a Jest integration test with my app's Login page. It seems that Jest is unable to recognise it as a function despite the rest of my Expo app being able to recognise it just fine.
I am wondering if this is because My firebase config file uses Web Version 9 as required by Expo and if there are any solutions or alternatives to this.
Thanks
import { initializeApp } from 'firebase/app';
import { getFirestore } from "firebase/firestore";
// Firebase API
const firebaseConfig = {
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
I have tried import { firestore } from "firebase/firestore", import "firebase/firestore",
export const db+ app.firestore().
None of them works.
This is my package.json
{
"name": "test",
"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"
},
"dependencies": {
"#emailjs/browser": "^3.10.0",
"#expo/dev-server": "0.1.120",
"#expo/webpack-config": "^0.17.0",
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "6.5.2",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-picker/picker": "2.4.8",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.3",
"#twotalltotems/react-native-otp-input": "1.3.7",
"base-64": "^1.0.0",
"expo": "^47.0.8",
"expo-checkbox": "~2.2.0",
"expo-document-picker": "~11.0.1",
"expo-image-picker": "~14.0.2",
"expo-location": "~15.0.1",
"expo-status-bar": "~1.4.0",
"expo-web-browser": "~12.0.0",
"firebase": "^9.16.0",
"jest": "^26.6.3",
"jest-expo": "^47.0.1",
"leo-profanity": "^1.7.0",
"lottie-react-native": "^5.1.4",
"moment": "^2.29.4",
"parse": "^4.0.0",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-hook-form": "^7.42.0",
"react-native": "0.70.5",
"react-native-draggable-flatlist": "^4.0.0",
"react-native-dropdown-select-list": "^2.0.4",
"react-native-gesture-handler": "~2.8.0",
"react-native-google-places-autocomplete": "^2.5.1",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keychain": "^8.1.1",
"react-native-maps": "1.3.2",
"react-native-maps-directions": "^1.9.0",
"react-native-modal-datetime-picker": "^14.0.1",
"react-native-otp-input": "^1.0.12",
"react-native-paper": "^4.12.5",
"react-native-picker-select": "^8.0.4",
"react-native-reanimated": "~2.12.0",
"react-native-reanimated-carousel": "^3.1.5",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-uuid": "^2.0.1",
"react-native-web": "~0.18.7",
"react-native-webview": "11.23.1",
"rn-credit-card": "^1.0.4",
"uniqid": "^5.4.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#testing-library/react-native": "^11.5.1"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|#react-native(-community)?)|expo(nent)?|#expo(nent)?/.*|#expo-google-fonts/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
]
},
"private": true
}

when launching the apk, splash screen hangs (expo)

Built an apk for android, splash screen hangs at startup. But when I use the application at the expo itself, everything works fine. I use the stack (react-native expo).
below I indicated the files App.js and paсkage.json
import React from 'react';
import { Provider } from 'react-redux';
import Home from './src';
import store from './src/redux/store/index';
import { LogBox, View } from 'react-native';
import { useEffect, useCallback, useState } from 'react';
import \* as Font from "expo-font";
import \* as SplashScreen from 'expo-splash-screen';
function App() {
const \[fontLoaded, setFontLoaded\] = useState(false);
useEffect(() =\> {
async function prepare() {
try {
await Font.loadAsync({
"sf-pro-text": require("./assets/fonts/sf-pro-text-medium.otf"),
});
await new Promise(resolve =\> setTimeout(resolve, 2000));
} catch (e) {
console.warn(e);
} finally {
setFontLoaded(true);
}
}
prepare();
}, \[\])
const onLayoutRootView = useCallback(async () =\> {
if (fontLoaded) {
await SplashScreen.hideAsync();
}
}, \[fontLoaded\]);
if (!fontLoaded) {
return null;
}
LogBox.ignoreAllLogs();
console.error = (error) =\> error.apply;
return (
\<Provider store={store}\>
\<Home /\>
\</Provider\>
);
}
export default App;
to download fonts I use splashscreen, app.js code
{
"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": {
"#expo/ngrok": "^4.1.0",
"#expo/vector-icons": "^13.0.0",
"#react-native-async-storage/async-storage": "\~1.17.3",
"#react-native-community/datetimepicker": "6.5.2",
"#react-native-community/hooks": "^2.8.1",
"#react-native-community/slider": "4.2.4",
"#react-navigation/bottom-tabs": "^6.0.4",
"#react-navigation/native": "^6.0.2",
"#react-navigation/stack": "^6.0.2",
"axios": "^0.21.1",
"dateformat": "^4.6.3",
"expo": "^47.0.0",
"expo-av": "\~13.0.2",
"expo-constants": "\~14.0.2",
"expo-linear-gradient": "\~12.0.1",
"expo-notifications": "\~0.17.0",
"expo-screen-orientation": "\~5.0.1",
"expo-status-bar": "\~1.4.2",
"expo-video-player": "^2.0.1",
"link": "^0.1.5",
"moment": "^2.29.1",
"ngrok": "^4.2.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-gesture-handler": "\~2.8.0",
"react-native-maps": "1.3.2",
"react-native-pager-view": "6.0.1",
"react-native-safe-area-context": "4.4.1",
"react-native-svg": "13.4.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-switch": "^2.0.0",
"react-native-tab-view": "^3.1.1",
"react-native-web": "\~0.18.9",
"react-redux": "^7.2.4",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"expo-splash-screen": "\~0.17.5",
"expo-font": "\~11.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
this is the package.json all the libraries that I have included

Expo app stuck on splash screen after exporting it from snack

I wanted to create a calculator in a snack in expo, but then I tried to use it with an external code editor and It just stopped working. It was stuck on the splash screen and neither android nor web showed anything.
The proyect in snack works perfectly, but when I exported it, it didn't show anything.
My App.js is:
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native'
import DrawerNavigator from './components/DrawerNavigator'
export default function App(){
return(
<NavigationContainer>
<DrawerNavigator/>
</NavigationContainer>
)
}
My package.json is:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~47.0.8",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"tinydb": "*",
"expo-constants": "~14.0.2",
"#expo/vector-icons": "^13.0.0",
"react-native-paper": "4.9.2",
"react-native-screens": "~3.18.0",
"react-native-reanimated": "~2.12.0",
"#react-navigation/drawer": "^5.7.2",
"#react-navigation/native": "^5.0.5",
"react-native-vector-icons": "*",
"react-native-gesture-handler": "~2.8.0",
"react-native-safe-area-context": "4.4.1",
"react-native-responsive-fontsize": "*",
"react-native-web": "~0.18.9",
"react-dom": "18.1.0",
"#expo/webpack-config": "^0.17.2"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

React-router-dom update 5 to 6 Object(...) is not a function

I am trying to upgrade react-router-dom v5 to v6.
I removed , change to .
Now when I create simple functional component, pass to my , it works.
<BrowserRouter>
<Routes>
<Route
path="/"
key="homepage"
component={<MyComponent />}
/>
</Routes>
</BrowserRouter>
but when I try my real routes I get a lot of errors similar this:
index.tsx:66 Uncaught TypeError: Object(...) is not a function
at Module.<anonymous> (index.tsx:66:1)
at ./src/app/profile/component/profile-gallery-filter-form/index.tsx (index.tsx:94:1)
at __webpack_require__ (bootstrap:856:1)
at fn (bootstrap:150:1)
This is my package.json
{
"name": "frontend",
"version": "0.6.57",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#js-joda/core": "^5.2.0",
"#js-joda/timezone": "^2.12.0",
"#mui/material": "^5.2.1",
"#repugraf/tinymce-react": "^3.8.1",
"#sentry/react": "^6.19.2",
"#sentry/tracing": "^6.19.2",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"#tinymce/tinymce-react": "^3.13.1",
"#types/autobahn": "^18.10.0",
"#types/axios": "^0.14.0",
"#types/classnames": "^2.3.1",
"#types/emoji-mart": "^3.0.9",
"#types/google-map-react": "^2.1.1",
"#types/jest": "^26.0.23",
"#types/node": "^12.20.12",
"#types/react": "^17.0.5",
"#types/react-bootstrap-date-picker": "^4.0.9",
"#types/react-chartjs-2": "^2.5.7",
"#types/react-confirm": "^0.1.4",
"#types/react-dom": "^17.0.3",
"#types/react-filepond": "^7.1.0",
"#types/react-google-recaptcha": "^2.1.2",
"#types/react-phone-number-input": "^3.0.6",
"#types/react-router": "^5.1.14",
"#types/react-router-dom": "^5.3.3",
"#types/react-select": "^4.0.15",
"#types/react-webcam": "^3.0.0",
"#types/redux-form": "^8.3.1",
"#types/redux-saga": "^0.10.5",
"#types/socket.io-client": "^3.0.0",
"#types/styled-components": "^5.1.9",
"#use-it/event-listener": "^0.1.7",
"#wojtekmaj/react-timerange-picker": "^3.5.0",
"autobahn": "^20.9.2",
"axios": "^0.21.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bic-validator": "^1.27.0",
"bootstrap": "^5.1.3",
"classnames": "^2.3.1",
"connected-react-router": "^6.9.1",
"emoji-js": "^3.6.0",
"emoji-mart": "^3.0.1",
"eslint-plugin-deprecation": "^1.2.1",
"eslint-plugin-unicorn": "^35.0.0",
"filepond": "^4.30.3",
"filepond-plugin-file-validate-size": "^2.2.4",
"filepond-plugin-file-validate-type": "^1.2.8",
"filepond-plugin-image-preview": "^4.6.6",
"font-awesome": "^4.7.0",
"fp-ts": "^2.10.5",
"google-map-react": "^2.1.9",
"gos-socket-client": "^0.0.4",
"http-status-codes": "^2.1.4",
"io-ts": "^2.2.16",
"is-online": "^9.0.1",
"js-file-download": "^0.4.12",
"lodash": "^4.17.21",
"material-ui-dropzone": "^3.5.0",
"parcel-bundler": "^1.12.5",
"query-string": "^7.0.0",
"rc-slider": "^10.0.0-alpha.5",
"react": "^17.0.2",
"react-bootstrap": "^2.3.1",
"react-chartjs-2": "^4.0.1",
"react-chat-widget": "git+https://github.com/krajcikondra/react-chat-widget.git#v3.1.27",
"react-confirm": "^0.1.24",
"react-contenteditable": "^3.3.6",
"react-date-picker": "^8.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.2",
"react-dropzone-uploader": "^2.11.0",
"react-filepond": "^7.1.1",
"react-flags-select": "^2.1.2",
"react-google-recaptcha-v3": "^1.9.7",
"react-hover-video-player": "^9.3.1",
"react-html-parser": "^2.0.2",
"react-i18next": "^11.8.15",
"react-image-gallery": "^1.0.9",
"react-image-lightbox": "^5.1.4",
"react-images-uploading": "^3.1.2",
"react-phone-number-input": "^3.1.21",
"react-player": "^2.9.0",
"react-pro-sidebar": "^0.6.0",
"react-redux": "^7.2.4",
"react-redux-i18n": "^1.9.3",
"react-redux-toastr": "^7.6.5",
"react-router": "^5.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"react-select": "^5.2.2",
"react-sortable-hoc": "^2.0.0",
"react-string-replace": "^1.1.0",
"react-use-localstorage": "^3.5.3",
"react-webcam": "^6.0.1",
"reactjs-autobahn": "^1.8.19",
"redux-form": "^8.3.7",
"redux-form-dropzone": "0.0.1",
"redux-saga": "^1.1.3",
"sass": "^1.32.12",
"simple-peer": "^9.11.0",
"socket.io-client": "2.2.0",
"styled-components": "^5.3.0",
"ts-opt": "^2.3.0",
"typescript": "^4.2.4",
"universal-cookie": "^4.0.4",
"use-query-params": "^1.2.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start-dev": "react-scripts --openssl-legacy-provider start",
"start": "react-scripts start",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
"build-dev": "react-scripts build",
"test": "react-scripts test --watchAll=false",
"eject": "react-scripts eject",
"lint": "eslint --ext .ts,.tsx src --report-unused-disable-directives",
"lint-fix": "eslint --ext .ts,.tsx src --report-unused-disable-directives --fix",
"release": "bash .docker/release.sh"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/chart.js": "^2.9.35",
"#types/lodash": "^4.14.168",
"#types/react-image-gallery": "^1.0.2",
"#types/react-redux-i18n": "0.0.11",
"#types/react-redux-toastr": "^7.6.0",
"#typescript-eslint/eslint-plugin": "^4.29.3",
"#typescript-eslint/parser": "^4.29.3",
"chart.js": "^3.7.1",
"filepond-plugin-image-exif-orientation": "^1.0.11"
}
}
Somebody know what is wrong? I can't figure it out. Maybe react-router-dom need other version of some other package?
Thanks in advance

react-router-dom#6 is completely written in typescript, so you can remove "#types/react-router": "^5.1.14" and "#types/react-router-dom": "^5.3.3" from the project's dependencies as they are no longer necessary and may possibly mess with any linters and transpilers your project uses.
npm uninstall -S #types/react-router #types/react-router-dom
You've also a conflicting version of react-router installed and it should be removed. react-router-dom re-exports all of react-router for convenience.
npm uninstall -S react-router
The only other issue I see is in the code. The react-router-dom#6 Route component API changed significantly from v5; there is no longer any component, and render and children function props, all replaced by a single element prop taking a ReactNode value, a.k.a. JSX.
Example:
<BrowserRouter>
<Routes>
<Route
path="/"
key="homepage"
element={<MyComponent />}
/>
</Routes>
</BrowserRouter>

Unfortunately same problem after update my code and uninstall react-router library.
After 4 hours of debugging I find out problem is in import of files.
When I import file by this way:
index.tsx
import {profileAction} from './model';
// import {profileAction} from './model/action'; // when I change import to this it works
and model/index.tsx looks
export * from './action';
export * from './action-type';
export * from './api';
export * from './state';
export * from './sagas';
and model/action.ts looks:
export const profileAction = {...}
then I ever get error like this:
index.tsx:66 Uncaught TypeError: Object(...) is not a function
at Module.<anonymous> (index.tsx:66:1)
at ./src/app/profile/component/profile-gallery-filter-form/index.tsx (index.tsx:94:1)
at __webpack_require__ (bootstrap:856:1)
at fn (bootstrap:150:1)
i haven't a clue why my imports are broken. Since update react-router-dom all imports works fine.

Module not found: Can't resolve 'autosuggest-highlight/match'

I am trying to compile my react website. But whenever I try to build, it fails. I keep getting
Module not found: Can't resolve 'autosuggest-highlight/match'
I have react-drawer just outside where this file is, as well as my npm and node modules up to date. Every time I try to update the files, or make a change, it doesn't even start to compile and crashes at "react-script start".
This is the code for the page that crashed:
import React from 'react';
import Autosuggest from 'react-autosuggest';
import * as AutosuggestHighlightMatch from 'autosuggest-highlight/match';
import * as AutosuggestHighlightParse from 'autosuggest-highlight/parse';
import ApiRequest from './ApiRequest.js';
class Search extends React.Component {
componentDidMount() {
new ApiRequest('GET', '/clientlist').send((res, people) => {
if (res.status == 200) {
this.setState({people});
} else if (res.status == 401 || res.status == 403) {
console.log('authentication error');
}
});
}
constructor() {
super();
this.state = {
value: '',
suggestions: [],
people: [],
selection: ''
};
this.renderSuggestion = (suggestion, {query}) => {
const suggestionText = `${suggestion.name}`;
const matches = AutosuggestHighlightMatch(suggestionText,query);
const parts = AutosuggestHighlightParse(suggestionText, matches);
return (
<span className='suggestion-content '
style={{backgroundImage: `url(${suggestion.profileimg || 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'})`}}>
<span className="name">
{
parts.map((part, index) => {
const className = part.highlight ? 'highlight' : null;
return (
<span className={className} key={index}>{part.text}</span>
);
})
}
</span>
</span>
)
};
This is the image of my folder hierarchy:
Here is my Package.Json
{
"name": "medimo",
"version": "0.1.0",
"private": true,
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"chart.js": "^2.6.0",
"es6-object-assign": "^1.1.0",
"history": "^1.17.0",
"moment": "^2.18.1",
"parse-react": "^0.5.2",
"parse-server": "^2.5.3",
"parse5": "^3.0.2",
"postcss": "^6.0.9",
"postcss-cssnext": "^3.0.2",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-chartjs-2": "^2.5.7",
"react-dom": "^15.6.1",
"react-dropdown": "^1.2.5",
"react-image": "^1.0.1",
"react-motion-drawer": "file:../custom-deps/react-motion-drawer",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-sortable-hoc": "^0.6.7",
"react-tabs": "^1.1.0",
"socket.io-client": "^2.0.3",
"socket.io-react": "^1.2.0",
"utils": "^0.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}

I had the same problem with the exact same package funnily enough.
This is what I have that fixed it:
import AutosuggestHighlightMatch from "autosuggest-highlight/umd/match";
import AutosuggestHighlightParse from "autosuggest-highlight/umd/parse";

The dependency needs to be added it seems like:
npm i autosuggest-highlight

What solved the problem for me was to:
Delete node_modules directory
run npm install

Check-in official page document, following the way of import also working
import AutosuggestHighlightMatch from "autosuggest-highlight/match";
import AutosuggestHighlightParse from "autosuggest-highlight/parse";