We Keep Coding

React Hook error : Invalid hook call: mismatching versions of React and the renderer or breaking the Rules of Hooks or more than one copy of React

I'm fairly new to react and using hooks. I'm using downshift plugin and want to show a MultiSelection dropdown. I'm using hooks to do that but I keep getting this error in the browser:
Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following
reasons:
You might have mismatching versions of React and the renderer (such as
React DOM) You might be breaking the Rules of Hooks You might have
more than one copy of React in the same app See for tips about how to
debug and fix this problem.
I have read the doc and checked for any rules broken but as per my knowledge everything is correct.
Here is my function that uses hooks:
import React, { useState } from 'react'
import { useCombobox, useMultipleSelection } from 'downshift'
const DropdownMultipleCombobox=()=> {
const [inputValue, setInputValue] = useState('')
const {
getSelectedItemProps,
getDropdownProps,
addSelectedItem,
removeSelectedItem,
selectedItems,
} = useMultipleSelection({ initialSelectedItems: [Demoitems[0], Demoitems[1]] })
const getFilteredItems = (Demoitems) =>
Demoitems.filter(
(item) =>
selectedItems.indexOf(item) < 0 &&
item.toLowerCase().startsWith(inputValue.toLowerCase()),
)
const {
isOpen,
getToggleButtonProps,
getLabelProps,
getMenuProps,
getInputProps,
getComboboxProps,
highlightedIndex,
getItemProps,
selectItem,
} = useCombobox({
inputValue,
Demoitems: getFilteredItems(Demoitems),
onStateChange: ({ inputValue, type, selectedItem }) => {
switch (type) {
case useCombobox.stateChangeTypes.InputChange:
setInputValue(inputValue)
break
case useCombobox.stateChangeTypes.InputKeyDownEnter:
case useCombobox.stateChangeTypes.ItemClick:
case useCombobox.stateChangeTypes.InputBlur:
if (selectedItem) {
setInputValue('')
addSelectedItem(selectedItem)
selectItem(null)
}
break
default:
break
}
},
})
return (
<div>
<label {...getLabelProps()}>Choose some elements:</label>
<div style={comboboxWrapperStyles}>
{selectedItems.map((selectedItem, index) => (
<span
style={selectedItemStyles}
key={`selected-item-${index}`}
{...getSelectedItemProps({ selectedItem, index })}
>
{selectedItem}
<span
style={selectedItemIconStyles}
onClick={() => removeSelectedItem(selectedItem)}
>
✕
</span>
</span>
))}
<div style={comboboxStyles} {...getComboboxProps()}>
<input
{...getInputProps(getDropdownProps({ preventKeyAction: isOpen }))}
/>
<button {...getToggleButtonProps()} aria-label={'toggle menu'}>
↓
</button>
</div>
</div>
<ul {...getMenuProps()} style={menuMultipleStyles}>
{isOpen &&
getFilteredItems(Demoitems).map((item, index) => (
<li
style={
highlightedIndex === index ? { backgroundColor: '#bde4ff' } : {}
}
key={`${item}${index}`}
{...getItemProps({ item, index })}
>
{item}
</li>
))}
</ul>
</div>
)
}
export default DropdownMultipleCombobox;
my React component where I call the function :
export class TypeItemCollection extends React.Component {
render() {
return (<DropdownMultipleCombobox/>)
}
}
my package.json:
{
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"babel-types": "^6.26.0",
"browserify": "^17.0.0",
"downshift": "^6.1.7",
"emotion": "^9.2.12",
"emotion-server": "^9.2.12",
"moment": "^2.29.1",
"moment-datetime": "0.0.2",
"react": "^16.8.2",
"react-datepicker": "^4.6.0",
"react-datetime": "^3.1.1",
"react-dom": "^16.8.2",
"react-emotion": "^9.2.12",
"react-helmet": "^6.0.0",
"react-jss": "^8.6.1",
"react-router-dom": "^5.0.0",
"react-scripts": "^5.0.0",
"react-select": "^3.2.0",
"reactstrap": "^8.0.0",
"styled-components": "^4.0.0"
},
"devDependencies": {
"#babel/cli": "^7.16.0",
"#babel/core": "^7.16.5",
"#babel/plugin-proposal-class-properties": "^7.16.7",
"#babel/plugin-transform-react-jsx": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5",
"#testing-library/react": "^12.1.2",
"babel-jest": "^27.4.5",
"babel-loader": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babelify": "^10.0.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint-plugin-react-hooks": "^4.3.0",
"jest": "^27.4.5",
"react-test-renderer": "^17.0.2",
"typescript": "^4.5.4",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
Please let me know where I'm going wrong here. Thanks.

I found out that I had an extra copy of React running, after removing it hooks worked!!

react-native-elements fontFamily issue

After installing react-native-elements and its dependencies, I'm unable to get the SearchBar component to render as it should
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Ionicons, MaterialIcons } from '#expo/vector-icons';
import { SearchBar } from 'react-native-elements';
const HomeScreen = () => {
const [search, setSearch] = useState('');
return (
<View>
<SearchBar
placeholder="Search, organisations, projects, and more"
value={search}
onChangeText={(searchTerm) => setSearch(searchTerm)}
/>
</View>
);
};
In the terminal console I get the following warnings
fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Font.loadAsync.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at src/context/index.js:29:19 in loginUser
Here is my package.json dependencies
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
"axios": "^0.24.0",
"expo": "~44.0.0",
"expo-camera": "~12.1.0",
"expo-image-picker": "^12.0.1",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~2.1.0",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "^3.10.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "~0.17.5"
},
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/preset-typescript": "^7.16.7"
},
All the resource on the matter I've found so far are a couple of years old and don't solve my problem, for example:
fontFamily Material Icons is not a system font and has to be Loaded through Exponent
and
console.error : "fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync

The icons need to be preloaded at the start of the App.
Reference here
This is what I had to do in App.js:
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';
export default () => {
const [fontsLoaded] = useFonts({
Ionicons: require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'),
MaterialIcons: require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
'Material Icons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
});
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<Main />
);
};

React native, Component not showing anything on device, but works fine on browser

So I was building my application on browser and it works completely fine, but when I tried to run it on my phone nothing were showing. This is how it looks like on my browser
but on my phone I got nothing
here're my dependencies
"dependencies": {
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"formik": "^2.2.9",
"react": "17.0.1",
"react-bootstrap": "^2.0.4",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-paper": "^4.11.1",
"react-native-svg": "^12.1.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "0.17.1", <-- I didn't even use this I always use "react-native"
"react-router-dom": "^6.2.1",
"react-router-native": "^6.2.1"
}
I also checked the logs on browser and nothing were showing.
the code
import { View, Text } from 'react-native';
import React, { Component } from 'react';
class HomePage extends Component {
render(){
return (
<View>
<View>
<Text style={{fontSize: 100}}>Tested application</Text>
</View>
</View>
);
}
}
export default Homepage;

Style import (with webpack) on react js

I'm working on a React project and I'm trying to use this library(https://www.npmjs.com/package/react-image-gallery)
from npm And from the Documentation, they say we must add these instructions to import the CSS
my component
import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
export function Features() {
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
];
return (
<div>
<ImageGallery items={images} />;
</div>
)
}
my packeg json
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.4",
"#mui/material": "^5.2.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-image-gallery": "^1.2.7",
"react-material-ui-carousel": "^3.1.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.3",
"web-vitals": "^1.0.1"
},
But when I add this in my Component it gives me this ERROR
If there is no solution, please suggest to me the name of a library similar to this

Thanks everyone, the issue is resolved
I added this to the component
import "react-image-gallery/styles/css/image-gallery.css";
import React from 'react'
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from 'react-image-gallery';
import {ImgGallery} from "./Styled.js"
export function ShopDetails() {
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
];
return (
<ImgGallery>
<ImageGallery thumbnailPosition="left" useBrowserFullscreen={false}
showPlayButton={false} autoPlay={true} items={images} />;
</ImgGallery>
)
}

You must import only the components from the library, not the css or scss files.
For example import ImageGallery from 'react-image-gallery' and use it below like <ImageGallery/> as usual.
If it's not successful than try to import css/scss files to index.js

I've looked at the single-spa site on how to create parcels, I get exceptions

I've been trying to implement single-spa parcels, but I've been getting the following exception
index.js:167 Uncaught (in promise) Error: During 'mount', parcel threw an error:
<Parcel /> was not passed a mountParcel prop, nor is it rendered where mountParcel is within the React context.
If you are using <Parcel /> within a module that is not a single-spa application, you will need to import mountRootParcel from single-spa and pass it into <Parcel /> as a mountParcel prop
at index.js:167
at index.js:114
The error is about a mountParcel attribute of which is passed down the parcel, I've pulled it from single-spa library but still I get the same issue, I've been battling with this problem for a while now, please assist
Please find my code below
parcel-config.js
// myParcel.js
import React from 'react'
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react'
import MyParcelComponent from './my-parcel-component.component';
export const MyParcel = singleSpaReact({
React,
ReactDOM,
rootComponent: MyParcelComponent
})
export function bootstrap(props) {
return MyParcel.bootstrap(props).then(res => {
debugger;
});
}
export function mount(props) {
return MyParcel.mount(props);
}
export function unmount(props) {
return MyParcel.unmount(props);
}
// in this case singleSpaReact is taking our inputs and generating an object with the required lifecycles.
MyParcelComponent.js
import React from 'react';
export default class MyParcelComponent extends React.Component {
render() {
return (
<div >
<h1>This is a parcel</h1>
</div>
);
}
}
single-spa application. attempt to consume the parcel
import React from 'react';
import Parcel from 'single-spa-react/parcel'
import * as singleSpa from 'single-spa';
import { MyParcel } from './parcel1/parcel-config';
export default class Root extends React.Component {
componentWillMount(){
console.log(singleSpa);
}
render() {
return (
<div style={{ marginTop: '100px' }}>
This was rendered by app 1, which is written in React.
<Parcel
config={MyParcel}
mountParcel={singleSpa.mountRootParcel}
wrapWith="div" />
</div>
);
}
}
package.json
{
"name": "simple-single-spa-webpack-example",
"version": "1.0.0",
"description": "A simple example of how to use webpack with single-spa",
"scripts": {
"watch": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/joeldenning/simple-single-spa-webpack-example.git"
},
"author": "Joel Denning",
"license": "MIT",
"bugs": {
"url": "https://github.com/joeldenning/simple-single-spa-webpack-example/issues"
},
"homepage": "https://github.com/joeldenning/simple-single-spa-webpack-example#readme",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^2.1.1",
"http-server": "^0.10.0",
"style-loader": "^0.23.1",
"ts-loader": "^2.3.2",
"typescript": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"#angular/common": "^4.3.3",
"#angular/compiler": "^4.3.3",
"#angular/core": "^4.3.3",
"#angular/platform-browser": "^4.3.3",
"#angular/platform-browser-dynamic": "^4.3.3",
"#angular/router": "^4.3.6",
"core-js": "^2.4.1",
"es6-promise": "^4.1.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.2",
"single-spa": "^3.9.1",
"single-spa-angular2": "^1.2.0",
"single-spa-react": "^2.9.0",
"single-spa-vue": "^1.3.0",
"vue": "^2.6.10",
"zone.js": "^0.8.16"
}
}